[Web 부트캠프 2023] 4. CSS 기초

CSS란?

명사를 설명해주는 형용사

스타일을 정하고 시각적으로 보이는 형태를 만든다. 페이지에 입력된 html 컨텐츠를 시각적으로 표현한 것

html로 만들기 때문에 html이 꼭 필요하다.

Cascading Style Sheets - 내용이 담긴 형식

프로그래밍 언어는 아니지만 문서를 시각적으로 나타내기 위해서 사용하는 일종의 언어이다.

 

CSS 규칙 예시

/*css의 기본 형태*/
selector {
    property: value;
}

/*모든 h1 요소를 보라색으로*/
h1 {
    color: purple;
}

/*모든 이미지 요소 크기 설정*/
img {
    width: 100px;
    height: 200px;
}

 

방대한 CSS에 당황하지 않기

모두 외워야 될지 걱정할 필요가 없다 - 매우 많은 CSS 속성 목록

구글링과 인터넷 튜토리얼들을 적극 활용하자. 

 

MDN CSS Property Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

CSS reference - CSS: Cascading Style Sheets | MDN

 

스타일을 올바르게 담기

인라인 스타일

html 요소에 직접 스타일을 작성하는 것 - 권장하지 않음

 

HTML의 head 부분에 style 태그로 작성

이것 또한 권장하지 않음

 

외부 스타일 시트 작성

완전 별개인 CSS(.css) 파일 작성 - 권장

link - head에 들어가며 스타일시트를 포함하게 함, href 속성으로 스타일시트 경로나 위치 넣음

rel은 사실 그렇게 중요하지는 않는데 항상 들어가긴 한다.

외부 css 파일 작성

HTML 문서의 head에 link를 통해 app.css 임포트

 

색 및 배경색 속성

MDN CSS Color

https://developer.mozilla.org/ko/docs/Web/CSS/color

color - CSS: Cascading Style Sheets | MDN

 

색상 시스템: RGB와 알려진 색상

Named Colors Reference

시중의 모든 브라우저는 명명된 140가지 색상(Named Colors)을 인식함

 

https://htmlcolorcodes.com/color-names/

Color Names — HTML Color Codes

 

RGB

빛의 여러 색을 섞어서 표현하는 가산 컬러 시스템 중 하나

브라우저 색상은 red, green, blue 채널로 구성되며 각 채널들의 값은 0(없음)~255(최댓값)의 범위로 구성되어 있다.

RGB 코드를 직접 생각해내기는 어렵다 - 온라인 컬러 선택기나 팔레트 활용

CSS 내에서 rgb(r, g, b 값)으로 작성한다.

 

HTML Color Picker

https://htmlcolorcodes.com/color-picker/

Color Picker — HTML Color Codes

 

색상 시스템: 16진법

헥스 컬러 코드라고도 부른다.

RGB와 동일하게 red, green, blue 채널을 사용한다. - 범위: 0~255

헥스 컬러는 16진법으로 표기한다. - 16진법: 한 자릿수 당 0~F(15) 16개의 수 범위

#ffff00 → ff(red) ff(green) 00(blue): ff는 255(최댓값)를 의미한다.
- 이 경우 red, green은 최댓값, blue는 0 이므로 없다.

헥스 코드만 보고 어떤 색상인지 알 수는 없을 것 - red, green, blue의 포함량은 얼추 확인할 수는 있지만...

 

일반 텍스트 속성

MDN CSS Text

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_Text

CSS Text - CSS: Cascading Style Sheets | MDN

 

폰트 속성

픽셀로 글꼴 크기 지정하기

픽셀(px)

가장 흔히 사용되는 절대 단위 - 절대 단위: 최종 결과 크기

픽셀은 다른 요소나 원래 폰트 크기 등의 영향을 받지 않는다면 최소한 문서 내에서는 항상 동일함

그러나 디스플레이의 크기나 다른 요소에 따라 다를 수 있다. - 1픽셀에는 다소 차이가 있을 수 있지만, 그 차이는 작을 것이다.

 

폰트 패밀리(글꼴 집합)

폰트 패밀리는 요소의 폰트 모양(스타일) 변경할 때 사용한다.

폰트를 변경하는 작업은 브라우저에 빌트인 된 폰트에 따라 다름 - 사용자 지정 폰트를 삽입하고 싶으면 방법 배워야

안전한 방법은 브라우저 폰트나 웹 안전 폰트(Web Safe Font) 사용 - 대부분의 시스템에서 지원되는 폰트

밑의 링크에서 플랫폼에 따라 지원되는 웹 안전 폰트들을 확인 할 수 있다.

 

Web Safe CSS Font Stacks

https://www.cssfontstack.com/

CSS Font Stack: Web Safe and Web Font Family with HTML and CSS code.

 

 

텍스트, 폰트 속성 정리