🌱 기초 프론트엔드
CSS overflow가 뭔가요?
쉽게 이해하기
상자에 물건을 너무 많이 넣으면 넘쳐서 바닥에 떨어지잖아요? CSS overflow는 상자 밖으로 나간 물건을 '그냥 둘지', '숨길지', '스크롤로 볼 수 있게 할지'를 정하는 거예요.
핵심 정리
요소의 크기를 넘친 콘텐츠를 어떻게 처리할지 결정하는 속성이에요.
자세히 알아보기
overflow는 요소의 지정된 크기보다 콘텐츠가 클 때 어떻게 보여줄지 제어하는 CSS 속성이에요. 주요 값으로는 `visible`(기본, 넘쳐도 보임), `hidden`(넘친 부분 숨김), `scroll`(스크롤바 생성), `auto`(필요할 때만 스크롤바)가 있어요.
실무에서 가장 흔한 사용 예는 긴 텍스트나 이미지가 있는 컨테이너예요. 예를 들어 채팅 앱에서 메시지 목록이 길어지면 `overflow-y: auto`로 세로 스크롤만 만들어요. 카드 디자인에서 제목이 길면 `overflow: hidden`과 `text-overflow: ellipsis`를 함께 써서 '...'으로 표시하기도 해요.
`overflow: hidden`은 단순히 콘텐츠를 숨기는 것 외에도 활용돼요. float를 쓸 때 부모 요소가 자식의 높이를 인식하게 만드는 clearfix 기법이나, 모달 창을 열었을 때 뒤의 페이지 스크롤을 막는 데도 쓰여요.
모바일에서는 특히 중요해요. 작은 화면에서 스크롤 영역을 명확히 제어해야 사용자 경험이 좋아지거든요. 예를 들어 헤더는 고정하고 본문만 스크롤되게 하려면 본문에 `overflow-y: auto`를 쓰고 높이를 지정해요. overflow를 잘 다루면 레이아웃이 깨지지 않고 안정적으로 동작해요.