4. text-align 배치

Jan 07, 2026

Contents

1. text-align 1️⃣ 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 배치)


<!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 선택 가능

Contents

1. text-align 1️⃣ text-align의 기본 개념 2️⃣ text-align의주요 값과 의미 3️⃣ text-align이 적용되는 것들 4️⃣ 자주 헷갈리는 비교 5️⃣ 실습

CSS

4. text-align 배치

박은서

Jan 07, 2026

Contents

1. text-align 1️⃣ 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 배치)


<!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 선택 가능

Contents

1. text-align 1️⃣ text-align의 기본 개념 2️⃣ text-align의주요 값과 의미 3️⃣ text-align이 적용되는 것들 4️⃣ 자주 헷갈리는 비교 5️⃣ 실습

4. text-align 배치

1. text-align

1️⃣ text-align의 기본 개념

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

1) left (기본값)

2) right

3) center

4) justify

5) start / end

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

1) ✅ 적용됨

2) ❌ 적용 안 됨

4️⃣ 자주 헷갈리는 비교

1) text-align vs margin: auto

5️⃣ 실습

4. text-align 배치

1. text-align

1️⃣ text-align의 기본 개념

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

1) left (기본값)

2) right

3) center

4) justify

5) start / end

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

1) ✅ 적용됨

2) ❌ 적용 안 됨

4️⃣ 자주 헷갈리는 비교

1) text-align vs margin: auto

5️⃣ 실습

1. `text-align`

1️⃣ `text-align`의 기본 개념

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

1) `left` (기본값)

2) `right`

3) `center`

4) `justify`

5) `start` / `end`

1. `text-align`

1️⃣ `text-align`의 기본 개념

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

1) `left` (기본값)

2) `right`

3) `center`

4) `justify`

5) `start` / `end`