Inline layout/Inline formatting context

김동현·2026년 3월 21일
CSSdocs

mdn 학습 번역 - CSS

목록 보기
86/190

안녕하세요! 프론트엔드 개발 강사입니다. 이번에 가져오신 문서는 텍스트와 인라인 요소들이 화면에 어떻게 배치되는지를 다루는 인라인 서식 컨텍스트(Inline formatting context)에 대한 내용이네요!

블록(Block) 요소가 위아래로 큼직하게 쌓이는 상자라면, 인라인(Inline) 요소는 그 상자 안에서 글자들과 함께 물 흐르듯 옆으로 나란히 배치되는 작은 조각들입니다. 실무에서 텍스트 정렬(text-align)이나 수직 정렬(vertical-align)이 내 마음대로 움직이지 않아 답답하셨다면, 바로 이 문서를 통해 그 원리를 깨달으실 수 있을 거예요. 이번에도 딱딱한 직역 대신 이해하기 쉬운 구어체와 제 실무 꿀팁을 듬뿍 담아 꼼꼼히 번역해 드리겠습니다! 😊

인라인 서식 컨텍스트 (Inline formatting context)

이 가이드에서는 인라인 서식 컨텍스트(inline formatting context)에 대해 자세히 알아봅니다.

이 문서의 내용

핵심 개념 (Core concepts)

인라인 서식 컨텍스트는 웹 페이지를 시각적으로 렌더링하는 과정의 일부분입니다. 인라인 박스(Inline boxes)들은 현재 사용 중인 쓰기 모드(writing mode)에서 문장(글자)이 흘러가는 방향을 따라 하나씩 차례대로 나란히 배치됩니다.

  • 가로 쓰기 모드(horizontal writing mode)에서는 박스들이 왼쪽에서 시작하여 가로로(horizontally) 배치됩니다.
  • 세로 쓰기 모드(vertical writing mode)에서는 위쪽에서 시작하여 세로로(vertically) 배치됩니다.

아래 예제에서, 검은색 테두리가 있는 두 개의 <div> 요소는 서로 간에 블록 서식 컨텍스트(block formatting context)에 참여하고 있습니다 (그래서 위아래로 쌓여있죠). 하지만 각 박스 내부에 있는 단어들은 '인라인 서식 컨텍스트'에 참여하게 됩니다. 가로 쓰기 모드의 단어들은 가로로 흘러가고, 세로 쓰기 모드의 단어들은 세로로 흘러가는 것을 볼 수 있습니다.

(MDN Playground에서 실행해보기 (Play))

<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
body {
  font: 1.2em sans-serif;
}
.example {
  border: 5px solid black;
  margin: 20px;
}

.horizontal {
  writing-mode: horizontal-tb;
}
.vertical {
  writing-mode: vertical-rl;
}

👨‍🏫 강사의 실무 팁! "라인 박스(Line Box)란 무엇인가요?"
인라인 요소들을 이해할 때 가장 중요한 개념이 바로 라인 박스(Line box)입니다! 한 줄에 나란히 놓인 글자나 인라인 요소들을 모두 포함할 수 있도록 브라우저가 보이지 않게 그려놓은 '가상의 가로줄 상자'라고 생각하시면 돼요. 텍스트가 길어져서 줄바꿈이 일어나면, 새로운 라인 박스가 밑에 하나 더 생기는 원리랍니다.

한 줄을 이루는 박스들은 라인 박스(line box)라고 불리는 직사각형 영역에 포함됩니다. 이 라인 박스는 해당 줄에 있는 모든 인라인 박스들을 다 담을 수 있을 만큼 충분히 크게 만들어집니다. 인라인 방향(가로 방향)으로 더 이상 공간이 없으면, 콘텐츠가 끊어지면서 새로운 줄(새로운 라인 박스)이 생성됩니다. 따라서 단락(paragraph)이라는 것은 결국 블록 방향(세로 방향)으로 차곡차곡 쌓여 있는 '라인 박스'들의 집합이라고 볼 수 있습니다.

하나의 인라인 박스가 줄바꿈 때문에 둘로 쪼개질(split) 때, 쪼개진 그 지점(줄바꿈이 일어난 끝과 시작 부분)에는 마진(margins), 테두리(borders), 패딩(padding)이 시각적인 영향을 미치지 않습니다. (즉, 줄바꿈 된 곳에는 테두리가 그려지지 않고 뻥 뚫리게 됩니다.)
다음 예제에는 두 줄에 걸쳐 줄바꿈이 일어나는 여러 단어들을 감싸고 있는 <span> 요소가 있습니다. <span>에 적용된 테두리(border)가 줄이 넘어가는 지점에서 끊어져(breaks) 있는 것을 확인해 보세요.

(MDN Playground에서 실행해보기 (Play))

<div class="example">
  Before that night—
  <span
    >a memorable night, as it was to prove— hundreds of millions of people</span
  >
  had watched the rising smoke-wreaths of their fires without drawing any
  special inspiration from the fact.
</div>
body {
  font: 1.2em sans-serif;
}
.example {
  border: 5px solid black;
  margin: 20px;
}

span {
  border: 5px solid rebeccapurple;
}

물론 쪼개진 단면이 아니라 정상적인 인라인 방향(줄의 양 끝, 왼쪽과 오른쪽)에 적용된 마진, 테두리, 패딩은 규칙대로 잘 적용됩니다. 아래 예제에서 인라인 <span> 요소에 패딩과 마진, 테두리가 어떻게 추가되어 옆 글자들을 밀어내는지 확인해 보세요.

(MDN Playground에서 실행해보기 (Play))

<div class="example horizontal">One <span>Two</span> Three</div>
<div class="example vertical">Four <span>Five</span> Six</div>
body {
  font: 1.2em sans-serif;
}

.example {
  border: 5px solid black;
  margin: 20px;
}

span {
  border: 5px solid rebeccapurple;
  padding-inline-start: 20px;
  padding-inline-end: 40px;
  margin-inline-start: 30px;
  margin-inline-end: 10px;
}
.horizontal {
  writing-mode: horizontal-tb;
}

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

📝 참고:
위 예제에서는 padding-left 대신 논리적이고 흐름에 상대적인(flow-relative) 속성인 padding-inline-start를 사용했습니다. 이렇게 하면 텍스트가 가로 쓰기든 세로 쓰기든 상관없이 항상 인라인(글자가 흐르는) 방향을 기준으로 올바르게 작동하게 됩니다. 이러한 속성들에 대해 더 알고 싶다면 논리적 속성과 값(Logical Properties and Values) 가이드를 읽어보세요.

블록 방향에서의 정렬 (Alignment in the block direction)

인라인 박스들은 vertical-align 속성을 사용하여 블록 방향(가로 쓰기 기준으로는 세로 방향)으로 다양하게 정렬될 수 있습니다. (참고로 세로 쓰기 모드에서는 블록 축이 가로가 되므로, 이름이 vertical-align이더라도 실제로는 가로로 정렬되게 됩니다!)

아래 예제에서는 글자 크기가 유독 큰 텍스트(span)가 첫 번째 문장의 라인 박스(line box) 높이를 전체적으로 위아래로 훌쩍 키워버리고 있습니다. 이럴 때 vertical-align 속성을 사용하면, 덩치가 커진 인라인 박스 옆에 있는 나머지 작은 인라인 박스들을 어느 쪽에 맞춰 정렬할지 조절할 수 있습니다. 예제에서는 top 값을 사용했는데, 이 값을 middle, bottom, 또는 baseline으로 직접 변경해 보면서 어떻게 움직이는지 테스트해 보세요.

💡 강사의 실무 팁! "vertical-align은 마법이 아닙니다"
초보 시절, <div> 안의 요소를 세로 중앙 정렬하고 싶어서 vertical-align: middle;을 줬는데 아무 반응이 없어서 당황한 적 없으신가요?
vertical-align은 블록 요소(div, p 등)를 정렬하는 속성이 아닙니다! 오직 '같은 줄(Line Box) 안에 있는 인라인 요소들끼리 서로 키를 맞출 때' 사용하거나, 테이블 셀(display: table-cell) 안에서만 작동합니다. 부모 박스를 기준으로 중앙 정렬을 하고 싶다면 요즘은 Flexbox(align-items: center)를 쓰는 것이 훨씬 좋습니다!

(MDN Playground에서 실행해보기 (Play))

<div class="example horizontal">
  Before that night—<span>a memorable night</span>, 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.
</div>

<div class="example vertical">
  Before that night—<span>a memorable night</span>, 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.
</div>
body {
  font: 1.2em sans-serif;
}

span {
  font-size: 200%;
  vertical-align: top; /* 이 값을 middle, bottom, baseline 등으로 바꿔보세요! */
}

.example {
  border: 5px solid black;
  margin: 20px;
  inline-size: 400px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

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

인라인 방향에서의 정렬 (Alignment in the inline direction)

만약 인라인 방향(가로 방향)으로 빈 공간이 남아있다면, text-align 속성을 사용하여 라인 박스 내부에 있는 인라인 박스들을 한쪽으로 정렬할 수 있습니다. 아래 예제 코드에서 text-align 값을 end로 바꿔보세요. (글자들이 끝쪽으로 찰싹 달라붙을 거예요!)

👨‍🏫 강사의 실무 팁! "text-align은 누구한테 줘야 하나요?"
vertical-align은 정렬하고 싶은 인라인 요소 본인(예: <img>나 <span>)에게 직접 줍니다. 하지만 text-align은 정렬하고 싶은 인라인 요소들의 부모 블록 요소(예: <div>, <p>)에게 주어야 작동합니다! 자식들을 지휘하는 건 부모니까요.

(MDN Playground에서 실행해보기 (Play))

<div class="example horizontal">One Two Three</div>
<div class="example vertical">Four Five Six</div>
body {
  font: 1.2em sans-serif;
}

.example {
  border: 5px solid black;
  margin: 20px;
}

.horizontal {
  writing-mode: horizontal-tb;
}

.vertical {
  writing-mode: vertical-rl;
}
.example {
  text-align: center; /* 이 부분을 end, start 등으로 변경해 보세요. */
  inline-size: 250px;
}

플롯(Float) 요소가 미치는 영향 (Effect of floats)

일반적으로 하나의 블록 안에 있는 라인 박스(line boxes)들은 인라인 방향으로 모두 동일한 크기를 가집니다. 즉, 가로 쓰기 모드에서는 너비(width)가 모두 같고, 세로 쓰기 모드에서는 높이(height)가 모두 같죠.

하지만, 만약 같은 블록 서식 컨텍스트(BFC) 내부에 float 된 요소가 있다면 이야기가 달라집니다. 이 float 된 요소를 피해서 글자가 흘러가야(wrap) 하기 때문에, float 요소의 옆을 지나가는 라인 박스들은 부딪히지 않기 위해 너비가 짧아지게 됩니다.

(MDN Playground에서 실행해보기 (Play))

<div class="box">
  <div class="float">I am a floated box!</div>
  <p>I am content inside the container.</p>
</div>
body {
  font: 1.2em sans-serif;
}

.box {
  background-color: rgb(224 206 247);
  border: 5px solid rebeccapurple;
}

.float {
  float: left;
  width: 250px;
  height: 150px;
  background-color: white;
  border: 1px solid black;
  padding: 10px;
}

💡 설명 추가: float: left가 적용된 흰색 박스 때문에, 뒤에 오는 <p> 안의 텍스트(라인 박스)가 전체 너비를 쓰지 못하고 좁아져서 흐르는 걸 볼 수 있습니다. 이것이 바로 예전 신문 레이아웃처럼 글자가 이미지를 감싸고 도는(Text Wrapping) 효과를 만드는 핵심 원리랍니다!

같이 보기 (See also)

MDN 개선에 참여하기 (Help improve MDN)

이 페이지가 도움이 되셨나요? [네 (Yes)] / [아니요 (No)]

기여하는 방법 알아보기 (Learn how to contribute)

이 페이지는 2025년 11월 7일에 MDN 기여자들 (MDN contributors)에 의해 마지막으로 수정되었습니다.

profile
김동현
프론트에_가까운_풀스택_개발자
이전 포스트

Display/Block formatting context

다음 포스트

Display/Using multi-keyword syntax

0개의 댓글