CSS

4. text-align 배치

박은서's avatar
박은서
Jan 07, 2026
4. text-align 배치
Contents
1. text-align1️⃣ text-align의 기본 개념2️⃣ text-align의주요 값과 의미3️⃣ text-align이 적용되는 것들4️⃣ 자주 헷갈리는 비교5️⃣ 실습

1. text-align

1️⃣ text-align의 기본 개념

text-align: 값;
  • 적용 대상:
      • ➡️ 블록 요소 안에 있는 텍스트 및 인라인/인라인-블록 요소
  • 정렬 기준:
      • ➡️ 부모 요소의 가로 방향(content 영역)
⚠️ text-align은 요소 자체를 움직이지 않고, 그 안에 들어 있는 텍스트/인라인 요소를 정렬합니다.

2️⃣ text-align의주요 값과 의미

1) left (기본값)

text-align: left;
  • 텍스트를 왼쪽 정렬
  • 대부분의 LTR(영어, 한국어) 언어의 기본값

2) right

text-align: right;
  • 텍스트를 오른쪽 정렬
  • 날짜, 금액 표시 등에 자주 사용

3) center

text-align: center;
  • 텍스트를 가운데 정렬
  • 제목, 버튼 내부 텍스트에 많이 사용

4) justify

text-align: justify;
  • 양쪽 정렬
  • 줄의 왼쪽과 오른쪽을 모두 맞춤
  • 신문, 긴 문단에서 사용
⚠️ 짧은 문장에서는 띄어쓰기 간격이 부자연스러울 수 있음

5) start / end

text-align: start;
text-align: end;
  • 글자 방향(direction)에 따라 자동 정렬
  • 다국어 사이트에서 유용
direction
start
end
ltr
left
right
rtl
right
left

3️⃣ text-align이 적용되는 것들

1) ✅ 적용됨

  • 텍스트
  • <span>, <a>, <img> 같은 인라인 요소
  • display: inline-block 요소
.parent {
	text-align: center;
}
<div class="parent">
	<img src="logo.png">
	<span>텍스트</span>
</div>
➡️ 이미지와 텍스트 모두 가운데 정렬됨

2) ❌ 적용 안 됨

  • 블록 요소 자체의 위치
div {
	text-align: center;
}
<div class="box"></div>
➡️ box 자체는 가운데로 안 감
➡️ 이럴 땐 margin: 0 auto; 사용해야 함

4️⃣ 자주 헷갈리는 비교

1) text-align vs margin: auto

목적
사용
텍스트 가운데 정렬
text-align: center
div 박스 가운데 정렬
margin: 0 auto
Flex 정렬
justify-content, align-items

5️⃣ 실습

아래와 동일한 모양으로 만들기(text-align 배치)
notion image
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .header {
        background-color: rgb(247, 203, 210);
        color: white;
        font-size: 20px;
        font-weight: 800;
        padding: 20px 0px 20px 0px; /* 위 오른쪽 아래 왼쪽 */
        text-align: center; /* inline만 정렬 가능 */
      }
      .menu > div {
        display: inline-block;
        height: 30px;
        padding: 5px 10px 5px 10px;
      }
      .menu {
        background-color: tomato;
        color: white;
        text-align: center; /* start senter end */
      }
    </style>
  </head>
  <body>
    <div class="header">COS</div>
    <div class="menu">
      <div>HOME</div>
      <div>HTML</div>
      <div>CSS</div>
      <div>REACT</div>
      <div>DJANGO</div>
    </div>
  </body>
</html>
➡️ .menu > div 메뉴의 바로 밑에 있는 div만 선택 가능
➡️ .menu div 메뉴 밑에 있는 모든 div 선택 가능
notion image
 
Share article