overflow 제어

핵심 개념

overflow는 콘텐츠가 박스를 벗어날 때의 처리 방식입니다. visible(기본값)은 그대로 표시, hidden은 잘라내기, scroll은 항상 스크롤바, auto는 필요할 때만 스크롤바를 표시합니다. overflow:hidden은 float 해제에도 사용됩니다. overflow 값을 지우며 콘텐츠가 박스를 탈출하는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (2줄)

overflow:hidden — 이 텍스트는 박스를 벗어나면 잘립니다. 이 텍스트는 박스를 벗어나면 잘립니다.
  overflow:scroll — 스크롤로 확인 가능합니다. 이 텍스트는 박스를 벗어나면 스크롤됩니다.

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'overflow 제어' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'overflow 제어'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'overflow 제어' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'overflow 제어'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

overflow 제어는 이 3가지만 확실히 잡으세요

1.텍스트나 이미지가 컨테이너 밖으로 삐져나오면 레이아웃이 깨지는데, overflow를 모르면 대응할 수 없습니다

2.overflow: hidden은 넘친 부분을 잘라내고, scroll은 스크롤바를 강제하고, auto는 넘칠 때만 스크롤바를 표시합니다

3.다음 챕터에서 값을 변수로 관리해서 테마 변경을 한 줄로 끝내는 CSS Custom Properties를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.21 — 질문하거나 답변을 확인하세요

→

진행도 21 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)