요소 내의 콘텐츠의 크기가 정해진 요소 영역을 벗어나는 경우에 가로, 세로 방향으로 벗어나는 콘텐츠를 속기 방식으로 설정한다.
overflow
속성 값이 visible
과 clip
의 경우 overflow-x
또는 overflow-y
속성 값중 하나가 표시되지 않거나 클리핑(clipping)되지 않았다면 각각 auto
와 hidden
값으로 계산된다.
overflow
속성은 일반적으로 컨테이너 요소에게 적용하지만 만약에 body
요소에게 적용시 높이가 고정되어 있다 하더라도 hidden
값이 적용되지 않는다. body
는 특별한 요소로서 뷰포트와 관계가 매우 깊다. body
에게 설정된 overflow
속성의 값은 뷰포트에 적용되도록 이동이 된다. 콘텐츠가 뷰포트 영역에 모두 표시된다면 overflow
값은 의미가 없다고 볼 수 있다. 그럼에도 body
에게 높이를 지정하고 overflow
속성이 적용되기를 원한다면 루트(html
) 요소에게 overflow
속성을 기본 값이 아닌 값으로 지정하면 된다.
[ <overflow> ]{1,2}
overflow-x
와 overflow-y
속성의 값을 순서대로 설정한다. 두 번째 값을 생략하면 첫 번째 값을 사용한다.
요소 내의 콘텐츠중 첫 번째 p
요소에게 가로 크기를 명시했다. 따라서 overflow
속성 값이 scroll hidden
이므로 overflow-x
속성은 스크롤을 표시하고 overflow-y
는 벗어나는 콘텐츠를 숨긴다.
아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다.
visible | hidden | clip | scroll | auto
요소 밖으로 콘텐츠가 벗어나는 경우에만 스크롤이 가능하도록 하고 그렇지 않은 경우에는 스크롤 영역을 표시하지 않는다.
overflow-clip-margin
속성에 의해 정의된 값에 따라 콘텐츠를 자르고 hidden
값과 다르게 프로그래밍 방식의 스크롤을 허용하지 않는다.
요소 밖의 콘텐츠를 숨긴다.
요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다. auto
에 비해 가지는 장점은 동적인 처리를 통해 콘텐츠의 양을 예측할 수 없는 경우에 스크롤바가 나타나고 사라지는 문제를 해결할 수 있다. 대상 매체가 인쇄인 경우에는 밖으로 벗어난 내용이 인쇄될 수 있다.
요소 밖의 콘텐츠를 표시한다.
모든 속성을 표시하지 않을 수도 있다.
정해진 크기의 요소 내 콘텐츠가 넘치는 경우 가로 방향으로 어떻게 처리할 것인지를 설정한다.
정해진 크기의 요소 내 콘텐츠가 넘치는 경우 세로 방향으로 어떻게 처리할 것인지를 설정한다.
다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.
요소 밖의 콘텐츠를 표시한다.
요소 밖으로 콘텐츠가 벗어나는 경우에만 스크롤이 가능하도록 하고 그렇지 않은 경우에는 스크롤 영역을 표시하지 않는다.
overflow-clip-margin
속성에 의해 정의된 값에 따라 콘텐츠를 자르고 hidden
값과 다르게 프로그래밍 방식의 스크롤을 허용하지 않는다.
요소 밖의 콘텐츠를 숨긴다.
요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다. auto
에 비해 가지는 장점은 동적인 처리를 통해 콘텐츠의 양을 예측할 수 없는 경우에 스크롤바가 나타나고 사라지는 문제를 해결할 수 있다. 대상 매체가 인쇄인 경우에는 밖으로 벗어난 내용이 인쇄될 수 있다.
overflow: auto;
Modules | ||
---|---|---|
Module Name | Status | Summary |
CSS Overflow Module Level 3 | 초안 작업 | Last review date: 2022-10-20 |