0Pricing
CSS Academy · 강의

overflow: hidden, scroll, auto, clip

hidden, scroll, auto 및 clip 값으로 넘치는 콘텐츠를 처리하는 방식을 제어합니다.

overflow: hidden, scroll, auto, clip은(는) CoddyKit의 무료 CSS Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 CSS Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

overflow 속성 복습

overflow는 요소의 콘텐츠가 정의된 크기를 초과할 때 발생하는 동작을 제어합니다. 두 축에 동시에 적용되며, 축별로 제어하려면 overflow-x/overflow-y를 사용합니다.

overflow: visible

visible(기본값)은 콘텐츠를 상자 바깥에도 렌더링합니다. 블록 서식 지정 컨텍스트(BFC)를 만들지 않으므로 다른 요소가 넘친 콘텐츠와 겹칠 수 있습니다.

overflow: hidden

hidden은 상자 경계에서 콘텐츠를 잘라 냅니다. 플로트를 포함하고 여백 상쇄를 방지하는 BFC를 만듭니다. 둥근 모서리 이미지 컨테이너에 가장 흔히 사용하는 값입니다.

  <div class="rounded-card"></div>

overflow: scroll

scroll은 콘텐츠가 넘치는지와 관계없이 스크롤바를 항상 표시합니다(스크롤바를 지원하는 축에서). 스크롤바가 차지하는 공간을 항상 확보하여 레이아웃 이동을 방지해야 하는 일관된 사용자 인터페이스에 유용합니다.

  <div class="console">line 1<br>line 2<br>line 3<br>line 4<br>line 5<br>line 6<br>line 7<br>line 8<br>line 9<br>line 10<br>line 11<br>line 12</div>

overflow: auto

auto는 콘텐츠가 실제로 넘칠 때만 스크롤바를 표시합니다. 불필요한 스크롤바 렌더링을 방지하므로 대부분의 스크롤 가능한 컨테이너에서 scroll보다 선호됩니다.

  <div class="sidebar">Sidebar content line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5</div>

overflow: clip

clip은 hidden처럼 콘텐츠를 잘라 내지만 BFC를 만들지 않습니다. 따라서 플로트 포함이나 여백 상쇄에 영향을 주지 않습니다. BFC로 인한 부수 효과 없이 잘라 내기만 하려는 경우 사용합니다.

  <div class="decorative-overflow"><div class="deco"></div></div>

overflow-x와 overflow-y

각 축을 독립적으로 제어합니다. 매우 흔한 패턴은 넓은 콘텐츠(표, 코드)에는 가로 스크롤을 사용하고 세로 넘침은 표시하는 것입니다:

  <div class="table-wrapper">
    <table>
      <tr><th>A</th><th>B</th><th>C</th><th>D</th><th>E</th></tr>
      <tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>
    </table>
  </div>

overflow와 BFC

visible과 clip을 제외한 모든 값으로 overflow를 설정하면 블록 서식 지정 컨텍스트가 생성됩니다. 이렇게 하면 내부 플로트가 포함되고, 여백 상쇄가 바깥으로 전파되는 것을 방지하며, 새로운 스크롤 컨텍스트가 만들어집니다.

overflow: overlay(비표준)

overflow: overlay는 레이아웃 공간을 차지하지 않고 콘텐츠 위에 스크롤바를 그립니다. 일부 브라우저에서 비표준 값으로 사용되었지만, 현재는 최신 스크롤바 스타일 지정 방식으로 대체되면서 지원이 중단되는 추세입니다.

scrollbar-gutter

새로운 scrollbar-gutter: stable 속성은 스크롤바가 필요하지 않을 때도 스크롤바 공간을 예약하여 콘텐츠가 스크롤 가능해질 때 발생하는 레이아웃 이동을 방지합니다.

  <div class="container">Line 1<br>Line 2<br>Line 3<br>Line 4<br>Line 5<br>Line 6<br>Line 7</div>

overflow와 고정 위치 자식 요소

흔히 발생하는 오류가 있습니다. overflow: hidden이 설정된 요소 안의 자식 요소에 position: fixed를 지정하면 position: absolute처럼 동작합니다. 고정 위치는 포함 블록을 기준으로 하며, overflow가 새로운 쌓임 컨텍스트를 만들기 때문입니다.

빠른 확인

블록 서식 지정 컨텍스트를 만들지 않고 콘텐츠를 잘라 내는 overflow 값은 무엇인가요?

복습

visible(기본값)은 넘침을 허용합니다. hidden은 콘텐츠를 잘라 내고 BFC를 만듭니다. scroll은 스크롤바를 항상 표시합니다. auto는 필요할 때만 스크롤바를 표시하므로 선호되는 값입니다. clip은 BFC 없이 콘텐츠를 잘라 냅니다. 축별로 제어하려면 overflow-x/y를 사용합니다. 레이아웃 이동을 방지하려면 scrollbar-gutter: stable을 사용합니다.

자주 묻는 질문

“overflow: hidden, scroll, auto, clip” 강의는 무료인가요?

네 — “overflow: hidden, scroll, auto, clip” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 CSS Academy 강의 전체를 잠금 해제할 수 있습니다. CSS Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“overflow: hidden, scroll, auto, clip”에서 뭘 배우나요?

hidden, scroll, auto 및 clip 값으로 넘치는 콘텐츠를 처리하는 방식을 제어합니다. 브라우저에서 직접 실행하는 실습 코드로 CSS Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

CSS Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 CSS Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“overflow: hidden, scroll, auto, clip” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 CSS Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 CSS Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

  1. overflow: hidden, scroll, auto, clip
  2. scroll-behavior: smooth
  3. scroll-snap-type 및 scroll-snap-align
  4. ::-webkit-scrollbar로 스크롤바 스타일링
← CSS Academy(으)로 돌아가기