CSS의 의미와 구성 요소 - 바로 실행해보면서 배우는 HTML5/CSS3
CSS의 의미와 구성 요소
09 CSS 기초
CSS의 의미와 구성 요소

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

먼저 Style Sheets라는 단어를 살펴볼까요? Style Sheets는 '스타일 문서들'이라고 직역할 수 있습니다. 즉, CSS는 웹 페이지의 스타일을 정리해둔 문서인 셈이죠. 여기서 스타일은 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px", "제목은 여기 배치"와 같이 웹 페이지와 관련된 스타일을 지칭합니다.

스타일 문서만으로도 CSS를 설명하기에는 충분하다 생각하실 수 있지만, Cascade 또한 CSS를 표현하는 중요한 특징입니다. Cascade는 '폭포가 되어 떨어지다'의 뜻을 가지는 단어이며, CSS에서 스타일이 적용될 때 우선순위를 가지고 순차 적용되는 모양이 마치 폭포와 비슷하다는 특징을 표현합니다.

위 내용을 모두 정리하자면 Cascading Style Sheets의 약자인 CSS는 웹 페이지의 다양한 스타일을 정의할 때 사용된다는 것이죠.


CSS의 기본 구조


CSS는 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서입니다. 다음과 같은 스타일 명세서가 있다고 생각해볼까요? "이 글의 폰트, 글자 크기, 글자색을 다음과 같이 해주세요"라고 적혀 있습니다.

이제 이 스타일 명세서를 CSS로 교체해보겠습니다. 이 예시를 토대로 CSS의 기본 구조를 자세히 짚어보려합니다.


1. 선택자(Selector)

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

선택자는 일종의 연결 통로입니다. CSS를 적용할 때 이 글의와 같이 스타일을 지정할 특정 HTML 요소를 선택하는 역할을 수행합니다.


2. 속성(Property)

다음으로 속성(Property, 프로퍼티)에 대해 알아봅시다. HTML에 속성과 한글 단어는 같지만 영문이 다릅니다. HTML의 속성은 attributes였죠. 때문에 CSS에서의 속성은 프로퍼티라고 구분하겠습니다. CSS에서 프로퍼티로 font-family, font-size 등을 사용할 수 있습니다.

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


3. 값(Value)

마지막으로 16px, blue에 해당하는 부분은 CSS에서 값(Value, 밸류)라고 부르며, 값은 일반적으로 다음과 같이 나뉩니다.

  • CSS에 정의된 특정 키워드(blue, block 등)
  • 수치와 특정 단위(px, %, em, rem, vh, vw 등)

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

이제까지 설명한 내용을 정리하면 CSS의 기본적인 구조는 선택자, 프로퍼티, 값으로 이루어져 있습니다.

  • 선택자: 스타일을 적용하고자 하는 HTML 요소를 선택
  • 프로퍼티: 스타일 속성 이름
  • : 속성에 대응되는 값


4. 선언 블록(Declaration Block)

추가로, 선택자 뒤에 위치한 {}(중괄호) 안의 한 블록 또는 덩어리를 선언 블록(Declaration block)이라 말합니다.

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

선언 블록 내부를 보면 프로퍼티와 값은 짝을 이루고 있습니다. CSS에서 프로퍼티와 값의 짝을 선언(Declaration)이라고 부릅니다.

선언 블록 내부의 다른 선언과 ;(세미콜론)으로 구분됩니다. 각 선언이 끝날 때마다 선언이 끝났음을 알리는 세미콜론을 반드시 작성하셔야 합니다. 세미콜론을 쓰지 않는다면 스타일이 제대로 반영되지 않을 수 있습니다.

세미콜론으로 끝을 알린다는 점을 이용하여 CSS에서는 모든 선언을 한 줄로 이어 쓸 수 있습니다. 하지만 몇몇 특정 경우 이외에는 가독성을 위해 한 줄로 작성하는 방법은 권장하지 않습니다.

Q & A
Q&A forum that anyone can ask and answer.
Share your questions and answers with other students and grow together!
Registered Questions(0)