🧭 Normal Flow (정상 흐름) 이해하기

 

CSS에서 기본 배치 방식의 원리와 방향 설정 방법

웹 페이지를 구성할 때 요소들이 자연스럽게 위에서 아래로, 혹은 왼쪽에서 오른쪽으로 배치되는 걸 보신 적 있으시죠?
바로 이 기본 동작이 **Normal Flow (정상 흐름)**입니다.

이번 글에서는 Normal Flow가 무엇인지, 블록/인라인 요소의 배치 방식, 그리고 방향을 제어하는 속성들까지 한 번에 정리해볼게요.

---

🧱 Normal Flow란?

Normal Flow는 CSS 레이아웃의 기본 배치 규칙입니다.
아무런 position, float, flex, grid 설정이 없는 상태에서 요소들이 브라우저에 자동으로 배치되는 흐름을 말해요.

📦 블록 요소 (Block Elements)

• 한 줄 전체를 차지
• 위에서 아래로 쌓임

<div>블록 1</div> <div>블록 2</div>

➡ 두 div는 위에서 아래로 줄바꿈되며 배치됩니다.

🔤 인라인 요소 (Inline Elements)

• 텍스트처럼 한 줄에 나란히 배치됨
• 줄 바꿈되지 않음

<span>인라인 1</span><span>인라인 2</span>

➡ span들은 한 줄 안에 나란히 나타납니다.

---

🔄 흐름의 방향을 바꾸기

Normal Flow의 기본 방향은 다음과 같습니다:

• 인라인 방향: 왼쪽 → 오른쪽 (ltr)
• 블록 방향: 위쪽 → 아래 (top to bottom)

하지만 이 방향은 다음 속성으로 변경할 수 있어요.

1. direction – 인라인 방향 제어

body { direction: rtl; /* 오른쪽에서 왼쪽으로 */ }

이 속성을 사용하면 텍스트 및 인라인 요소의 배치 순서가 바뀝니다.

2. writing-mode – 블록 방향 제어

.container { writing-mode: vertical-rl; }

이 속성은 텍스트의 흐름 방향을 세로로 바꾸며, 블록 방향을 제어합니다.

• horizontal-tb (기본값): 위 → 아래
• vertical-rl: 오른쪽 → 왼쪽 세로 흐름
• vertical-lr: 왼쪽 → 오른쪽 세로 흐름

✅ writing-mode는 한자, 일본어, 한국어 전통 문서 레이아웃에도 자주 쓰입니다.

---

💬 정리하자면

속성	역할	예시
direction	인라인 텍스트 방향 설정	rtl, ltr
writing-mode	블록 방향 및 텍스트 흐름 설정	vertical-rl, vertical-lr 등

Normal Flow는 우리가 페이지를 설계할 때 기본이 되는 배치 방식입니다.
이 원리를 이해하면, float, flex, grid 등을 배울 때도 훨씬 쉽게 와닿을 거예요!

---

📝 마무리하며

Normal Flow는 웹 페이지에서 콘텐츠가 어떻게 자연스럽게 흐르는지를 결정하는 가장 기본적인 개념입니다.
텍스트와 박스가 어떻게 정렬되고 쌓이는지를 이해하면 CSS의 다른 개념들도 훨씬 쉽게 연결될 거예요.

저처럼 프론트엔드 개발을 준비하고 계신 분들께 이번 정리가 작은 도움이 되었기를 바랍니다 😊