CSS는 Cascading Style Sheets의 약자입니다. CSS의 단어 뜻을 보면 그 목적과 의미를 쉽게 이해할 수 있습니다.
가장 먼저 Style Sheets라는 단어에서 볼 수 있듯이 CSS는 웹 페이지의 스타일을 정리해둔 문서입니다. 여기서 스타일은 "글자 크기는 13px", "본문 내용 오른쪽에 여백은 13px", "제목은 여기 배치" 와 같이 웹 페이지와 관련된 스타일 들을 말합니다.
남은 Cascade는 '폭포가 되어 떨어지다'의 뜻을 가지는 단어입니다. CSS에서 스타일이 적용될 때는, 우선순위를 가지고 적용됩니다. 이 우선순위가 적용되는 과정이 마치 폭포처럼 위에서 아래로 떨어지는 모양이기 때문에 Cascade라는 단어가 붙었습니다.
정리하자면 Cascading Style Sheets의 약자인 CSS는 웹 페이지의 다양한 스타일을 정의할 때 쓰입니다.
CSS는 우리가 앞으로 웹에 적용할 스타일을 적어둔 일종의 스타일 명세서입니다. 한 번 다음과 같은 스타일 명세서가 있다고 생각해 봅시다. 이 글의 폰트, 글자 크기, 글자색을 다음과 같이 해주세요 라고 적혀 있습니다.
이제 이 스타일 명세서를 CSS로 바꿔 보면 다음과 같습니다. 이 예시를 토대로 CSS의 기본 구조에 대해 차근차근 설명하겠습니다.
먼저 HTML의 <article>태그를 가리키고 있는 article을 CSS에서는 선택자 혹은 셀렉터라고 부릅니다.
CSS를 적용할 때는 이 글의와 같이 우리가 스타일을 지정할 HTML 요소를 선택해야 합니다. 이 역할을 하는 것이 바로 셀렉터입니다.
