Display/Flow layout

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

79/190

안녕하세요! 오늘 번역해 볼 MDN 공식 문서는 CSS 레이아웃의 가장 기본이자 핵심인 CSS 플로우 레이아웃 (CSS flow layout)입니다.

프론트엔드 개발자 면접에서 "CSS의 position 속성값들에 대해 설명해 보세요" 혹은 "Normal Flow가 무엇인가요?"라는 질문은 기본기 확인용으로 아주 자주 등장합니다. 우리가 화면에 요소들을 배치할 때 브라우저가 아무런 개입 없이 기본적으로 요소들을 어떻게 그려내는지(Normal Flow)를 이해해야만, Flexbox, Grid, 혹은 position: absolute 등을 써서 요소를 '흐름에서 벗어나게(out of flow)' 만들 때 발생하는 변화를 정확히 통제할 수 있습니다.

웹 프로필이나 독후감 사이트의 구조를 잡을 때도 뼈대가 되는 개념이니, 함께 확실히 짚고 넘어가 볼까요?

CSS 플로우 레이아웃 (CSS flow layout)

일반적인 흐름(Normal Flow), 또는 플로우 레이아웃(Flow Layout)은 브라우저가 페이지의 레이아웃에 어떠한 변경도 가하지 않았을 때 블록(block) 요소와 인라인(inline) 요소가 페이지에 표시되는 기본적인 방식을 말합니다. 이 흐름(flow)은 본질적으로 레이아웃 내에서 서로를 인식하고 함께 작동하는 요소들의 집합입니다. 만약 어떤 요소가 이 흐름에서 벗어나게(out of flow) 되면, 그 요소는 다른 요소들과 독립적으로 작동하게 됩니다.

정상적인 흐름(normal flow)에서, 인라인(inline) 요소들은 인라인 방향(inline direction)으로 표시됩니다. 즉, 문서의 쓰기 모드(Writing Mode)에 따라 문장 속의 단어들이 배열되는 방향을 따릅니다. 블록(block) 요소들은 마치 문서의 쓰기 모드에서 문단(paragraphs)들이 나열되는 것처럼 하나씩 차례대로 표시됩니다. 따라서 영어나 한국어처럼 좌에서 우로, 위에서 아래로 쓰는 언어 환경에서는 인라인 요소는 왼쪽에서 시작하여 차례대로(가로로) 표시되고, 블록 요소는 맨 위에서 시작하여 페이지의 아래로(세로로) 이동하며 표시됩니다.

💡 강사의 실무 면접 팁!
"Out of flow(흐름에서 벗어남) 상태로 만드는 CSS 속성에는 어떤 것들이 있나요?"라는 질문에, float: left/right와 position: absolute, position: fixed를 답변할 수 있어야 합니다. 이 속성들이 부여된 요소는 Normal Flow에서 빠져나와 붕 뜨게 되며, 주변의 다른 요소들은 마치 이 요소가 없는 것처럼 빈자리를 채우며 배치됩니다.

기본 예제 (Basic Example)

다음 예제는 블록 레벨(Block Level) 상자와 인라인 레벨(Inline Level) 상자가 어떻게 표시되는지 보여줍니다. 초록색 테두리가 있는 두 개의 문단(<p>) 요소는 블록 레벨 요소이기 때문에, 하나가 다른 하나 아래에 수직으로 배치됩니다.

첫 번째 문장에는 파란색 배경을 가진 <span> 요소가 포함되어 있습니다. 이 요소는 인라인 레벨 요소이므로 줄바꿈 없이 문장 내의 제자리에(가로로 이어서) 표시됩니다.

<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>
  <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;
}

p {
  border: 2px solid green;
}
span {
  background-color: lightblue;
}

💡 강사의 추가 설명!
div, p, h1~h6 등은 대표적인 블록 요소이고, span, a, strong, img 등은 대표적인 인라인 요소입니다. 블록 요소는 가로 너비를 100% 차지하려 하고, 인라인 요소는 자신이 품고 있는 콘텐츠의 너비만큼만 차지한다는 점을 잊지 마세요!