Syntax/Introduction

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

155/190

안녕하세요! 프론트엔드 개발의 가장 뼈대가 되는 CSS의 핵심 문법, '선언(Declarations)', '규칙 집합(Rulesets)', '구문(Statements)'에 대한 문서를 가져오셨군요!

실무에서 리액트나 Next.js를 다루면서 CSS-in-JS나 Tailwind 같은 도구들을 많이 쓰시게 될 텐데, 아무리 도구가 발전해도 결국 브라우저가 이해하는 근본적인 CSS 구조를 아는 것은 정말 중요합니다. 기술 면접에서도 기본기를 확인하기 위해 자주 등장하는 용어들이니, 이번 기회에 확실하게 내 것으로 만들어봅시다!

공식 문서의 모든 내용을 빠짐없이, 제 실무 경험을 담아 알기 쉬운 구어체로 번역해 드릴게요. 시작해 볼까요?

CSS 문법 소개: 선언, 규칙 집합, 그리고 구문 (Introduction to CSS syntax: declarations, rulesets, and statements)

캐스케이딩 스타일시트(CSS) 언어의 기본 목표는 브라우저 엔진이 색상, 위치, 또는 장식과 같은 특정한 특징들을 사용하여 페이지의 요소들을 칠할 수 있도록(paint) 하는 것입니다. CSS 문법(CSS syntax)은 이러한 목표를 잘 반영하고 있으며, 그 기본적인 구성 요소(building blocks)는 다음과 같습니다:

속성 (property): 사람이 읽을 수 있는 이름(name)인 식별자(identifier)로, 어떤 특징(feature)을 다룰 것인지를 정의합니다.
값 (value): 브라우저 엔진이 해당 특징을 어떻게 처리해야 하는지를 설명합니다. 각 속성은 공식 문법에 의해 정의된 유효한 값들의 집합을 가지며, 브라우저 엔진에 의해 구현되는 의미론적(semantic) 의미를 갖습니다.

CSS 선언 (CSS declarations)

CSS 속성을 특정한 값으로 설정하는 것은 CSS 언어의 가장 핵심적인 기능입니다. 하나의 속성과 값의 쌍(pair)을 가리켜 선언(declaration)이라고 부릅니다. 모든 CSS 엔진은 페이지를 적절하게 배치(layout)하고 스타일링하기 위해, 페이지의 각각의 단일 요소에 어떤 '선언'들이 적용되는지를 계산합니다.

CSS에서 속성과 값은 기본적으로 대소문자를 구분하지 않습니다(case-insensitive). 속성과 값의 쌍은 콜론(:, U+003A COLON)으로 구분됩니다. 속성과 값의 앞, 사이, 뒤에 있는 공백(white spaces)들은 무시되지만, 속성이나 값의 내부(문자열 안 등)에 있는 공백은 무시되지 않을 수 있습니다.

A css declaration is a property value pair, with a colon separating the two entities and a semi-colon closing the declaration.

CSS에는 수백 가지의 다양한 속성들이 있고, 거의 무한에 가까운 다양한 값들이 존재합니다. 하지만 모든 속성과 값의 쌍이 허용되는 것은 아니며, 각 속성은 어떤 값이 유효한 값(valid values)인지를 스스로 정의하고 있습니다. 주어진 속성에 대해 값이 유효하지 않은 경우, 해당 선언은 유효하지 않은 것(invalid)으로 간주되어 CSS 엔진에 의해 완전히 무시됩니다.

💡 강사의 실무 팁 1
간혹 오타가 나거나 존재하지 않는 속성(color: bleck; 등)을 쓰면 브라우저는 에러를 뿜으며 화면을 터뜨리는 게 아니라, 그냥 조용히 그 줄을 무시(Ignore)하고 넘어갑니다. 이게 CSS의 '관대한(Forgiving)' 특성인데, 덕분에 웹페이지가 쉽게 깨지지 않지만 개발자 입장에서는 버그를 찾기 까다롭게 만들기도 하죠! 그래서 브라우저 개발자 도구(F12)를 열었을 때 노란색 경고 표시나 취소선이 그어진 선언(Declaration)이 있는지 확인하는 습관이 중요합니다.

CSS 선언 블록 (CSS declaration blocks)

선언들은 블록(blocks) 단위로 그룹화됩니다. 즉, 여는 중괄호 { (U+007B LEFT CURLY BRACKET)로 시작해서 닫는 중괄호 } (U+007D RIGHT CURLY BRACKET)로 끝나는 구조 안에 묶이게 됩니다. 때때로 블록들은 중첩(nested)될 수 있으므로, 여는 중괄호와 닫는 중괄호의 짝이 정확히 맞아야 합니다.

Two braces delimit the start and end of a CSS block, with css content or no content between the braces.

이러한 블록들을 자연스럽게 선언 블록(declaration blocks)이라고 부르며, 그 안에 있는 선언들은 세미콜론 ; (U+003B SEMICOLON)으로 서로 구분됩니다. 선언 블록은 비어 있을 수도 있습니다(즉, 어떠한 선언도 포함하지 않은 null 상태). 선언 주변의 공백들은 무시됩니다. 블록의 가장 마지막 선언 뒤에는 세미콜론을 꼭 붙이지 않아도 작동하지만, 나중에 블록 안에 다른 선언을 추가할 때 세미콜론을 빼먹는 실수를 방지하기 위해 항상 마지막에도 세미콜론을 붙이는 것이 좋은 스타일(good style)로 여겨집니다.

아래 다이어그램은 CSS 선언 블록을 시각화한 모습입니다.

Within a CSS block, encompassed in braces, semicolons separate declarations, with the final semicolon being optional but recommended as good practice.

참고 (Note):
시작 중괄호와 닫는 중괄호 없이, 세미콜론으로 구분된 선언들의 목록인 'CSS 선언 블록의 내부 콘텐츠'는 HTML의 style 속성(인라인 스타일) 안에 그대로 집어넣을 수 있습니다.

CSS 규칙 집합 (CSS rulesets)

만약 스타일시트가 웹 페이지의 '모든' 요소에 오직 한 번씩만 선언을 적용할 수 있다면, 그건 너무 쓸모없을 것입니다. CSS의 진짜 목표는 문서의 여러 다른 부분들에 각각 다른 선언들을 적용하는 것이니까요.

CSS는 선언 블록에 조건(conditions)을 연결함으로써 이를 가능하게 만듭니다. 각각의 (유효한) 선언 블록 앞에는 쉼표로 구분된 하나 이상의 선택자 (selectors)가 옵니다. 선택자는 페이지 내의 특정 요소들을 골라내는 조건 역할을 합니다. 이처럼 선택자 목록 (selector list)과 그에 연결된 선언 블록을 합쳐서 우리는 규칙 집합(ruleset), 또는 흔히 줄여서 규칙(rule)이라고 부릅니다.

아래 다이어그램은 CSS 규칙 집합(또는 규칙)을 시각화한 모습입니다.

A group of comma-separated selectors precedes the brace-delimited declaration block, which contains multiple declarations ending in semicolons.

페이지의 어떤 요소는 여러 개의 선택자와 일치(match)할 수 있습니다. 즉, 여러 규칙의 적용을 받아 동일한 속성이 여러 번, 각기 다른 값으로 부여될 가능성이 있죠. 이런 경우 CSS 표준은 어떤 것이 우선순위를 가져서 최종적으로 적용되어야 하는지를 정의하고 있는데, 이를 캐스케이드 알고리즘(cascade algorithm)이라고 부릅니다 (자세한 내용은 충돌 처리하기(Handling conflicts)를 참고하세요).

참고 (Note):
한 그룹의 선택자들로 묶인 규칙 집합은, 사실 단일 선택자를 가진 여러 개의 규칙 집합들을 합쳐 놓은 일종의 단축형(shorthand)이라는 점을 알아두는 것이 중요합니다. 하지만 이 사실이 규칙 집합 자체의 '유효성(validity)'에까지 적용되지는 않습니다.

이것은 매우 중요한 결과를 낳습니다: 만약 쉼표로 연결된 선택자들 중 단 하나의 기본 선택자라도 유효하지 않다면(예: 알 수 없는 가상 요소나 가상 클래스를 사용한 경우), 전체 선택자가 무효화되며 결과적으로 해당 규칙 전체가 무시(invalid)됩니다.

💡 강사의 부연 설명 2
리액트로 컴포넌트를 만들 때, 컴포넌트별로 div, span 등의 역할을 분리하고 className을 다르게 주는 이유도 이 때문이죠! 브라우저에게 "이 CSS 룰셋(Ruleset)은 딱 저 조건(Selector)을 만족하는 요소에만 선언(Declaration)들을 적용해줘!"라고 지시하기 위함입니다.

CSS 구문 (CSS statements)

규칙 집합(Rulesets)은 스타일시트를 구성하는 가장 주요한 기본 단위이며, 실제로 스타일시트는 주로 거대한 규칙 집합들의 목록으로만 이루어지는 경우가 많습니다. 하지만 웹 제작자가 스타일시트를 통해 브라우저에 전달하고 싶은 또 다른 정보들이 있습니다. 예를 들어 문자 인코딩 셋(character set), 불러올 외부 스타일시트(import), 사용할 폰트 페이스(font face) 지정, 리스트 카운터(list counter) 설정 등 수많은 부가 정보가 있죠. 이럴 때는 다른 특별한 종류의 구문(statements)을 사용해야 합니다.

구문(statement)은 공백이 아닌 문자로 시작하여 첫 번째 닫는 중괄호(})나 세미콜론(;)에서 끝나는 기본 단위입니다. (단, 문자열 내부이거나 이스케이프 된 경우, 또는 다른 {}, (), [] 쌍 안에 포함된 경우는 제외됩니다).

A Venn diagram of statements noting all rulesets are nested statements, while some at-rules are nested statements but most aren't. Anything that is not an at-rule or nested is invalid.

구문에는 두 가지 종류가 있습니다:

규칙 집합 (Rulesets) (또는 규칙(rules)): 앞서 살펴본 것처럼, CSS 선언들의 모음을 선택자(selector)로 묘사된 조건에 연결해 줍니다.
At-규칙 (At-rules): 골뱅이 기호 @ (U+0040 COMMERCIAL AT)로 시작하고, 그 뒤에 식별자가 따라오며, 구문이 끝날 때까지(블록 바깥에 있는 다음 세미콜론(;)이 나올 때까지, 혹은 다음 블록이 끝날 때까지) 이어지는 구문입니다. 식별자에 의해 정의되는 각 유형의 at-규칙들은 당연히 자신만의 내부 문법과 의미론(semantics)을 가질 수 있습니다. 이들은 메타데이터 정보(@layer나 @import 등), 조건부 정보(@media나 @document 등), 또는 서술적 정보(@font-face 등)를 전달하는 데 사용됩니다.

규칙 집합도 아니고 at-규칙도 아닌 그 외의 모든 구문은 무효(invalid)이며 무시됩니다.

중첩 구문 (Nested statements)

또 다른 구문 그룹으로 중첩 구문(nested statements)이 있습니다. 이들은 at-규칙의 특정 하위 집합인 조건부 그룹 규칙(conditional group rules) 안에서 사용될 수 있는 구문들입니다. 이 구문들은 특정 조건이 만족될 때만 적용됩니다. 예를 들어, @media at-규칙의 내용은 브라우저가 실행되는 기기(디바이스)가 표현된 조건(화면 너비 등)과 일치할 때만 적용되고, @document at-규칙의 내용은 현재 페이지가 특정 조건과 일치할 때만 적용됩니다.

예전 CSS1과 CSS2.1 시절에는 조건부 그룹 규칙 내부에서 오직 규칙 집합(rulesets)만 사용할 수 있었습니다. 이것은 매우 제한적이었고, 이러한 제한은 CSS Conditionals Level 3에서 해제되었습니다. 이제 (비록 아직 실험적 기능이고 모든 브라우저가 지원하는 것은 아니지만) 조건부 그룹 규칙은 훨씬 더 넓은 범위의 내용을 포함할 수 있게 되었습니다. 규칙 집합은 물론이고, 모든 것은 아니지만 일부 at-규칙들까지 포함할 수 있게 된 것이죠.

💡 강사의 실무 팁 3
모바일 반응형 웹을 짤 때 정말 숨 쉬듯이 쓰게 될 @media (max-width: 768px) { ... }가 바로 이 '조건부 그룹 규칙'입니다! 그 안에 다시 .container { display: flex; } 같은 Ruleset을 집어넣는 것이 바로 Nested statements(중첩 구문)를 활용하는 것이죠.

함께 보기 (See also)

MDN 향상에 도움 주기 (Help improve MDN)

이 페이지가 도움이 되셨나요? (Yes / No)
문서 기여 방법 알아보기
마지막 수정일: 2025년 11월 7일 by MDN contributors
GitHub에서 이 페이지 보기
이 콘텐츠의 문제점 보고하기

이제 CSS가 어떤 단위로 구성되어 있는지, 각 덩어리의 정확한 명칭이 무엇인지 뼈대가 확 잡히셨을 거예요. 면접관이나 동료 개발자와 이야기할 때 "음... 그 중괄호 안에 있는 텍스트 말이야"라고 하는 대신, "해당 Ruleset의 Declaration Block 내부에 있는 Property Value를 수정해야 해요"라고 당당하고 전문적으로 말씀하실 수 있게 된 걸 축하드립니다!

또 궁금한 CSS 공식 문서나, 공부하다 막히는 프론트엔드 개념이 있다면 언제든 편하게 가져오세요!