Values and units/Textual data types

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

166/190

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

우리가 CSS를 작성할 때 속성(property)에 값을 넣죠? color: red;, content: "Hello";, background-image: url('bg.png'); 처럼요. 이때 우리가 적어 넣는 글자들(red, "Hello", url)도 각자 정해진 데이터 타입(Data type)을 가지고 있습니다.

따옴표를 언제 써야 하는지, 언제 쓰면 안 되는지 헷갈리셨던 적 있으시죠? 오늘은 MDN 공식 문서를 통해 CSS의 '텍스트 데이터 타입(Textual data types)'에 대해 완벽하게 정리해 드리겠습니다. 이걸 알면 CSS 에러가 확 줄어들 거예요!

텍스트 데이터 타입 (Textual data types)

모든 CSS 선언(declaration)은 '속성(property)'과 '값(value)'의 쌍으로 이루어집니다. 이 값에는 속성이 무엇이냐에 따라 단일 키워드, 정수, 함수, 또는 여러 타입의 조합 등 다양한 데이터 타입이 들어갈 수 있습니다. 어떤 값은 px, em 같은 단위를 가지고, 어떤 값은 단위가 없습니다. 이 가이드에서는 여러 타입 중에서도 텍스트(text)로 이루어진 데이터 타입에 대해 살펴봅니다.

CSS의 텍스트 데이터 타입은 크게 세 가지로 나뉩니다:
1. <string> : 반드시 따옴표로 묶어야 하는 문자열입니다.
2. <ident> : 'CSS 식별자(Identifier)'라고 부르며, 따옴표 없이 쓰는 문자열입니다.
3. <url> : URL을 나타내며, 따옴표를 써도 되고 안 써도 됩니다.

<string>은 홑따옴표(')나 겹따옴표(")로 묶어야 합니다. 반면, CSS 명세서에서 <ident>나 <custom-ident>로 표기되는 식별자들은 절대로 따옴표로 묶으면 안 됩니다.

👨‍🏫 강사님의 핵심 꿀팁:
"따옴표를 써야 하나, 말아야 하나?"
이 고민을 해결하는 가장 쉬운 방법! 브라우저가 기본으로 제공하는 키워드(예: red, block, center)나 내가 직접 지은 이름(@keyframes 이름, grid-area 이름 등)은 따옴표를 안 씁니다. 반대로 화면에 실제로 텍스트로 출력되어야 하는 진짜 문장(예: content: "안녕하세요")이나 속성 선택자([type="text"])에는 따옴표를 씁니다.

CSS 명세서(스펙)를 보면, 키프레임 애니메이션 이름이나 폰트 패밀리(font-family) 이름, 그리드 영역(grid areas) 이름처럼 웹 개발자가 직접 마음대로 지을 수 있는 값들은 <custom-ident>나 <string>, 혹은 둘 다 허용되는 것으로 표시되어 있습니다.

만약 명세서에 따옴표가 있는 것과 없는 것을 모두 허용한다고 적혀있다면(<custom-ident> | <string>), 따옴표를 쓰는 것은 여러분의 자유입니다. (키프레임 애니메이션 이름이 대표적인 예입니다):

@keyframes validIdent {
  /* 따옴표 없는 식별자 (custom-ident) - 추천 */
}
@keyframes 'validString' {
  /* 따옴표 있는 문자열 (string) - 동작하지만 잘 안 씀 */
}

하지만 어떤 텍스트 값들은 따옴표로 묶어버리면 아예 문법 에러(invalid)가 나기도 합니다. 예를 들어, grid-area 속성의 값은 <custom-ident>만 허용합니다. 따라서 content라는 이름의 그리드 영역을 만들었다면 반드시 따옴표 없이 사용해야 합니다:

.item {
  grid-area: content; /* 따옴표를 쓰면 에러가 납니다! */
}

이와 반대로, content 속성의 값처럼 데이터 타입이 무조건 <string>으로 정해져 있는 경우에는 반드시 따옴표로 묶어야 합니다:

.item::after {
  content: "This is my content."; /* 따옴표가 없으면 에러가 납니다! */
}

여러분은 <custom-ident>에 이모지(emoji)를 포함해 거의 모든 이름을 자유롭게 지을 수 있습니다. 하지만 절대 사용하면 안 되는 예약어들이 있습니다. none, unset, initial, inherit은 이름으로 쓸 수 없으며, 숫자로 시작하거나 하이픈 두 개(--)로 시작해서도 안 됩니다. (하이픈 두 개는 CSS 커스텀 속성, 즉 CSS 변수 전용입니다.)

이 문서의 목차

미리 정의된 키워드 값 (Pre-defined keyword values)
CSS 전역 키워드 (CSS-wide keywords)
https://en.wikipedia.org/wiki/URL(#urls)
같이 보기 (See also)

미리 정의된 키워드 값 (Pre-defined keyword values)

미리 정의된 키워드는 CSS 명세서에서 해당 속성에 쓰라고 미리 만들어둔 텍스트 값입니다. 이 키워드들도 일종의 'CSS 식별자(<ident>)'이므로 따옴표 없이 사용합니다.

MDN 문서나 CSS 명세서에서 속성의 구문을 보면, 허용되는 키워드들이 나열되어 있습니다. 아래는 float 속성에 허용되는 열거형(enumerated) 키워드 값들의 목록입니다:

left | right | none | inline-start | inline-end

이러한 값들은 코드를 작성할 때 따옴표 없이 그대로 씁니다:

.box {
  float: left;
}

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

각 속성마다 정해져 있는 전용 키워드 외에도, CSS의 모든 속성이 공통으로 받아들이는 전역 키워드들이 있습니다. 이 키워드들은 속성의 '기본값 처리 방식(defaulting behaviors)'을 명시적으로 지시할 때 사용합니다.

initial
해당 속성의 공식적인 '초기값(initial value)'으로 되돌립니다. (브라우저 기본값이 아니라, CSS 스펙에 정의된 쌩얼(?) 상태로 만듭니다.)
inherit
부모 요소가 가진 해당 속성의 계산된 값을 그대로 물려받습니다(상속).
unset
해당 속성이 원래 상속되는 속성(예: color)이면 inherit처럼 동작하고, 상속되지 않는 속성(예: border)이면 initial처럼 동작합니다. 아주 똑똑한 초기화 버튼이죠!
revert
현재 스타일을 싹 무시하고, 브라우저가 원래 제공하는 기본 스타일(User Agent Stylesheet)로 되돌리거나, 부모에게 상속받은 상태로 되돌립니다.
revert-layer
캐스케이드 레이어(@layer)를 사용할 때, 현재 레이어의 스타일을 취소하고 이전 레이어에 정의된 스타일로 되돌아갑니다.

👨‍🏫 강사님의 꿀팁:
실무에서 특정 컴포넌트의 스타일을 싹 다 초기화하고 싶을 때 all: unset;을 주면 마법처럼 모든 스타일이 초기화됩니다! 전역 키워드들은 문제 해결(Troubleshooting)에 아주 유용하니 꼭 알아두세요.

URL (URLs)

<url> 타입은 url() 이라는 함수형 표기법(functional notation)을 사용합니다. 이 함수 안에는 URL을 나타내는 <string>(문자열)이 들어갑니다. URL은 절대 경로(http://...)일 수도 있고 상대 경로(../images/...)일 수도 있습니다. 배경 이미지를 넣을 때 가장 많이 보셨을 거예요.

.box {
  background-image: url("images/my-background.png"); /* 상대 경로 */
}

.box {
  background-image: url("[https://www.example.com/images/my-background.png](https://www.example.com/images/my-background.png)"); /* 절대 경로 */
}

url() 안에 들어가는 파라미터는 따옴표로 묶어도 되고 안 묶어도 됩니다. 만약 따옴표를 안 쓰고(url(images/my-bg.png)) 쌩으로 쓰면, 브라우저는 이를 <url-token>으로 파싱합니다. 단, 따옴표 없이 쓸 때는 공백이나 괄호 같은 특정 특수문자가 경로에 섞여 있으면 이스케이프(escape, \ 붙이기) 처리를 해줘야 하는 번거로움이 있습니다. 그래서 안전하게 항상 따옴표("" 또는 '')를 치는 습관을 들이는 것을 강력히 추천합니다!