1. CSS

이거 하나는 외우고 가요! :)

1. CSS

CSS는 Cascading Style Sheets의 약자입니다. CSS의 단어 뜻을 보면 그 목적과 의미를 쉽게 이해할 수 있습니다.

가장 먼저 Style Sheets라는 단어에서 볼 수 있듯이 CSS는 웹 페이지의 스타일을 정리해둔 문서입니다. 여기서 스타일은 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px", "제목은 여기 배치" 와 같이 웹 페이지와 관련된 스타일 들을 말합니다.

남은 Cascade는 '폭포가 되어 떨어지다'의 뜻을 가지는 단어입니다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됩니다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.

정리하자면 Cascading Style Sheets의 약자인 CSS는 웹 페이지의 다양한 스타일을 정의할 때 쓰입니다.

💡

1996년 CSS1, 1998년 CSS2, 2005년 CSS3, 개발 중이며, 그리드 레이아웃 같은 경우 레벨1에도 도달하지 못했기 때문에 정확히 우리가 배우는 것을 CSS3라고 말할 수는 없습니다.

HTML이 웹의 뼈대라고 한다면 CSS는 HTML을 꾸며주는 살에 해당합니다.

2. CSS의 기본 구조

CSS는 우리가 앞으로 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서입니다. 한 번 다음과 같은 스타일 명세서가 있다고 생각해 봅시다. 이 글의 폰트, 글자 크기, 글자색을 다음과 같이 해주세요 라고 적혀 있습니다.

이제 이 스타일 명세서를 CSS로 바꿔 보면 다음과 같습니다. 이 예시를 토대로 CSS의 기본 구조에 대해 차근차근 설명하겠습니다.

2.1 Selector

먼저 HTML의 <article>태그를 가리키고 있는 article을 CSS에서는 선택자 혹은 셀렉터라고 부릅니다.

CSS를 적용할 때는 이 글의와 같이 우리가 스타일을 지정할 HTML 요소를 선택해야 합니다. 이 역할을 하는 것이 바로 셀렉터입니다.

2.2 Property

다음으로 font-family, font-size 해당하는 부분을 CSS에서는 속성(Property)이라고 부릅니다.

CSS에서 프로퍼티는 지정하고 싶은 스타일 속성의 이름입니다. CSS에 정의된 프로퍼티를 올바르게 사용해야 원하는 스타일을 적용할 수 있습니다. font-size, color, backgound, position 등 정말 다양한 속성이 있습니다.

2.3 Value

마지막으로 16px, blue에 해당하는 부분은 CSS에서 값(Value)이라고 부릅니다. 보통 벨류는 다음과 같이 나뉩니다.

CSS에 정의된 특정 키워드(blue, block 등)를 벨류로 사용

수치와 특정 단위(px, %, em, rem, vh, vw 등)를 벨류로 사용

벨류는 프로퍼티와 짝을 이루어 사용됩니다. 보통 각 프로퍼티에 허용되는 벨류의 종류가 정해져 있고 이를 알고 정확히 사용해야 우리가 원하는 방향으로 스타일을 적용할 수 있습니다.

정리하면 CSS의 기본적인 구조는 셀렉터, 프로퍼티, 벨류로 이루어져 있습니다.

선택자(Selector): 스타일을 적용하고자 하는 HTML 요소를 선택

속성(Property): 스타일 속성 이름

값(Value): 속성에 대응되는 값

2.4 Declaration

추가적으로 설명하자면, 셀렉터 뒤에 {}(중괄호) 안에 있는 한 블록, 덩어리를 보통 선언 블록(Declaration block)이라고 부릅니다.

이 선언 블록은 중괄호로 시작과 끝을 나타내며 블록 안에 내용을 한 단위로 하고 다음 선언 블록과 구분됩니다. 각각 적혀 있는 선택자에 한해서만 스타일이 적용됩니다.

다음으로 선언 블록 내부를 보면, 속성과 값은 짝을 이루고 있습니다. CSS에서 속성과 값의 짝을 선언(Declaration)이라고 부릅니다.

선언 블록 내부의 다른 선언과 ;(세미콜론)으로 구분됩니다. 각 선언이 끝날 때마다 선언이 끝났음을 알리는 세미콜론을 반드시 써야 합니다. 쓰지 않을 경우 제대로 스타일 적용이 안될 수 있습니다.

세미콜론으로 끝을 알리기 때문에 이러한 점을 이용하여 CSS에서는 모든 선언을 한 줄로 이어서 쓸 수 있습니다. 하지만 가독성을 위해서, 특별한 경우가 아니라면 권장하지 않습니다.