CSS text-align 속성으로 텍스트 정렬 설정하기

CSS에서 텍스트 정렬을 설정하려면 text-align 속성을 사용합니다. 이 속성은 블록 요소 내부의 인라인 콘텐츠(텍스트)가 수평 방향으로 어떻게 배치될지를 결정합니다.

text-align 속성 값

text-align 속성에 사용할 수 있는 값은 다음과 같습니다.

text-align: left | right | center | justify | initial | inherit;

left – 텍스트를 왼쪽에 정렬합니다(기본값).
right – 텍스트를 오른쪽에 정렬합니다.
center – 텍스트를 가운데 정렬합니다.
justify – 양쪽 정렬로, 각 줄의 좌우 끝이 맞춰지도록 단어 간격이 조정됩니다.
initial – 속성을 기본값으로 되돌립니다.
inherit – 부모 요소의 값을 상속받습니다.

예제 1: justify를 활용한 양쪽 정렬

다음은 멀티 컬럼 레이아웃에서 text-align: justify를 적용해 본문을 양쪽 정렬하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
<style>
.demo {
    -webkit-columns: auto auto; /* Chrome, Safari, Opera */
    -moz-columns: auto auto; /* Firefox */
    columns: auto auto;
    text-align: justify;
}
</style>
</head>
<body>
<h1>Machine Learning</h1>
<div class="demo">
Today’s Artificial Intelligence (AI) has far surpassed the hype of blockchain and quantum computing. This is due to the fact that huge computing resources are easily available to the common man. The developers now take advantage of this in creating new Machine Learning models and to re-train the existing models for better performance and results. The easy availability of High Performance Computing (HPC) has resulted in a sudden increased demand for IT professionals having Machine Learning skills.
</div>
</body>
</html>

실행 결과

텍스트가 두 개의 컬럼으로 나뉘고, 각 줄의 좌우 끝이 맞춰지는 양쪽 정렬(justify)이 적용된 것을 확인할 수 있습니다.

예제 2: center를 활용한 가운데 정렬

이번에는 text-align: center를 사용해 텍스트를 가운데 정렬하는 예제입니다. 그라디언트 배경 위에 밑줄 스타일까지 함께 적용해 보겠습니다.

<!DOCTYPE html>
<html>
<head>
<style>
body {
    background-image: linear-gradient(to right, yellow,orange,yellow,green,blue,indigo,violet);
}
.demo {
    text-decoration: overline;
    text-decoration-color: yellow;
    font-variant:normal;
    text-align: center;
}
</style>
</head>
<body>
<h1>Examination Details</h1>
<p class="demo">Exam on 20th December.</p>
<p class="demo2">Exam begins at 9AM.</p>
</body>
</html>

실행 결과

지정된 문단이 화면 중앙에 가운데 정렬되어 표시되며, 노란색 윗줄(overline) 장식 효과도 함께 나타납니다.

정리

text-align 속성은 문단, 제목, 목록 등 거의 모든 텍스트 요소에 적용할 수 있으며, 반응형 웹 디자인에서도 널리 활용됩니다. 왼쪽·오른쪽·가운데·양쪽 정렬을 상황에 맞게 조합하면 가독성 높은 레이아웃을 손쉽게 구성할 수 있습니다.