반응형
Web Development · CSS Text
CSS text-align —
텍스트 정렬 완전 정리
left · right · center · justify 4가지 정렬 방식
.align-left { text-align: left; } .align-right { text-align: right; } .align-center { text-align: center; } .align-justify { text-align: justify; }
left — Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa.
right — Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa.
center — Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa.
justify — Integer elementum massa at nulla placerat varius. Suspendisse in libero risus, in interdum massa. Vestibulum ac leo vitae metus faucibus gravida ac.
1 4가지 정렬 — 한눈에
| 값 | 동작 | 용도 |
|---|---|---|
left (기본) |
왼쪽 맞춤 | 본문 — 기본 |
right |
오른쪽 맞춤 | 아랍어·히브리어, 작가 인용 |
center |
가운데 맞춤 | 제목·캐치프레이즈 |
justify |
양쪽 맞춤 | 신문 본문 스타일 |
start |
시작 방향 (다국어 대응) | RTL 언어 자동 |
end |
끝 방향 | RTL 언어 자동 |
2 justify의 함정
양쪽 정렬은 왼쪽·오른쪽 끝을 맞추기 위해 단어 사이 간격을 조정한다. 보기엔 깔끔하지만 한국어처럼 단어 길이가 들쭉날쭉한 언어는 단어 사이가 너무 벌어질 수 있다.
※ 한국어에 justify는 거의 안 씀. 영어·잡지·신문에 적합. 모바일 좁은 화면에서도 어색.
반응형
3 블록 요소 vs 인라인 정렬
text-align은 인라인 콘텐츠(글자·인라인 요소)의 정렬에만 영향. 블록 박스 자체를 가운데 두려면 margin: 0 auto.
핵심 한 줄 요약
left (기본)왼쪽 맞춤
right오른쪽 맞춤
center가운데 — 제목용
justify양쪽 맞춤 — 한국어 비추
블록 가운데margin: 0 auto (text-align 아님)
Tags
#text-align #left #right #center #justify #CSS #HTML #텍스트정렬 #가운데정렬 #p #웹개발 #티스토리
▼ 티스토리 태그 입력란 복사용
text-align, left, right, center, justify, CSS, HTML, 텍스트정렬, 가운데정렬, 양쪽정렬, p, 웹개발, 티스토리
반응형
'php' 카테고리의 다른 글
| CSS text-indent — 첫 줄 들여쓰기 완전 정리 (0) | 2026.05.03 |
|---|---|
| CSS text-decoration — 밑줄 · 취소선 완전 정리 (0) | 2026.05.03 |
| CSS line-height — 줄 간격 완전 정리 (0) | 2026.05.03 |
| CSS list-style-position — inside · outside 완전 정리 (0) | 2026.05.03 |
| CSS list-style-type — 불릿 모양 바꾸기 완전 정리 (0) | 2026.05.03 |
댓글