Display/Flow layout and writing modes

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

81/190

안녕하세요! 오늘 함께 살펴볼 내용은 이전 시간에 배웠던 '플로우 레이아웃(Normal Flow)'이 문서의 '쓰기 모드(Writing Modes)'를 만났을 때 어떻게 동작하는지에 대한 가이드입니다.

우리가 평소에 만드는 웹은 대부분 왼쪽에서 오른쪽으로, 그리고 위에서 아래로 흐르는 영어(또는 한국어) 기준의 환경(가로 쓰기)입니다. 하지만 일본어나 중국어의 세로 쓰기, 혹은 아랍어의 우측에서 좌측으로 쓰는 언어를 지원해야 한다면 어떨까요? 혹은 디자인적인 이유로 제목을 세로로 세워서 배치하고 싶다면요? 이때 사용하는 것이 바로 writing-mode 속성입니다.

면접에서 "CSS의 논리적 속성(Logical Properties)에 대해 설명해 보세요"라는 질문이 나온다면, 바로 이 writing-mode와 결합해서 답변하는 것이 정석입니다. 그럼 MDN 문서를 통해 자세히 알아볼까요!

플로우 레이아웃과 쓰기 모드 (Flow layout and writing modes)

정상적인 흐름(normal flow)이 어떻게 동작하는지 상세히 기술하고 있는 CSS 2.1 명세서는 기본적으로 가로 쓰기 모드(horizontal writing mode)를 가정하고 있습니다. 하지만 레이아웃(Layout)과 관련된 속성들은 세로 쓰기 모드(vertical writing modes)에서도 가로 쓰기 때와 똑같은 원리로 작동해야만 합니다. 이 가이드에서는 문서의 쓰기 모드가 달라질 때 플로우 레이아웃이 어떻게 반응하는지 살펴보겠습니다.

참고로 이 문서는 CSS 쓰기 모드에 대한 포괄적인 가이드가 아닙니다. 여기서는 플로우 레이아웃이 쓰기 모드와 상호작용할 때 우리가 미처 예상하지 못했던(unanticipated) 결과가 나타날 수 있는 영역들을 정리하는 데 목적이 있습니다. 같이 보기(See also) 섹션에서 쓰기 모드에 관한 더 많은 자료를 확인할 수 있습니다.

이 문서에서 다룰 내용 (In this article)

쓰기 모드 명세서 (Writing modes specification)
블록 흐름 방향 (Block flow direction)
중첩된 쓰기 모드 (Nested writing modes)
대체 요소 (Replaced elements)
논리적 속성과 값 (Logical properties and values)
요약 (Summary)
같이 보기 (See also)

쓰기 모드 명세서 (Writing modes specification)

'CSS Writing Modes Level 3' 명세서는 문서의 쓰기 모드 변경이 플로우 레이아웃에 미치는 영향을 정의하고 있습니다. 쓰기 모드 도입부에서 명세서는 다음과 같이 말합니다.

"CSS에서 쓰기 모드(writing mode)는 writing-mode, direction, 그리고 text-orientation 속성에 의해 결정된다. 이는 주로 '인라인 기본 방향(inline base direction)'과 '블록 흐름 방향(block flow direction)'의 관점에서 정의된다."

명세서는 인라인 기본 방향(inline base direction)을 '한 줄 안에서 콘텐츠가 나열되는 방향'으로 정의합니다. 즉, 인라인 방향의 시작(start)과 끝(end)을 결정하는 것이죠. '시작'은 문장이 시작되는 곳이고, '끝'은 글이 다음 줄로 넘어가기 직전에 한 줄이 끝나는 곳을 말합니다.

블록 흐름 방향(block flow direction)은 문단(paragraphs)과 같은 상자(boxes)들이 해당 쓰기 모드 안에서 차곡차곡 쌓이는 방향을 말합니다. CSS writing-mode 속성이 바로 이 블록 흐름 방향을 제어합니다. 만약 페이지 전체나 특정 부분을 vertical-lr (세로 쓰기, 왼쪽에서 오른쪽으로 블록이 쌓임)로 바꾸고 싶다면, 해당 요소에 writing-mode: vertical-lr을 설정하면 됩니다. 이렇게 하면 블록이 쌓이는 방향이 바뀌고, 그에 따라 글자가 나열되는 인라인 방향 역시 자동으로 세로 방향으로 바뀌게 됩니다.

특정 언어들은 고유의 쓰기 모드나 텍스트 방향을 사용해야 하지만, 우리는 제목을 세로로 세우는 등 디자인적인 효과를 주기 위해서도 이 속성들을 적극적으로 활용할 수 있습니다.

<div class="box">
  <h1>A heading</h1>
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
h1 {
  writing-mode: vertical-lr; /* 텍스트를 세로로 쓰고, 다음 줄은 오른쪽으로 넘어감 */
  float: left; /* 제목을 왼쪽으로 띄움 */
}

이 예제는 다음과 같이 렌더링 됩니다. (가로로 쓰인 본문 문단 옆에 <h1> 제목이 세로로 우뚝 서 있는 모습을 볼 수 있습니다.)

블록 흐름 방향 (Block flow direction)

writing-mode 속성은 horizontal-tb, vertical-rl, vertical-lr 값들을 받습니다. 이 값들은 페이지에서 블록들이 흘러가는 방향을 통제합니다.

초깃값(initial value)은 horizontal-tb입니다. 이는 블록은 위에서 아래(top to bottom)로 쌓이고, 인라인 방향(글자 읽는 방향)은 가로(horizontal)임을 뜻합니다. 영어나 한국어 같은 좌에서 우(LTR) 언어, 아랍어 같은 우에서 좌(RTL) 언어는 모두 기본적으로 horizontal-tb 환경에 속합니다.

다음 예제는 초깃값인 horizontal-tb를 명시적으로 설정했을 때 블록들이 어떻게 보이는지 보여줍니다:

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: horizontal-tb;
}

이를 다음 예제와 비교해 보세요. 값을 vertical-rl로 설정하면 블록은 오른쪽에서 왼쪽(right to left)으로 쌓이게 되고, 인라인 방향(글자 방향)은 수직(vertical)으로 바뀝니다.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

마지막 예제는 writing-mode에 들어갈 수 있는 세 번째 값인 vertical-lr을 보여줍니다. 이 값은 블록이 왼쪽에서 오른쪽으로 쌓이도록 만들고, 인라인 방향은 여전히 수직을 유지합니다. (vertical-rl과 비교해보면 첫 번째 문단과 두 번째 문단의 위치가 좌우 반전된 것을 알 수 있습니다.)

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney. Their names
    were Stephen and Joseph Montgolfier, they were papermakers by trade, and
    were noted as possessing thoughtful minds and a deep interest in all
    scientific knowledge and new discovery.
  </p>
  <p>
    Before that night—a memorable night, as it was to prove—hundreds of millions
    of people had watched the rising smoke-wreaths of their fires without
    drawing any special inspiration from the fact.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-lr;
}

중첩된 쓰기 모드 (Nested writing modes)

부모 요소와 다른 쓰기 모드가 자식 박스에 할당된 경우, 그 안에 있는 인라인 레벨 상자(inline level box)는 마치 display: inline-block이 적용된 것처럼 화면에 표시됩니다.

<div class="box">
  <p>
    One <span>November</span> night in the year 1782, so the story runs, two
    brothers sat over their winter fire in the little French town of Annonay,
    watching the grey smoke-wreaths from the hearth curl up the wide chimney.
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box span {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}

이 코드가 렌더링되면 세로로 쓰여진 텍스트 중간에 "November"라는 단어만 가로로 누워있는 인라인 블록 형태가 됩니다.

또한, (부모와 쓰기 모드가 다른) 블록 레벨 박스는 새로운 블록 서식 문맥(block formatting context, BFC)을 형성합니다. 즉, 내부 디스플레이 타입이 flow인 요소가 계산된 디스플레이 타입으로 flow-root를 부여받게 된다는 뜻입니다.

이 현상은 다음 예제에서 확인할 수 있습니다. horizontal-tb 쓰기 모드로 표시되는 내부의 <div>는 자신의 내부에 띄워진(float) 요소를 포함하고 있는데, 이는 이 <div>가 부모(vertical-rl)와 쓰기 모드가 달라지면서 스스로 새로운 BFC를 형성하여 내부의 float을 가두었기(contained) 때문입니다.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <div>
    <div class="float"></div>
    This box should establish a new BFC.
  </div>

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}
.box > div {
  writing-mode: horizontal-tb;
  padding: 10px;
  border: 1px solid rebeccapurple;
}
.float {
  width: 100px;
  height: 150px;
  background-color: rebeccapurple;
  float: left;
}

대체 요소 (Replaced elements)

이미지(images)와 같은 대체 요소(replaced elements)는 writing-mode 속성이 바뀐다고 해서 자신이 가진 방향(orientation)이 회전하지는 않습니다. 하지만 텍스트를 포함하고 있는 폼 컨트롤(form controls) 같은 대체 요소들은 현재 사용 중인 쓰기 모드의 방향과 일치하게 회전되어야 합니다.

<div class="box">
  <p>
    One November night in the year 1782, so the story runs, two brothers sat
    over their winter fire in the little French town of Annonay, watching the
    grey smoke-wreaths from the hearth curl up the wide chimney.
  </p>

  <img
    alt="a colorful hot air balloon against a clear sky"
    src="[https://mdn.github.io/shared-assets/images/examples/balloon.jpg](https://mdn.github.io/shared-assets/images/examples/balloon.jpg)" />

  <p>
    Their names were Stephen and Joseph Montgolfier, they were papermakers by
    trade, and were noted as possessing thoughtful minds and a deep interest in
    all scientific knowledge and new discovery.
  </p>
</div>

body {
  font: 1.2em sans-serif;
}
.box {
  writing-mode: vertical-rl;
}

결과 화면을 보면 텍스트들은 세로로 돌아가 있지만, <img> 태그(대체 요소)로 삽입된 열기구 사진은 옆으로 눕지 않고 정상적인 가로 방향 그대로 표시되는 것을 볼 수 있습니다.

논리적 속성과 값 (Logical properties and values)

horizontal-tb가 아닌 다른 쓰기 모드로 작업하기 시작하면, 화면의 물리적 차원(가로, 세로 등)에 매핑되어 있던 수많은 속성과 값들이 갑자기 이상하게 동작하는 것처럼 느껴집니다.

예를 들어, 박스에 100px의 width(너비)를 부여한다고 해보죠. horizontal-tb 환경에서는 이것이 인라인 방향(글자가 써지는 가로 방향)의 크기를 제어합니다. 하지만 vertical-lr 환경에서는 텍스트와 함께 너비의 방향이 회전하지 않기 때문에, width 속성이 인라인 방향이 아닌 블록 방향(수평 방향, 즉 박스가 쌓이는 방향)의 크기를 제어하게 되어 버립니다!

<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  width: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  width: 100px; /* 이 width는 이제 글자의 흐름 방향이 아니라, 블록이 쌓이는 가로 두께를 의미합니다! */
  margin: 10px;
}

이런 문제를 해결하기 위해 CSS에는 block-size와 inline-size라는 논리적 속성이 등장했습니다. 블록에 100px의 inline-size를 부여한다면, 우리가 가로 쓰기 모드에 있든 세로 쓰기 모드에 있든 전혀 상관없이 inline-size는 항상 글자가 흘러가는 방향(인라인 방향)의 크기를 의미하게 됩니다.

💡 강사의 기술 면접 대비 팁!
"왜 width/height 대신 inline-size/block-size 같은 논리적 속성을 사용하는 것이 좋은가요?"
이 질문에 대한 모범 답안이 바로 위 내용입니다! "다국어를 지원하여 쓰기 모드(writing-mode)가 변경되는 환경에서도 레이아웃이 깨지지 않고 유연하게 대응할 수 있는 탄탄한 컴포넌트를 만들기 위해서입니다"라고 답변하시면 완벽합니다.

<div class="box">
  <div class="box1">Box 1</div>
  <div class="box2">Box 2</div>
</div>

body {
  font: 1.2em sans-serif;
}
.box1 {
  writing-mode: horizontal-tb;
  border: 5px solid rebeccapurple;
  inline-size: 100px;
  margin: 10px;
}
.box2 {
  writing-mode: vertical-lr;
  border: 5px solid rebeccapurple;
  inline-size: 100px; /* 세로 쓰기에서는 세로 길이가 100px이 됩니다! */
  margin: 10px;
}

CSS 논리적 속성과 값(CSS logical properties and values) 모듈에는 여백(margin), 패딩(padding), 테두리(border)를 제어하는 속성들의 논리적 버전이 모두 포함되어 있으며, 우리가 과거에 물리적 방향(top, right, bottom, left)을 지정하기 위해 사용했던 방식들을 대체할 수 있는 매핑을 제공합니다.

요약 (Summary)

대부분의 경우, 문서 전체나 개별 섹션의 쓰기 모드를 변경하더라도 플로우 레이아웃은 우리가 예상한 대로 잘 작동합니다. 이는 세로 쓰기 언어를 올바르게 조판하거나 창의적인 디자인을 표현하는 데 유용하게 쓰일 수 있습니다.
또한 CSS 논리적 속성과 값을 사용하면, 요소의 인라인 크기와 블록 크기를 기반으로 세로 쓰기 모드에서의 크기를 쉽게 지정할 수 있습니다. 이는 다양한 쓰기 모드 환경에서도 완벽하게 작동하는 재사용 가능한 컴포넌트를 구축하는 데 매우 중요합니다.