V VibeCoding 365
사전 목록 frontend

VIBECODING 365 / DICTIONARY

CSS

Cascading Style Sheets

기초 난이도: 기초태그: CSS · 스타일 · 웹기초

DEFINITION

CSS가 담당하는 층

Cascading Style Sheets(CSS)는 HTML이나 XML(SVG·MathML·XHTML 등)로 쓴 문서의 표현(presentation)을 기술하는 스타일시트 언어다. 화면·종이·음성 등 매체에서 요소가 어떻게 렌더링될지 정한다. MDN은 CSS를 오픈 웹의 핵심 언어 중 하나로, W3C 명세에 따라 브라우저들이 표준화한다고 설명한다. HTML이 내용·구조를 담는다면 CSS는 그 문서를 사용자에게 보이게 하는 층이다. 색·글꼴·간격뿐 아니라 그리드·다단 레이아웃, 애니메이션 같은 효과도 CSS로 제어한다.

규칙·선택자·선언

CSS는 규칙 기반이다. 선택자로 대상 요소를 고르고, 중괄호 안의 선언(속성: 값)으로 스타일을 지정한다. 예: h1 { color: red; font-size: 2.5em; }. 선택자 다음에 선언 블록이 오고, 콜론 앞이 속성·뒤가 값이다. 스타일시트는 이런 규칙이 이어진 문서다. 속성별 허용 값은 다르며, MDN CSS 참고에서 속성 페이지를 찾아 확인한다. Backgrounds and Borders처럼 관련 기능은 모듈로 묶여 있다.

브라우저 기본 스타일과 적용 과정

명시 스타일이 없어도 브라우저는 기본 CSS로 제목을 크게, 링크에 밑줄을 두는 식으로 읽기 쉽게 만든다. 이는 HTML 자체가 아니라 브라우저 기본 스타일시트다. 페이지를 열면 브라우저는 HTML을 DOM으로 만든 뒤, 문서에 삽입되거나 외부 .css로 참조된 규칙을 선택자별로 모아 DOM에 적용해 렌더 트리를 만들고 화면에 그린다. 새 문단을 추가하면 같은 p 규칙이 자동으로 적용되는 식으로 동작한다.

「CSS3」가 아니라 모듈

예전에는 CSS1·CSS2.1·CSS3처럼 버전을 묶었지만, MDN은 앞으로 CSS3·CSS4 같은 단일 버전은 없고 전부 「CSS」이며, Color Module Level 5처럼 모듈별 레벨이 진행된다고 한다. CSS 2.1 이후 모듈별 진행 속도가 달라져 W3C는 명세 전체를 한 버전으로 올리지 않고, 안정 상태의 스냅샷을 주기적으로 찍는다. 바이브코딩에서 「CSS로 꾸민다」는 말은 이 규칙 언어로 문서 표현을 제어한다는 뜻이다.

ENGLISH

Cascading Style Sheets

EXAMPLE

h1 { color: red; font-size: 2.5em; }처럼 선택자로 제목을 고르고, 속성·값 선언으로 색과 크기를 지정해 브라우저가 DOM에 적용한다.

REFERENCE

developer.mozilla.org/en-US/docs/Web/CSS