타이포그래피에서 행 상자(line box)란 텍스트가 실제로 렌더링되는 영역을 의미합니다. 일반적으로 구두점은 이 영역 안에 포함되지만, CSS의 hanging-punctuation 속성을 사용하면 특정 조건에서 구두점 문자를 행 상자 외부로 내보낼 수 있습니다.
이 속성은 주로 CJK(중국어·일본어·한국어) 타이포그래피에서 활용되며, 문단의 시각적 정렬을 더 깔끔하게 만들어 줍니다.
hanging-punctuation 속성 값
| 번호 | 속성 값 및 설명 |
|---|---|
| 1. | none 구두점을 행 상자 외부에 배치하지 않습니다. (기본값) |
| 2. | first 첫 번째 줄의 시작 가장자리 바깥쪽에 구두점을 배치할 수 있도록 허용합니다. |
| 3. | last 마지막 줄의 끝 가장자리 바깥쪽에 구두점을 배치할 수 있도록 허용합니다. |
사용 예시
웹 페이지에서 다음과 같이 설정하여 사용할 수 있습니다.
hanging-punctuation: none; hanging-punctuation: first; hanging-punctuation: last;
여러 값을 함께 지정하고 싶다면 공백으로 구분하여 작성할 수도 있습니다. 예를 들어 hanging-punctuation: first last;처럼 선언하면 첫 줄과 마지막 줄 모두에서 구두점이 행 상자 밖으로 나갈 수 있습니다.
다만 이 속성은 아직 대부분의 브라우저에서 실험적으로만 지원되므로, 실제 프로젝트에 적용하기 전에 브라우저 호환성을 반드시 확인하는 것이 좋습니다.