웹 문서에서 텍스트의 가독성과 디자인을 좌우하는 핵심 요소 중 하나가 바로 텍스트 정렬입니다. CSS에서는 text-align 속성을 사용하여 요소 내부의 텍스트를 손쉽게 정렬할 수 있습니다.
text-align 속성의 주요 값
text-align 속성에 사용할 수 있는 대표적인 값은 다음과 같습니다.
- left: 텍스트를 왼쪽으로 정렬합니다 (기본값).
- right: 텍스트를 오른쪽으로 정렬합니다.
- center: 텍스트를 가운데로 정렬합니다.
- justify: 양쪽 여백을 맞추어 균등하게 정렬합니다.
사용 예제
아래 코드는 인라인 스타일을 활용해 텍스트를 각각 오른쪽과 가운데로 정렬하는 예시입니다. 직접 실행해 보며 결과를 확인해 보세요.
<html> <head> </head> <body> <p style = "text-align:right;"> 아시아는 하나의 대륙입니다. </p> <p style="text-align:center;"> 아시아는 하나의 대륙입니다. </p> </body> </html>
정리
text-align 속성은 블록 레벨 요소 내부의 인라인 콘텐츠(텍스트, 이미지 등)에 적용되며, 문단이나 제목의 배치를 조절할 때 매우 유용합니다. 상황에 맞는 정렬 값을 선택하면 더욱 깔끔하고 전문적인 웹 페이지를 만들 수 있습니다.