한눈에 보는 정의
상자 안의 내용이 상자 크기보다 커서 밖으로 넘치는 상황, 또는 넘친 부분을 어떻게 처리할지 정하는 CSS 속성.
이런 말로 들어요
- 모바일에서 가로 스크롤이 생기는데 어디서 오버플로 나는지 찾아볼게요.
- 표가 넘치니까 이 부분만 가로 스크롤되게 해 주세요.
그림으로 보기
overflow는 내용이 상자보다 클 때 보이게 둘지, 자를지, 스크롤을 만들지 정합니다. hidden은 중요한 내용을 숨길 수 있어 주의합니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
긴 제목이나 큰 이미지가 정해진 칸보다 크면 내용이 칸 밖으로 삐져나옵니다. 이것이 오버플로입니다. CSS overflow 속성으로 그대로 보이게(visible), 잘라 내게(hidden), 스크롤이 생기게(scroll·auto) 고를 수 있습니다. 휴대폰에서 화면이 옆으로 밀리는 문제도 어딘가 오버플로가 생긴 경우가 많습니다.
실무 예시
예를 들어 요금표가 휴대폰에서 화면 밖으로 넘친다면, 표를 감싼 상자에 overflow-x: auto를 주어 표만 옆으로 밀어 보게 할 수 있습니다.
함께 살펴볼 점
넘치는 문제를 overflow: hidden으로 감추면 중요한 내용이 잘려 안 보일 수 있습니다. 먼저 넘치는 원인(고정 너비, 긴 단어, 큰 이미지)을 고치고, 잘라 낼 때는 내용이 사라지지 않는지 확인합니다.
AI에게 이렇게 요청해 보세요
휴대폰 화면에서 페이지가 옆으로 밀리는 문제가 있어. 어떤 요소가 넘치는지 찾는 방법과, 표만 가로 스크롤되게 고치는 CSS를 알려 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- overflow - MDN 새 창
overflow 속성의 값(visible, hidden, clip, scroll, auto)과 내용이 요소보다 클 때의 처리 방식을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정