Values and units/Value definition syntax

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

164/190

안녕하세요! 프론트엔드 강사입니다.

우리가 MDN이나 W3C 같은 공식 문서를 보다 보면 &&, ||, [ ], ? 같은 기호들이 잔뜩 섞여 있는 외계어(?)를 종종 만나게 됩니다. 바로 CSS 값 정의 구문(Value definition syntax)이죠!

"그냥 display: flex;처럼 예시만 보여주면 안 되나?" 싶으실 수도 있지만, 이 공식 문법을 읽을 줄 알게 되면 새로운 CSS 속성이 나왔을 때 블로그 글을 찾아다닐 필요 없이 공식 문서만 보고도 "아! 이 속성에는 어떤 값들을 어떤 순서로 넣어야 하는구나!" 하고 단번에 이해할 수 있게 됩니다.

프론트엔드 전문가로 가는 필수 관문, 저와 함께 아주 쉽고 재밌게 해독해 볼까요?

값 정의 구문 (Value definition syntax)

CSS 값 정의 구문(CSS value definition syntax)은 형식 문법(formal grammar)으로서, 특정 CSS 속성(property)이나 함수에 들어갈 수 있는 유효한 값들의 집합을 정의하는 데 사용됩니다. 이 구문 외에도 의미론적인 제약(semantic constraints, 예를 들어 숫자는 반드시 양수여야 한다 등)에 의해 유효한 값이 더 좁혀질 수도 있습니다.

이 정의 구문은 어떤 값들이 허용되는지, 그리고 그 값들 사이에 어떤 상호작용(순서, 필수 여부 등)이 있는지를 정확하게 설명해 줍니다. 구문을 구성하는 각 구성요소(component)는 키워드(keyword)일 수도 있고, 리터럴(literal)로 간주되는 기호일 수도 있으며, 주어진 CSS 데이터 타입(<color>, <length> 등)이나 다른 CSS 속성의 값일 수도 있습니다.

구성요소 값 유형 (Component value types)

키워드 (Keywords)

일반 키워드 (Generic keywords)

미리 정의된 의미를 가진 키워드는 따옴표 없이 문자 그대로 나타납니다.

예: auto, smaller, ease-in 등.

CSS 전역 키워드 (CSS-wide keywords)

모든 CSS 속성은 inherit, initial, revert, revert-layer, unset 이라는 키워드를 기본적으로 허용합니다. 이들은 모든 속성에 암묵적으로 정의되어 있기 때문에, 값 정의 구문 표에는 굳이 표시하지 않습니다.

리터럴 (Literals)

CSS에서는 슬래시(/)나 쉼표(,) 같은 몇몇 기호들이 단독으로 나타날 수 있으며, 이는 속성 정의에서 각 부분을 구분하는 데 사용됩니다.

쉼표(,): 주로 나열된 값들이나 수학 함수 안의 매개변수들을 구분할 때 쓰입니다.
슬래시(/): 의미는 다르지만 구문이 같은 값의 부분들을 구분할 때 쓰입니다. (예: font: 12px / 1.5 에서 font-size와 line-height를 구분)

이 두 기호는 값 정의 구문에서 기호 그대로(literally) 나타납니다. 따라서 이 기호가 보이면 코드를 작성할 때도 똑같이 그 기호를 타이핑해야 한다는 뜻입니다.

데이터 타입 (Data types)

기본 데이터 타입 (Basic data types)

CSS 전반에 걸쳐 널리 사용되는 데이터 타입들입니다. 명세서에 단 한 번 정의되어 있으며, 이름 양쪽에 꺾쇠괄호 < 와 > 가 붙어 있습니다.

예: <angle>, <string>, <length>, <color> 등.

비단말 데이터 타입 (Non-terminal data types)

흔하지 않은 데이터 타입들도 < 와 > 로 둘러싸여 표시됩니다. 여기에는 두 가지 종류가 있습니다:

속성과 이름이 같은 데이터 타입 (따옴표로 묶임): 예컨대 <'border-width'> 라고 되어 있다면, 이것은 border-width 속성에 쓸 수 있는 모든 유효한 값들을 의미합니다. 주로 축약형 속성(shorthand properties)을 정의할 때 많이 보입니다.
속성과 이름이 다른 데이터 타입: 기본 데이터 타입과 매우 유사하지만, 정의가 해당 속성 근처에 따로 명시되어 있다는 점만 다릅니다.

구성요소 값 결합자 (Component value combinators)

결합자들은 여러 키워드나 데이터 타입들을 어떤 조건으로 엮을 것인지를 결정합니다. 이 기호들을 잘 알아두면 순서를 맘대로 써도 되는지, 반드시 1개만 골라야 하는지 등을 알 수 있습니다.

대괄호 (Brackets) `[ ]`

대괄호는 여러 요소, 결합자, 승수들을 하나로 묶어서 단일 구성요소처럼 변환할 때 씁니다. 수학에서 먼저 계산하라고 괄호를 치는 것과 같이 우선순위 규칙을 우회하여 그룹화할 때 사용합니다.

/* 정의 구문 */
example = bold [ thin && <length> ]

일치함: bold thin 2vh, bold 0 thin (대괄호 안의 요소들은 &&로 묶여서 순서가 바뀌어도 되지만, bold는 무조건 맨 앞에 와야 함)
일치하지 않음: thin bold 3em (bold가 병렬 배치되어 있으므로 무조건 대괄호 그룹보다 먼저 나와야 함)

병렬 배치 (Juxtaposition) `공백`

여러 키워드나 데이터 타입을 쉼표 없이 스페이스(공백)로만 나란히 배치하는 것을 병렬 배치라고 합니다.
병렬로 배치된 모든 구성요소는 반드시 포함되어야 하며(mandatory), 적혀있는 정확한 순서대로(exact order) 작성해야 합니다.

/* 정의 구문 */
example = bold <length> , thin

일치함: bold 1em, thin, bold 0, thin
일치하지 않음: thin 1em, bold (순서 틀림), bold 1em thin (리터럴인 쉼표 , 가 빠짐)

이중 앰퍼샌드 (Double ampersand) `&&`

두 개 이상의 구성요소가 &&로 구분되어 있다면, 모든 요소가 반드시 포함되어야 하지만 순서는 마음대로 섞어도 된다는 뜻입니다.

/* 정의 구문 */
example = bold && <length>

일치함: bold 1em, 2.5cm bold
일치하지 않음: bold (<length>가 빠짐), bold 1em bold (각 요소는 최대 한 번만 나와야 함)

참고: 병렬 배치는 &&보다 우선순위가 높습니다. 즉 bold thin && <length>는 [ bold thin ] && <length>와 같습니다.

이중 수직선 (Double bar) `||`

두 개 이상의 구성요소가 ||로 구분되어 있다면, 그중 최소한 하나 이상은 반드시 포함되어야 하며, 여러 개를 고를 경우 순서는 마음대로 섞어도 된다는 뜻입니다. 주로 border, background 같은 축약형 속성을 정의할 때 많이 씁니다.

/* 정의 구문 */
example = <number> || <length> || <color>

일치함: 1em 1 blue, blue 1em, 1 1px yellow, blue (하나만 써도 됨)
일치하지 않음: blue yellow (같은 타입의 컴포넌트가 두 번 나오면 안 됨)

단일 수직선 (Single bar) `|`

두 개 이상의 요소가 |로 구분되어 있다면, 제시된 옵션 중에서 정확히 단 하나만 선택해야 한다는 뜻입니다. (OR 연산자라고 생각하시면 됩니다.)

/* 정의 구문 */
example = <percentage> | <length> | left | center | right | top | bottom

일치함: 3%, 0, left 등 (단 하나만 선택 가능)
일치하지 않음: center 3% (두 개를 선택했으므로 안 됨)

구성요소 값 승수 (Component value multipliers)

승수(Multiplier)는 앞에 있는 요소가 몇 번이나 반복될 수 있는지를 알려주는 기호입니다. 승수가 없다면 그 요소는 무조건 딱 한 번만 나타나야 합니다. 승수는 결합자보다 우선순위가 높습니다.

👨‍🏫 강사님의 꿀팁:
정규표현식(Regular Expression)을 공부해보신 분들이라면 아주 익숙한 기호들일 겁니다! 의미가 완전히 똑같거든요.

별표 (Asterisk) `*`

해당 요소가 0번, 1번, 또는 여러 번(무한대) 나타날 수 있음을 의미합니다. 즉, 아예 안 써도 되고 수십 개를 써도 됩니다.

구문: bold smaller*
일치함: bold, bold smaller, bold smaller smaller 등.

더하기 (Plus) `+`

해당 요소가 반드시 1번 이상 나타나야 함을 의미합니다. (최소 한 번은 써야 함)

구문: bold smaller+
일치함: bold smaller, bold smaller smaller 등.
일치하지 않음: bold (smaller가 최소 1번은 나와야 하므로 에러!)

물음표 (Question mark) `?`

해당 요소가 선택적(optional)이며, 0번 또는 1번만 나타날 수 있음을 의미합니다.

구문: bold smaller?
일치함: bold, bold smaller
일치하지 않음: bold smaller smaller (최대 1번만 써야 함)

중괄호 (Curly braces) `{A,B}`

해당 요소가 최소 A번 이상, 최대 B번 이하로 나타나야 함을 의미합니다.

구문: bold smaller{1,3}
일치함: bold smaller, bold smaller smaller, bold smaller smaller smaller
일치하지 않음: bold smaller smaller smaller smaller (4번 나왔으므로 에러!)

해시 마크 (Hash mark) `#`

+ 기호와 비슷하게 1번 이상 반복될 수 있지만, 반복될 때 반드시 쉼표(,)로 구분해서 적어야 한다는 뜻입니다. (예: font-family, background-image 속성에서 쉼표로 여러 개 나열할 때 씁니다.)

구문: bold smaller#
일치함: bold smaller, bold smaller, smaller
일치하지 않음: bold smaller smaller (쉼표가 빠졌으므로 에러!)

참고: 해시 마크 뒤에 중괄호를 붙여 횟수를 제한할 수도 있습니다. (예: smaller#{1,3})

느낌표 (Exclamation point) `!`

그룹([ ]) 뒤에 느낌표가 붙으면, 그 그룹 내의 아이템들이 모두 선택적(? 등)이더라도, 최소한 하나 이상의 값은 반드시 적어주어야 한다는 강력한 강제성을 띱니다.

구문: [ bold? smaller? ]!
일치함: bold, smaller, bold smaller
일치하지 않음: (아무것도 적지 않음) - 느낌표 때문에 둘 중 하나는 무조건 적어야 합니다!

대괄호 범위 표기법 (Bracketed range notation `[min,max]`)

어떤 데이터 타입은 특정 범위 내의 숫자 값만 허용합니다. 이때는 [최솟값, 최댓값] 형태로 표시합니다. 예를 들어 column-count 속성은 1 이상의 양수만 허용하므로 다음과 같이 표기됩니다.

/* 정의 구문 */
example = <integer [1,∞]>

무한대 기호(∞)나 음의 무한대(-∞)가 들어갈 수 있습니다. 이 기호들에는 단위를 붙이지 않습니다.
단위가 들어간 범위 표기도 가능합니다. 예: <angle [0,180deg]> (0도부터 180도 사이), <time [0s,10s]> (0초부터 10초 사이).

이 지정된 범위를 벗어나는 값을 작성하면 선언 전체가 유효하지 않은 것으로 간주되어 브라우저가 무시해 버립니다!

요약 (Summary)

지금까지 배운 기호들을 한눈에 보기 쉽게 표로 정리했습니다.

기호	이름	설명	예시
결합자
(공백)	병렬 배치	요소들이 필수적이며, 정해진 순서대로 나열해야 함	`solid <length>`
`&&`	이중 앰퍼샌드	요소들이 필수적이나, 순서는 상관없음	`<length> && <string>`
`		`	이중 수직선
`	`	단일 수직선	제시된 요소 중 정확히 하나만 골라야 함
`[ ]`	대괄호	요소들을 그룹화하여 우선순위를 제어함	`bold [ thin && <length> ]`
승수
(없음)	-	정확히 1번만	`solid`
`*`	별표	0번 이상 (안 써도 됨)	`bold smaller*`
`+`	더하기	1번 이상 (최소 1개 필수)	`bold smaller+`
`?`	물음표	0번 또는 1번 (선택적)	`bold smaller?`
`{min,max}`	중괄호	최소 min번 이상, 최대 max번 이하	`bold smaller{1,3}`
`#`	해시 마크	1번 이상, 단 반복될 때마다 쉼표(,)로 구분	`bold smaller#`
`!`	느낌표	그룹 내에서 최소 1개 이상의 값은 필수 산출	`[ bold? smaller? ]!`
범위
`[min,max]`	대괄호 범위	min과 max 사이의 숫자 범위를 지정	`<integer [0,∞]>`

MDN 개선에 도움을 주세요 (Help improve MDN)

이 페이지가 도움이 되었나요? (Was this page helpful to you?)

이 페이지는 MDN 기여자들에 의해 2025년 12월 16일에 마지막으로 수정되었습니다.

수고하셨습니다! 이제 MDN 문서에서 CSS 속성을 검색하실 때 이 기호들이 더 이상 외계어로 보이지 않으실 겁니다. "아하! 이 속성은 무조건 순서를 맞춰 써야 하네?", "오! 이건 콤마로 무한정 늘려 쓸 수 있구나!" 하고 찰떡같이 이해하는 전문가가 되신 것을 축하드립니다!

김동현

프론트에_가까운_풀스택_개발자

이전 포스트

Transitions/Using transitions

다음 포스트

Values and units/Value definition syntax

mdn 학습 번역 - CSS

값 정의 구문 (Value definition syntax)

이 문서의 목차

구성요소 값 유형 (Component value types)

키워드 (Keywords)

일반 키워드 (Generic keywords)

CSS 전역 키워드 (CSS-wide keywords)

리터럴 (Literals)

데이터 타입 (Data types)

기본 데이터 타입 (Basic data types)

비단말 데이터 타입 (Non-terminal data types)

구성요소 값 결합자 (Component value combinators)

대괄호 (Brackets) `[ ]`

병렬 배치 (Juxtaposition) `공백`

이중 앰퍼샌드 (Double ampersand) `&&`

이중 수직선 (Double bar) `||`

단일 수직선 (Single bar) `|`

구성요소 값 승수 (Component value multipliers)

별표 (Asterisk) `*`

더하기 (Plus) `+`

물음표 (Question mark) `?`

중괄호 (Curly braces) `{A,B}`

해시 마크 (Hash mark) `#`

느낌표 (Exclamation point) `!`

대괄호 범위 표기법 (Bracketed range notation `[min,max]`)

요약 (Summary)

MDN 개선에 도움을 주세요 (Help improve MDN)

Transitions/Using transitions

Values and units/Numeric data types

0개의 댓글

Values and units/Value definition syntax

mdn 학습 번역 - CSS

값 정의 구문 (Value definition syntax)

이 문서의 목차

구성요소 값 유형 (Component value types)

키워드 (Keywords)

일반 키워드 (Generic keywords)

CSS 전역 키워드 (CSS-wide keywords)

리터럴 (Literals)

데이터 타입 (Data types)

기본 데이터 타입 (Basic data types)

비단말 데이터 타입 (Non-terminal data types)

구성요소 값 결합자 (Component value combinators)

대괄호 (Brackets) [ ]

병렬 배치 (Juxtaposition) 공백

이중 앰퍼샌드 (Double ampersand) &&

이중 수직선 (Double bar) ||

단일 수직선 (Single bar) |

구성요소 값 승수 (Component value multipliers)

별표 (Asterisk) *

더하기 (Plus) +

물음표 (Question mark) ?

중괄호 (Curly braces) {A,B}

해시 마크 (Hash mark) #

느낌표 (Exclamation point) !

대괄호 범위 표기법 (Bracketed range notation [min,max])

요약 (Summary)

MDN 개선에 도움을 주세요 (Help improve MDN)

Transitions/Using transitions

Values and units/Numeric data types

0개의 댓글

대괄호 (Brackets) `[ ]`

병렬 배치 (Juxtaposition) `공백`

이중 앰퍼샌드 (Double ampersand) `&&`

이중 수직선 (Double bar) `||`

단일 수직선 (Single bar) `|`

별표 (Asterisk) `*`

더하기 (Plus) `+`

물음표 (Question mark) `?`

중괄호 (Curly braces) `{A,B}`

해시 마크 (Hash mark) `#`

느낌표 (Exclamation point) `!`

대괄호 범위 표기법 (Bracketed range notation `[min,max]`)