Display/Flow layout and overflow

김동현·2026년 3월 21일

mdn 학습 번역 - CSS

목록 보기

80/190

안녕하세요! 프론트엔드 개발 강사 역할을 맡은 AI 제미나이(Gemini)입니다. CSS의 핵심인 레이아웃의 흐름(Flow)과 넘침(Overflow)에 대해 다루는 MDN 문서를 가져오셨군요!

영문 문서라 내용이 바로 와닿지 않아 조금 답답하셨을 텐데, 제가 딱딱한 직역 대신 이해하기 쉬운 구어체로 꼼꼼하게 번역해 드릴게요. 실무에서 정말 자주 쓰이는 내용이라 중간중간 제 경험을 담은 꿀팁도 팍팍 추가해 두었으니 찬찬히 읽어보세요! 😊

흐름 레이아웃과 넘침 (Flow layout and overflow)

컨테이너(상자)에 들어갈 수 있는 양보다 콘텐츠(내용물)가 더 많을 때, 바로 넘침(overflow) 현상이 발생합니다. CSS에서 크기가 제한된 요소를 다룰 때 이 넘침 현상이 어떻게 동작하는지 이해하는 것은 매우 중요해요. 이 가이드에서는 일반적인 흐름(normal flow)에서 작업할 때 넘침이 어떻게 작동하는지 설명해 드릴게요.
(참고로 각 예제에서 사용된 HTML은 동일하기 때문에 첫 번째 섹션에서만 보여드리고, 나머지 섹션에서는 글이 너무 길어지지 않도록 생략했습니다.)

이 문서의 내용

넘침(overflow)이란 무엇인가요? (What is overflow?)
넘침 제어하기 (Controlling overflow)
흐름 상대적 속성들 (Flow Relative Properties)
넘침 표시하기 (Indicating Overflow)
요약 (Summary)
같이 보기 (See also)

넘침(overflow)이란 무엇인가요? (What is overflow?)

요소에 고정된 높이(height)와 너비(width)를 주고, 그 박스에 엄청나게 많은 콘텐츠를 집어넣으면 기본적인 넘침(overflow) 현상이 만들어집니다:

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

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

body {
  font: 1.2em / 1.5 sans-serif;
}

.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

콘텐츠는 박스 안으로 들어갑니다. 하지만 박스를 가득 채우고 나면, 콘텐츠는 박스 바깥으로 눈에 보이게 넘쳐흐르게 되며, 심지어 박스 아래에 있는 다른 콘텐츠들과 겹쳐서 표시될 수도 있어요. 이렇게 넘쳐흐르는 콘텐츠가 어떻게 행동할지 제어하는 속성이 바로 overflow 속성입니다. 이 속성의 기본 초기값은 visible(보임)이에요. 이것이 바로 우리가 박스를 빠져나온 넘친 콘텐츠를 눈으로 볼 수 있는 이유랍니다.

👨‍🏫 강사의 실무 팁! "왜 내용이 넘칠까요?"
처음 코딩을 하실 때 많이들 하시는 실수가 박스에 height: 100px;처럼 고정된 높이를 줘버리는 거예요. 웹 환경에서는 사용자가 폰트 크기를 키울 수도 있고 모바일 화면처럼 폭이 좁아져서 내용이 세로로 길어질 수도 있거든요. 특별한 이유가 없다면 height를 고정하기보다는 텍스트 양에 따라 자연스럽게 늘어나도록 두거나 min-height를 사용하는 것이 좋습니다!

넘침 제어하기 (Controlling overflow)

넘쳐흐르는 콘텐츠가 어떻게 작동할지 제어하는 다른 값들도 있습니다. 넘치는 콘텐츠를 숨기고 싶다면 hidden 값을 사용하면 됩니다. 하지만 이 경우 콘텐츠의 일부가 사용자에게 보이지 않게 될 수 있으니 주의해야 해요.

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: hidden;
}

scroll 값을 사용하면 콘텐츠를 박스 안에 가두고, 콘텐츠를 볼 수 있도록 스크롤바를 추가해 줍니다. 주의할 점은, 콘텐츠가 박스 안에 다 들어가서 넘치지 않더라도 스크롤바가 무조건 항상 표시된다는 거예요.

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: scroll;
}

auto 값을 사용하면 콘텐츠가 박스 안에 다 들어갈 때는 스크롤바 없이 깔끔하게 보여줍니다. 하지만 내용이 넘치게 되면 그때서야 스크롤바가 추가되죠. 이 다음 예제와 비교해 보세요. 위의 overflow: scroll 예제는 세로 방향(위아래)으로만 스크롤이 필요한 상황인데도 불필요한 가로 방향(좌우) 스크롤바까지 만들어져 있습니다. 하지만 아래의 auto 예제는 우리가 스크롤이 실제로 필요한 방향(세로)으로만 스크롤바를 똑똑하게 추가해 줍니다.

💡 강사의 실무 팁! overflow: scroll 보다는 overflow: auto
실무에서는 무조건 scroll보다는 auto를 훨씬 많이 씁니다! 맥(macOS)이나 스마트폰에서는 스크롤바가 평소에 숨어있어서 큰 차이가 없어 보일 수 있지만, 윈도우(Windows) 환경에서 scroll을 쓰면 내용이 넘치지 않아도 항상 회색의 흉측한 비활성화 스크롤바가 화면을 차지하게 되어서 디자인을 깎아먹거든요. auto가 훨씬 유저 친화적인 선택입니다!

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow: auto;
}

우리가 이미 배운 것처럼, 기본값인 visible을 제외한 위와 같은 값(hidden, scroll, auto 등)들을 사용하게 되면, 새로운 블록 서식 컨텍스트(block formatting context)가 생성됩니다.

overflow: clip은 overflow: hidden과 비슷하게 작동합니다. 하지만 clip은 자바스크립트 등을 이용한 프로그래밍적인 스크롤(programmatic scrolling)조차 허용하지 않습니다. 박스가 아예 스크롤 불가능한 상태가 되어버리죠. 또한 clip은 새로운 블록 서식 컨텍스트를 생성하지 않는다는 차이점도 있습니다.

사실 overflow 속성은 overflow-x (가로)와 overflow-y (세로) 속성을 한 번에 지정하는 단축 속성(shorthand)입니다. overflow에 값을 하나만 지정하면, 그 값이 가로와 세로 두 축 모두에 동일하게 적용됩니다. 하지만 값을 두 개 지정할 수도 있는데, 첫 번째 값은 overflow-x(가로 방향)에 적용되고 두 번째 값은 overflow-y(세로 방향)에 적용됩니다. 아래 예제에서는 제가 overflow-y: scroll만 지정했기 때문에 원치 않는 가로 스크롤바가 생기지 않는 것을 볼 수 있습니다.

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  height: 100px;
  border: 5px solid rebeccapurple;
  padding: 10px;
  overflow-y: scroll;
}

흐름 상대적 속성들 (Flow Relative Properties)

쓰기 모드와 흐름 레이아웃(Writing Modes and Flow Layout) 가이드에서 우리는 화면의 물리적 크기에 레이아웃을 묶어버리는 대신 다양한 언어의 쓰기 모드(예: 세로쓰기 등)에 유연하게 대처할 수 있는 block-size와 inline-size 속성을 살펴보았습니다. CSS 넘침 모듈(CSS overflow module)에도 이렇게 흐름 방향에 상대적인 넘침 제어 속성들이 있습니다. 바로 overflow-block과 overflow-inline입니다. 이 속성들은 각각 overflow-x, overflow-y에 대응하지만, 가로/세로가 문서의 쓰기 모드(가로로 글을 쓰는지, 세로로 글을 쓰는지)에 따라 똑똑하게 매핑되어 적용됩니다.

넘침 표시하기 (Indicating Overflow)

CSS 넘침 모듈(CSS overflow module)에는 내용이 넘치는 상황에서 콘텐츠를 좀 더 보기 좋게 처리할 수 있도록 도와주는 속성들이 있습니다.

인라인 축 넘침 (Inline-Axis Overflow)

text-overflow 속성은 인라인 방향(가로 쓰기 기준으로는 가로 방향)으로 넘치는 텍스트를 어떻게 처리할지 다룹니다. 이 속성은 두 가지 값 중 하나를 가질 수 있습니다. clip은 넘치는 콘텐츠를 그대로 싹둑 잘라내는 값으로, 이것이 초기값이자 기본 동작입니다. 반면 ellipsis 값을 사용하면 텍스트가 잘리는 끝부분에 말줄임표(...)를 렌더링해 줍니다. (사용 중인 언어나 쓰기 모드에 따라 ... 대신 더 적절한 문자로 대체될 수도 있습니다.)

💡 강사의 실무 팁! "말줄임표(...) 만드는 마법의 3줄"
실무에서 게시판 제목이나 닉네임이 너무 길 때 ...으로 예쁘게 자르는 UI, 정말 밥 먹듯이 만들게 되실 거예요! 그런데 막상 text-overflow: ellipsis; 한 줄만 달랑 써놓고 왜 안되냐고 질문하시는 분들이 정말 많습니다. 말줄임표를 만들려면 반드시 다음 3줄을 세트로 써주셔야 해요!
1. white-space: nowrap; (글씨가 밑으로 줄바꿈 되지 않게 가로로 쫙 펴주기)
2. overflow: hidden; (박스를 넘어간 글씨들 숨기기)
3. text-overflow: ellipsis; (숨겨진 부분 끝에 ... 표시하기)

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

body {
  font: 1.2em / 1.5 sans-serif;
}
.box {
  width: 300px;
  border: 5px solid rebeccapurple;
  padding: 10px;
}

.box p {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

블록 축 넘침 (Block-Axis Overflow)

넘침 모듈 레벨 4(Overflow Module Level 4) 사양에서는 block-ellipsis라는 속성을 새롭게 추가했습니다 (이전에는 block-overflow라고 불렸습니다). 이 속성은 텍스트가 블록(세로) 방향으로 넘칠 때 말줄임표나 원하는 사용자 정의 문자열을 추가할 수 있게 해 줍니다. (참고: 아쉽게도 이 글을 쓰는 시점에서는 아직 이를 지원하는 브라우저가 없습니다.)

이 기능이 지원되면, 예를 들어 고정된 높이의 박스 안에 제한된 양의 텍스트만 보여주는 기사 목록(article listings) 레이아웃을 만들 때 아주 유용할 것입니다. 박스가 그냥 싹둑 잘려 있으면 사용자는 이 글을 클릭했을 때 더 읽을거리가 남아있다는 사실을 눈치채기 어려울 수 있습니다. 이럴 때 말줄임표가 있다면 뒤에 숨겨진 내용이 더 있다는 것을 확실하게 나타내 줄 수 있죠. 사양서에 따르면 기본 말줄임표(...) 외에도 "더 보기" 같은 특정한 문자열을 삽입하는 것도 가능해질 예정입니다.

요약 (Summary)

여러분이 웹처럼 화면 크기가 쑥쑥 변하는 연속적인 미디어(continuous media)를 다루든, 아니면 프린트 인쇄물이나 EPUB 같은 페이지 기반 미디어(Paged Media)를 다루든, 콘텐츠가 어떻게 넘쳐흐르는지를 이해하는 것은 어떤 레이아웃을 만들 때나 아주 큰 도움이 됩니다. 기본 흐름(normal flow)에서 넘침(overflow)이 어떻게 작동하는지를 확실히 이해하고 나면, 앞으로 배우게 될 Grid(그리드)나 Flexbox(플렉스박스) 같은 강력한 최신 레이아웃에서도 넘치는 콘텐츠를 어떻게 다뤄야 할지 훨씬 쉽게 응용하고 이해할 수 있을 것입니다.