CSS의 text-justify 속성은 요소에 적용되는 텍스트 양쪽 정렬(justify)의 처리 방식을 지정할 때 사용합니다. 한편 text-align 속성은 요소 안에서 텍스트가 수평으로 어떻게 배치될지 결정하며, 두 속성을 함께 사용하면 더욱 세밀한 텍스트 정렬이 가능합니다.
특히 text-justify 속성은 text-align 값이 justify로 설정된 경우에만 의미가 있으며, 글자 간격 또는 단어 간격을 조절해 문단의 좌우 끝을 맞추는 방식을 제어합니다.
예제 1: article 요소에 text-justify 적용하기
아래 예제는 article 요소 전체에 양쪽 정렬을 적용하고, 첫 번째 문단에는 text-justify 값을 inter-character로 지정하여 글자 단위로 정렬 방식을 조정하는 모습을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
article {
margin: 3%;
background-color: peachpuff;
text-align: justify;
}
p:first-of-type{
text-justify: inter-character;
background-color: moccasin;
}
</style>
</head>
<body>
<article>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac. </p>
<p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur. Mauris rutrum, lectus quis porta bibendum, arcu neque dictum orci, sed volutpat ipsum risus in ex. Suspendisse potenti. Nam rhoncus ultricies nisi pulvinar rutrum. Mauris ullamcorper interdum urna a vulputate. Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est. Nunc viverra congue aliquam. Ut volutpat magna ipsum, in interdum velit mollis ac.</p>
</article>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
첫 번째 문단은 moccasin 배경색과 함께 inter-character 방식이 적용되어 글자 간격이 조정된 것을 확인할 수 있으며, 나머지 문단은 기본 양쪽 정렬 방식으로 표시됩니다.
예제 2: dl 목록 구조에 text-justify 적용하기
다음 예제에서는 dl(정의 목록) 요소에 양쪽 정렬을 설정하고, 특정 문단에만 id 선택자를 통해 text-justify: inter-character 스타일을 별도로 적용합니다.
<!DOCTYPE html>
<html>
<head>
<style>
dl {
margin: 3%;
background-color: lightcoral;
text-align: justify;
}
#example{
text-justify: inter-character;
background-color: snow;
}
</style>
</head>
<body>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p id="example">Nullam in fringilla ex, at sagittis erat.
Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
<dl>
<dt> Quisque dolor tortor, vehicula in odio eu, fringilla rutrum est.</dt>
<dd>Nunc viverra congue aliquam. <p>Nullam in fringilla ex, at sagittis erat. Praesent imperdiet augue at ante tempor, eu condimentum tellus consectetur.</p> </dd>
</dl>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 결과가 출력됩니다.
#example 아이디가 지정된 문단만 snow 배경색과 함께 글자 단위 정렬 방식이 적용되고, 나머지 문단은 일반적인 양쪽 정렬로 렌더링되는 것을 확인할 수 있습니다.
정리
text-align: justify는 문단의 좌우 끝을 맞추는 기본 도구이며, text-justify는 그 정렬이 단어 사이와 글자 사이 중 어느 쪽 간격을 우선적으로 조절할지 세부적으로 지정하는 보조 속성입니다. 두 속성을 함께 활용하면 다양한 언어 환경에서도 가독성 높은 텍스트 레이아웃을 구성할 수 있습니다.