CSS text-align 속성이란?
text-align 속성은 문서 내 텍스트의 정렬 방식을 지정할 때 사용합니다. 이 속성 하나만으로도 문단의 가독성과 디자인 완성도를 크게 높일 수 있으며, 사용할 수 있는 값은 left(왼쪽), right(오른쪽), center(가운데), justify(양쪽) 네 가지입니다.
주요 값 살펴보기
- left: 텍스트를 왼쪽으로 정렬합니다. 대부분의 브라우저에서 기본값으로 적용됩니다.
- right: 텍스트를 오른쪽 끝으로 정렬합니다.
- center: 텍스트를 가운데로 정렬합니다.
- justify: 텍스트를 양쪽 끝에 맞춰 정렬해 좌우 여백을 균등하게 만듭니다. 신문이나 잡지처럼 깔끔한 단락 레이아웃에 적합합니다.
사용 예제
아래 코드를 직접 실행하면 text-align 속성이 실제로 어떻게 동작하는지 확인할 수 있습니다.
<html> <head> </head> <body> <p style='text-align:right;'> 이 문단은 오른쪽으로 정렬됩니다. </p> <p style='text-align:center;'> 이 문단은 가운데로 정렬됩니다. </p> <p style='text-align:left;'> 이 문단은 왼쪽으로 정렬됩니다. </p> </body> </html>
각 <p> 태그에 인라인 스타일로 text-align 값을 지정했습니다. 브라우저에서 실행하면 첫 번째 문단은 오른쪽, 두 번째 문단은 가운데, 세 번째 문단은 왼쪽으로 정렬되어 출력되는 것을 확인할 수 있습니다.