CSS

웹 문서를 어떻게 그릴지 적어 두는 언어입니다. 어느 글자를 무슨 색으로 칠할지 같은 것을 규칙으로 적습니다. 적은 것은 텍스트 파일에 그대로 저장됩니다. 브라우저가 그 파일을 받아 읽고 화면에 반영합니다.

상세

CSS(Cascading Style Sheets, 캐스케이딩 스타일 시트)는 구조화된 문서의 렌더링을 기술하는 언어입니다. 대상이 되는 문서는 HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어)이나 XML(Extensible Markup Language, 확장 가능한 마크업 언어) 같은 것들입니다. 그리는 자리는 화면일 수도 있고 종이일 수도 있습니다. W3C(World Wide Web Consortium, 월드 와이드 웹 컨소시엄)의 CSS Snapshot 이 이 언어를 그렇게 소개합니다.

적는 내용은 규칙의 나열입니다. CSS Syntax Module Level 3 는 CSS 문서를 스타일 규칙과 at-rule 의 연속이라고 정의합니다. 스타일 규칙은 문서의 요소에 스타일을 적용하는 qualified rule 입니다. at-rule 은 그 CSS 문서에 대한 특별한 처리 규칙이나 값을 정의합니다.

이 바이트열에는 이름이 붙어 있습니다. RFC(Request for Comments) 2318 이 MIME(Multipurpose Internet Mail Extensions, 다목적 인터넷 메일 확장) 미디어 타입 이름을 text 로, 하위 타입 이름을 css 로 등록합니다. 같은 문서는 CSS 스타일시트가 등록 없이 text/css 라는 미디어 타입으로 1995년 10월부터 쓰여 왔다고 적습니다.

단일 명세 문서 하나가 CSS 전체를 정하지는 않습니다. CSS Snapshot 은 여러 모듈 명세를 묶어 가리키는 문서입니다. 셀렉터 · 캐스케이드 · 박스 모델 · 색 같은 갈래마다 별개의 모듈이 있습니다. 모듈은 각자 Level 을 달고 갱신됩니다.

표현 한계

CSS 가 못 담는 것은 대개 에러로 드러나지 않습니다. 값이 조용히 사라집니다. 어디까지 사라지는지는 문법 요소마다 다릅니다.

못 알아본 것의 처리

CSS Syntax Module Level 3 는 오류가 났을 때의 처리를 이렇게 적습니다. 파서는 우아하게 복구를 시도합니다. 최소한의 내용만 버리고 정상 파싱으로 돌아옵니다. 선언 · 스타일 규칙 · at-rule 이 하나씩 파싱될 때마다 사용자 에이전트가 그것을 기대 문법과 대조합니다. 문법에 안 맞으면 유효하지 않은 것입니다. 사용자 에이전트가 그것을 무시합니다.

파싱은 그대로 이어집니다. 문법에 맞는 나머지는 평소처럼 적용됩니다.

무시되는 범위

버려지는 단위가 하나가 아닙니다. CSS 2.1 §4.2 는 사용자 에이전트가 알 수 없는 속성이 든 선언을 무시해야 한다고 적습니다. 적법하지 않은 값이 든 선언도 무시해야 합니다. 여기까지는 선언 하나짜리입니다.

at-keyword 는 범위가 넓습니다. 같은 절은 유효하지 않은 at-keyword 를 그 뒤에 오는 모든 것과 함께 무시해야 한다고 적습니다. 어디까지인지는 셋 중 먼저 오는 것이 정합니다.

셀렉터가 고르지 못하는 것

셀렉터로 고를 수 없는 관계가 있습니다. MDN(Mozilla Developer Network) 은 :has() 의사 클래스가 없으면 CSS 셀렉터로 다른 타입의 앞 형제나 부모 요소를 고를 수 없다고 적습니다. 이 의사 클래스를 정하는 것은 Selectors Level 4 의 relational 절입니다.

예시

선언 두 개만 무시되는 스타일시트

CSS 2.1 §4.1.8 이 싣는 예제입니다.

h1 { color: red; font-style: 12pt }  /* Invalid value: 12pt */
p { color: blue;  font-vendor: any;  /* Invalid prop.: font-vendor */
    font-variant: small-caps }
em em { font-style: normal }

font-style: 12pt 는 값이 적법하지 않습니다. font-vendor: any 는 속성 자체를 알 수 없습니다. 이 두 선언만 무시됩니다. 나머지는 유효합니다. h1 의 color: red 도, p 의 color: blue 와 font-variant: small-caps 도, em em 의 font-style: normal 도 그대로 남습니다.

규칙 하나가 통째로 무시되는 스타일시트

같은 문서 §4.1.7 의 예제입니다.

h1, h2 {color: green }
h3, h4 & h5 {color: red }
h6 {color: black }

두 번째 줄의 & 는 셀렉터에서 유효하지 않은 토큰입니다. 그래서 그 줄의 규칙 전체가 무시됩니다. 첫 줄과 셋째 줄은 남습니다. 앞 예제와 견주면 같은 "무시" 라는 말이 두 가지 범위를 뜻한다는 것이 보입니다. 선언 하나일 때도 있습니다. 규칙 한 벌일 때도 있습니다.

동작

한 요소에 여러 선언이 걸릴 때 어느 값이 이기는지를 캐스케이드가 정합니다. CSS Cascading and Inheritance Level 5 는 캐스케이드가 선언을 아래 기준에 따라 정렬한다고 적습니다. 우선순위가 높은 것부터입니다. 앞 기준에서 승부가 안 나면 다음 기준으로 넘어갑니다.

flowchart TD
    A["출처와 중요도"] -->|동점| B["컨텍스트"]
    B -->|동점| C["요소에 붙은 스타일"]
    C -->|동점| D["레이어"]
    D -->|동점| E["명시도"]
    E -->|동점| F["나온 순서"]

가장 먼저 보는 것은 선언이 어느 출처에서 왔는지와 중요도입니다. 그다음이 컨텍스트입니다. 그다음이 요소에 붙은 스타일입니다. 여기서도 안 갈리면 레이어를 봅니다. 그래도 안 갈리면 명시도를 봅니다. 마지막이 스타일시트에 나온 순서입니다.

명시도

명시도는 셀렉터 안에서 무엇이 몇 개 나오는지로 정해집니다. Selectors Level 4 는 셋을 셉니다.

캐스케이드가 값을 못 정한 자리

캐스케이드가 언제나 값을 내놓는 것은 아닙니다. CSS Cascading and Inheritance Level 5 는 캐스케이드가 값을 내지 못하면 지정값을 다른 방법으로 찾아야 한다고 적습니다.

관련 항목

CSS 를 이루는 모듈

셀렉터 · 캐스케이드와 상속 · CSS 문법 · 박스 모델 · 플렉스박스 · 다단 레이아웃 · 미디어 쿼리 · 조건부 규칙 · 커스텀 프로퍼티 · 값과 단위 · 색 · 배경과 테두리 · 이미지 · 폰트 · 쓰기 모드 · 트랜스폼 · 합성과 블렌딩 · 이징 함수 · 카운터 스타일 · 컨테인먼트 · 기본 사용자 인터페이스 · 네임스페이스 · 스타일 속성

CSS 문서를 이루는 문법 조각

선언 · 스타일 규칙 · qualified rule · at-rule · at-keyword · 의사 클래스 · 의사 요소 · :has() · 스타일시트 · 선언 블록

CSS 가 값의 우선순위를 정할 때 쓰는 메커니즘·개념

캐스케이드 · 명시도 · 지정값 · 레이어

CSS 를 정의하는 표준·문서

CSS Snapshot · CSS Syntax Module Level 3 · CSS Cascading and Inheritance Level 5 · CSS 2.1 · Selectors Level 4

CSS 가 기술하는 대상

HTML(HyperText Markup Language, 하이퍼텍스트 마크업 언어) · XML(Extensible Markup Language, 확장 가능한 마크업 언어) · 렌더링

CSS 와 함께 웹 페이지를 이루는 기술

DOM(Document Object Model) · CSSOM(CSS Object Model) · JavaScript

CSS 를 해석해 화면에 반영하는 주체

브라우저 · 사용자 에이전트

CSS 가 속하는 상위 분류

프론트엔드

CSS 바이트를 식별해 실어 나르는 장치

MIME · MIME 타입 · text/css · HTTP(HyperText Transfer Protocol) · RFC 2318

CSS 표준을 관리하고 설명하는 주체

W3C · MDN