CSS의 text-justify 속성은 text-align 속성이 justify(양쪽 정렬) 값으로 설정되어 있을 때, 텍스트가 어떤 방식으로 정렬될지를 지정하는 속성입니다. 즉, 단어 사이 간격을 늘릴지, 글자 사이 간격을 조절할지 등 양쪽 정렬의 세부 동작을 제어할 수 있습니다.
기본 문법
text-justify: auto | inter-word | inter-character | none | initial | inherit;
속성 값 설명
- auto – 브라우저가 텍스트 내용에 따라 적절한 정렬 방식을 자동으로 결정합니다. (기본값)
- inter-word – 단어와 단어 사이의 간격을 조절하여 양쪽 정렬합니다. 영어처럼 공백으로 구분되는 텍스트에 적합합니다.
- inter-character – 글자와 글자 사이의 간격을 조절하여 양쪽 정렬합니다. 한글, 일본어, 중국어처럼 CJK(동아시아) 문자에 적합합니다.
- none – 양쪽 정렬 기능을 비활성화합니다.
- initial – 속성을 기본값(auto)으로 되돌립니다.
- inherit – 부모 요소의 text-justify 값을 상속받습니다.
사용 예제
다음 예제는 CSS에서 text-justify 속성을 실제로 구현하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
div {
text-align: justify;
text-justify: inter-word;
color: white;
background-color: gray;
}
</style>
</head>
<body>
<h2>데모 제목</h2>
<div>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text.</div>
</body>
</html>실행 결과
위 코드를 실행하면 회색 배경 위에 흰색 텍스트가 양쪽 정렬된 모습을 확인할 수 있습니다.
이제 브라우저 창 크기를 줄여보면 다음과 같이 화면 너비에 맞춰 텍스트가 재정렬되는 것을 볼 수 있습니다.
참고 사항
text-justify 속성은 text-align: justify와 함께 사용해야만 효과가 있으며, 주요 최신 브라우저에서 지원됩니다. 특히 인터넷 익스플로러에서 먼저 도입된 속성이라 브라우저별 동작 차이가 있을 수 있으므로, 실무에서는 크로스 브라우징 테스트를 권장합니다.