CSS / Reference / content
content는 주로 ::before와 ::after 같은 가상 요소에 텍스트·카운터·이미지 등의 생성 콘텐츠를 지정합니다. DOM의 원문을 직접 수정하는 기능이 아니므로 중요한 정보와 실제 링크·버튼을 CSS 생성 콘텐츠로만 제공하지 마세요.
문법과 주요 값
| 속성 | 초기값 | 상속 | 주요 적용 조건 |
|---|---|---|---|
content |
normal (::before/::after에서는 none으로 계산) | 아니요 | 주로 ::before·::after 등의 생성 콘텐츠 |
초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.
.tag::before { content: "안내: "; }
.item::after { content: " (" attr(data-label) ")"; }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
"문자열" |
가상 요소에 표시할 텍스트 |
attr(data-label) |
요소의 속성 값을 문자열로 표시 |
counter(...) |
CSS 카운터 값 표시 |
open-quote / close-quote |
인용 부호 생성 |
none / normal |
가상 요소의 생성 여부 등에 영향 |
값과 적용 조건은 MDN content에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 content-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>content 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target::before { content: "안내: "; color: #006c9c; font-weight: bold; }
.target::after { content: " (" attr(data-label) ")"; }
.reference::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #006c9c; margin-inline-end: 6px; }
</style>
</head>
<body>
<main id="demo">
<h1>content 적용 비교</h1>
<section class="samples"><div><p class="label">문자열과 attr()</p><p class="target" data-label="새 항목">본문 콘텐츠</p></div><div><p class="label">빈 content로 장식 도형</p><p class="reference">본문 콘텐츠</p></div></section>
</main>
</body>
</html>
첫 예문 앞뒤에 문자열이 생성되고 data-label 값이 뒤에 표시됩니다. 두 번째 예문은 빈 문자열로 가상 요소를 만들고 배경과 크기로 장식 도형을 그립니다.
가상 요소가 생기는 조건
::before와 ::after에 크기나 배경을 지정했는데 보이지 않으면 content가 none이나 normal로 남아 있는지 확인하세요. content: ""는 빈 문자열이지만 가상 요소를 만들어 장식 박스를 표시할 수 있습니다. img 같은 대체 요소에는 같은 방법을 일반적으로 적용할 수 없습니다.
이미지·카운터와 접근성
content: url(...)로 생성한 이미지는 일반 배경 이미지와 크기 조절 방식이 같지 않습니다. 단순 장식 아이콘은 빈 가상 요소의 background-image와 크기를 함께 지정하는 방식이 관리하기 쉽습니다. CSS 카운터는 번호를 만들 수 있지만 중요한 번호·설명은 실제 목록과 DOM에 의미가 남도록 설계하세요. 스크린 리더가 생성 콘텐츠를 언제나 같은 방식으로 읽는다고 가정하지 않습니다.
한 가지 설정씩 바꾸어 확인하기
앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.
- 기존 파일의 .reference::before에서 content만 "", none, normal로 바꾸어 파란 점이 보이는지 비교합니다. 크기·배경은 그대로 두고 마지막에 빈 문자열로 복구합니다.
- data-label을 새 항목에서 수정 항목으로 바꾸면 접미사가 바뀝니다. 속성을 지웠을 때와도 비교한 뒤 복구합니다. 사용자가 반드시 읽어야 하는 제목·버튼 이름은 실제 HTML에 둡니다.
선택자와 생성 상자 구성은 ::before와 ::after로 가상 요소 꾸미기에서 확인할 수 있습니다.
문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 quotes입니다.
적용되지 않거나 예상과 다를 때
- 속성 출력이 비면 해당 요소에 data-label이 실제로 있는지 확인합니다.
- 사용자가 읽어야 할 중요한 정보를 CSS가 없어도 이해할 수 있는지 확인합니다.
CSS / Reference / list-style-type
목록의 의미를 유지하면서 마커 모양과 번호 표시를 변경합니다. start 속성, 이미지 마커와 단축 속성의 영향까지 예제로 확인합니다.
부모와 루트 글자 크기를 기준으로 em·rem을 계산합니다. 중첩된 상대 크기의 차이와 확대 시 잘림을 확인하는 방법을 제공합니다.
italic·oblique의 요청과 실제 글꼴 선택을 구분합니다. 서체 파일, 합성 기울임, 의미 있는 강조와 font 단축 속성의 영향을 확인합니다.
사용 중단된 clip의 좌표를 읽고 clip-path의 inset 거리와 비교합니다. 절대 위치 조건과 크기 변경 시 좌표 재계산을 설명합니다.
CSS / Reference / border-spacing
표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.
CSS / Reference / letter-spacing, word-spacing
같은 문장을 기준으로 문자 간격과 단어 간격을 따로 조정합니다. normal 기준, 상대 단위, 언어별 줄바꿈과 과도한 음수 간격의 문제를 설명합니다.
CSS / Reference / background-clip
배경을 border·padding·content 영역 또는 텍스트에 맞춰 자릅니다. 위치 기준과의 차이, 투명 글자의 대체 색과 강제 색상 환경을 확인합니다.
문단 안의 인라인 내용을 정렬하고 블록 자체의 배치와 구분합니다. start·end의 쓰기 방향과 양끝·마지막 줄 정렬을 비교합니다.
CSS / Reference / accent-color
체크박스·라디오·범위·진행률의 기본 강조색을 지정합니다. 레이블과 키보드 조작, disabled·appearance 및 운영체제별 차이를 확인합니다.
CSS / Reference / background-repeat
repeat·no-repeat·space·round를 같은 타일로 비교합니다. 반복 방향, 타일 간격과 크기 조정, 한 축에 한 타일만 들어가는 조건을 살펴봅니다.