CSS hanging-punctuation 속성이란?
hanging-punctuation 속성은 문단의 줄 시작 또는 끝에 위치한 문장 부호(구두점)를 줄 상자(line box) 바깥쪽으로 내어쓰기할 수 있는지 여부를 지정하는 CSS 속성입니다.
이 속성을 활용하면 텍스트 블록의 시각적 정렬이 훨씬 깔끔해집니다. 예를 들어 인용문이나 본문 첫 줄 앞의 따옴표가 텍스트 영역 밖으로 살짝 걸리듯 배치되어, 실제 글자들이 세로 기준선에 맞춰 정렬된 것처럼 보이는 효과를 얻을 수 있습니다.
주요 속성 값
| 번호 | 속성 값 및 설명 |
|---|---|
| 1. | none 문장 부호를 내어쓰기하지 않습니다. (기본값) |
| 2. | first 첫 번째 줄의 시작 가장자리 바깥쪽에 문장 부호를 배치합니다. |
| 3. | last 마지막 줄의 끝 가장자리 바깥쪽에 문장 부호를 배치합니다. |
사용 방법
웹 페이지에서는 아래와 같이 간단하게 설정할 수 있습니다.
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
참고 사항
hanging-punctuation 속성은 특히 중국어·일본어·한국어 등 CJK 타이포그래피에서 유용하게 활용됩니다. 문장 부호가 줄바꿈 지점에서 튀어 나오지 않고 자연스럽게 정렬되도록 도와주기 때문입니다.
다만 이 속성은 아직 모든 브라우저에서 지원되지 않으므로, 실무에서 적용할 경우 대상 브라우저의 지원 여부를 먼저 확인하는 것이 좋습니다. 미지원 브라우저에서는 단순히 무시되므로 레이아웃이 깨지지는 않습니다.