CSS는 브라우저가 해석한 후 문서 내 해당 요소에 적용하는 스타일 규칙(style rule)들의 집합입니다. 즉, 우리가 작성한 스타일 규칙을 브라우저가 읽어 들여 화면에 표시되는 각 HTML 요소의 모양을 결정하는 방식입니다. 하나의 스타일 규칙은 크게 세 가지 요소로 구성됩니다.
스타일 규칙의 3가지 핵심 구성 요소
1. 선택자(Selector)
선택자는 스타일이 적용될 대상이 되는 HTML 태그를 의미합니다. <h1>, <table>, <p> 등 문서 내 어떤 태그든 선택자로 사용할 수 있습니다.
2. 속성(Property)
속성은 HTML 태그가 가질 수 있는 특성의 한 종류입니다. 쉽게 말해 HTML의 모든 속성(attribute)은 CSS 속성(property)으로 변환된다고 생각하면 됩니다. 대표적인 예로 color(글자 색), border(테두리) 등이 있습니다.
3. 값(Value)
값은 각 속성에 할당되는 실제 설정값입니다. 예를 들어 color 속성에는 red나 #F1F1F1 같은 색상 값을 지정할 수 있습니다.
CSS 스타일 규칙의 기본 문법
CSS 스타일 규칙은 다음과 같은 형식으로 작성합니다.
selector { property: value }
실제 적용 예시를 살펴보면 더욱 명확하게 이해할 수 있습니다.
h1 { color: red; }
위 예제에서 h1은 선택자, color는 속성, red는 값에 해당합니다. 이 규칙을 해석하면 "문서 내 모든 h1 요소의 글자 색을 빨간색으로 지정한다"는 의미가 됩니다. 이처럼 선택자로 대상을 정하고, 속성과 값의 쌍(property-value pair)으로 원하는 스타일을 선언하는 것이 CSS의 가장 기본적인 동작 원리입니다.