CSS가 하는 일

CSS 파일 하나로 사이트의 모든 페이지 모양을 한꺼번에 바꿀 수 있습니다. 1996년 12월 W3C가 CSS 레벨 1을 발표할 때 내세운 가장 큰 장점도 이것이었습니다.

구조는 HTML, 모양은 CSS

HTML은 페이지의 각 부분이 무엇인지 말합니다. 제목인지, 목록인지, 입력 양식인지요. Cascading Style Sheets의 줄임말인 CSS는 그 부분들이 어떻게 보여야 하는지 말합니다. 색, 글꼴, 크기, 간격, 화면 위 위치 같은 것입니다. 둘을 나눠 두면 실제로 편한 점이 많습니다. 스타일시트 하나만 고쳐 사이트 전체의 모양을 바꿀 수 있고, 같은 HTML을 휴대전화, 큰 모니터, 종이에서 각각 다르게 보여 줄 수 있으며, 읽는 사람이 글자를 크게 하는 식으로 자기 스타일을 적용해도 페이지가 망가지지 않습니다.

하콘 비움 리는 1994년 10월 CERN에서 CSS 작업을 시작했고, 1995년 베르트 보스가 합류했으며, W3C는 1996년 12월 17일 CSS 레벨 1을 권고안으로 발표했습니다. 1998년 5월에는 CSS 2가 나왔습니다. 그 뒤로 CSS는 색(Color), 선택자(Selectors), 플렉스박스, 그리드 같은 모듈로 나뉘었고, W3C CSS 작업 그룹이 모듈마다 따로 다듬고 있습니다. 하나로 묶인 CSS4는 없고, 작업 그룹이 어떤 모듈이 안정되었는지 정리한 스냅숏을 냅니다.

규칙의 모양

스타일시트는 규칙의 목록입니다. 규칙은 어떤 요소에 적용할지 정하는 선택자로 시작하고, 그 뒤에 중괄호로 감싼 선언 블록이 옵니다. 블록 안의 선언 하나는 속성, 쌍점, 값, 세미콜론으로 이루어집니다. 위 규칙에서 h1은 모든 1단계 제목을 고르고, 두 선언은 그 제목을 파란색, 32픽셀 크기로 만듭니다. 규칙 안의 빈칸과 줄바꿈은 상관없으므로 보통 읽기 쉽게 선언을 한 줄에 하나씩 씁니다.

브라우저는 철자가 틀린 속성이나 말이 안 되는 값처럼 이해하지 못하는 선언을 만나면 그 선언 하나만 건너뛰고 다음으로 넘어갑니다. 일부러 이렇게 만든 것으로, 새 CSS 기능을 더해도 옛 브라우저가 망가지지 않게 하려는 것입니다. 대신 세미콜론 하나만 빠져도 뒤따르는 선언까지 소리 없이 사라질 수 있습니다. 두 선언이 붙어 잘못된 선언 하나가 되기 때문입니다. 스타일이 적용되지 않으면 먼저 문장 부호를 확인하세요. 주석은 /* 이렇게 */ 씁니다.

CSS를 넣는 세 가지 방법

<!-- 1. External stylesheet: one file for the whole site -->
<link rel="stylesheet" href="styles.css">

<!-- 2. Internal stylesheet: rules for this page only -->
<style>
  p { line-height: 1.5; }
</style>

<!-- 3. Inline style: one element only -->
<p style="color: green;">Fresh today</p>

실제 사이트에서는 <head>에서 <link rel="stylesheet">로 연결하는 외부 스타일시트를 주로 씁니다. 모든 페이지가 함께 쓰고, 브라우저가 한 번 내려받아 캐시에 보관합니다. <style> 요소에는 한 페이지만을 위한 규칙을 넣으며, 이 과정의 실습도 이 방법을 씁니다. style 속성은 요소 하나에만 선언을 적용합니다. 빨리 시험해 볼 때는 편하지만, 같은 모양을 요소마다 되풀이해야 하므로 관리하기 어렵습니다.

브라우저에도 기본 스타일이 있습니다

CSS가 하나도 없는 페이지에도 모양은 있습니다. 제목은 크고 굵고, 링크는 파랗고 밑줄이 있으며, 목록은 들여 씁니다. 이것은 사용자 에이전트 스타일시트라고 부르는 브라우저 기본 스타일시트에서 옵니다. 내가 쓴 규칙은 그 위에 덧붙습니다. HTML 과정의 빵집 페이지가 CSS 없이도 읽을 만했던 이유이고, 좋은 스타일시트가 필요한 것만 바꾸는 이유이기도 합니다.