CSS / Reference / text-align
text-align은 블록 안의 텍스트와 인라인 내용을 정렬합니다. 블록 요소 자체를 가운데로 옮기는 속성이 아니며, 내용 방향을 고려하려면 left와 right 대신 start와 end를 검토할 수 있습니다.
문법과 주요 값
| 속성 | 초기값 | 상속 | 주요 적용 조건 |
|---|---|---|---|
text-align |
start , or a nameless value that acts as left if direction is ltr , right if direction is rtl if start is not supported by the browser. | 예 | 블록 컨테이너 안의 인라인 내용 |
초기값은 브라우저 기본 스타일시트가 HTML 요소에 적용한 값과 같다는 뜻이 아닙니다. 실제 값은 개발자 도구의 Computed에서 확인하세요.
.copy { text-align: start; }
.title { text-align: center; }
| 값 또는 구분 | 동작과 선택 기준 |
|---|---|
start / end |
쓰기 방향의 시작 / 끝 쪽 정렬 |
left / right |
물리적인 왼쪽 / 오른쪽 정렬 |
center |
인라인 내용을 가운데 정렬 |
justify |
줄의 양쪽을 맞추도록 간격 조정; 마지막 줄은 보통 예외 |
값과 적용 조건은 MDN text-align에서 확인할 수 있습니다.
실행 예제와 결과 비교
아래 전체 코드를 UTF-8 형식의 text-align-example.html 파일로 저장한 뒤 브라우저로 여세요. 예제용 CSS는 이 파일 안에만 넣고 사이트 전체 스타일시트에 그대로 붙여 넣지 않습니다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>text-align 비교 예제</title>
<style>
body { margin: 0; color: #20242b; background: #fff; font: 16px/1.7 "Malgun Gothic", sans-serif; }
#demo { padding: 24px; max-width: 820px; margin: auto; }
h1 { font-size: 22px; margin: 0 0 20px; }
.samples { display: flex; flex-wrap: wrap; gap: 24px; }
.label { margin: 0 0 8px; font-weight: 700; }
.target, .reference { width: 260px; padding: 12px; border: 1px solid #718096; }
.target { text-align: center; }
.reference { text-align: justify; }
</style>
</head>
<body>
<main id="demo">
<h1>text-align 적용 비교</h1>
<section class="samples"><div class="a"><p class="label">center</p><div class="target">문단 안의 정렬을 확인하는 예문입니다. 긴 문장과 짧은 마지막 줄에서 간격이 어떻게 바뀌는지 확인하세요.</div></div><div class="b"><p class="label">justify</p><div class="reference">문단 안의 정렬을 확인하는 예문입니다. 긴 문장과 짧은 마지막 줄에서 간격이 어떻게 바뀌는지 확인하세요.</div></div></section>
</main>
</body>
</html>
가운데 정렬은 각 줄의 내용을 중앙에 놓고 양쪽 정렬은 줄을 맞추기 위해 간격을 조절합니다. 짧은 마지막 줄이 그대로 남는 동작도 비교하세요.
박스 정렬과 텍스트 정렬
text-align: center를 부모에 주면 인라인 요소와 inline-block의 표시에는 영향을 주지만 일반 블록의 width와 margin을 자동으로 가운데 맞추지 않습니다. 블록 자체는 margin-inline: auto 또는 레이아웃 컨테이너의 정렬 방식으로 배치합니다.
양쪽 정렬과 읽기 흐름
좁은 영역에 긴 영문 단어를 넣으면 justify가 단어 사이를 크게 벌릴 수 있습니다. 언어별 줄바꿈, 하이픈 처리와 컨테이너 너비를 함께 검토하고 마지막 줄 정렬은 text-align-last의 역할을 구분하세요. 모든 콘텐츠에 justify를 적용하기보다 읽기 편한 기본 정렬을 먼저 선택합니다.
한 가지 설정씩 바꾸어 확인하기
앞의 전체 코드를 저장한 예제 파일을 사용합니다. 지정한 선택자의 CSS만 변경하고, 서로 다른 비교 조건을 한꺼번에 바꾸지 않습니다.
- 기존 같은 문단에서 text-align만 start/end/center/justify로 바꾸어 첫 줄과 마지막 줄을 봅니다. text-align-last를 별도로 바꾼 뒤 원래 값을 복구합니다.
- 다른 언어 내용을 방향에 맞게 준비해 dir="rtl"에서 start/end와 left/right를 비교합니다. direction 테스트를 마치면 원래 방향으로 복구하고, 블록 자체의 가운데 배치는 margin-inline:auto로 별도 확인합니다.
첫 파일의 .target 시작 태그에 dir="rtl"을 추가하고 그 안의 문장을 아래 아랍어 예문으로 바꾸세요. 같은 문장에서 text-align만 start/end/left/right로 바꾸면 start는 오른쪽, end는 왼쪽인 반면 left/right는 물리 방향을 유지합니다. 확인 후 원래 방향과 내용을 복구합니다.
<div class="target" dir="rtl" lang="ar">هذا نص عربي لمقارنة محاذاة الفقرة واتجاه الكتابة.</div>
블록 자체 가운데 배치는 별도 조건입니다. 앞 파일의 .samples에서 Flex 배치를 해제한 뒤 .target에 margin-inline:auto를 넣어 확인하고 두 변경을 모두 복구하세요. 가운데 정렬 기준은 그때의 부모 내용 영역입니다.
문자 크기·줄 높이·서체를 함께 조정하려면 글꼴, 글자 크기, 굵기, 줄 간격 설정하기를 참고하세요. 본문의 조건과 함께 비교할 관련 속성은 word-break, text-indent입니다.
적용되지 않거나 예상과 다를 때
- 정렬 대상이 블록 자체인지 그 안의 내용인지 확인합니다.
- justify의 큰 공백을 숨기려고 전역 break-all을 적용하기 전에 영역 너비와 언어를 확인합니다.
CSS / Reference / border-style
테두리 스타일의 1~4개 값 대응과 none의 계산 두께를 설명합니다. 접힌 표에서 hidden이 이웃 경계를 억제하는 차이도 실행 예제로 확인합니다.
CSS / Reference / align-content
Flex 줄 묶음과 Grid 트랙의 공간 배분을 비교합니다. nowrap·wrap, auto 트랙 stretch와 일반 블록의 적용 조건을 별도 실습으로 확인합니다.
CSS / Reference / background-position
배경 위치의 백분율이 영역과 이미지 크기의 차이에 적용되는 이유를 설명합니다. 동일 영역에서 0·50·100%를 비교하고 위치와 잘림을 조정합니다.
문단 안의 인라인 내용을 정렬하고 블록 자체의 배치와 구분합니다. start·end의 쓰기 방향과 양끝·마지막 줄 정렬을 비교합니다.
텍스트 그림자의 위치·흐림·레이어 순서를 조정합니다. 박스 그림자와의 차이, 잘림 및 실제 글자 대비를 함께 점검합니다.
CSS / Reference / border-spacing
표 셀의 가로·세로 간격을 지정하고 padding과 구분합니다. separate·collapse 및 간격 0의 차이를 같은 표에서 비교합니다.
CSS / Reference / list-style-position
목록 마커를 항목 안·밖에 배치하고 여러 줄 시작점을 비교합니다. 첫 블록 자식과 시작 여백, 잘리는 마커를 확인하는 기준을 설명합니다.
한국어·영문 예문에서 normal·keep-all·break-all의 줄바꿈을 비교합니다. 사용 중단된 break-word와 overflow-wrap의 차이도 구분합니다.
CSS / Reference / caption-side
표 캡션을 위·아래로 배치하면서 첫 요소 자식 위치를 유지합니다. 표 내용과 맞는 제목, 긴 캡션 줄바꿈과 글자 정렬을 확인합니다.
전경색과 currentColor의 연결을 같은 박스에서 확인합니다. 상속, 배경색과의 차이, 대비와 색상 이외의 정보 표시 기준을 설명합니다.