Properties

Properties

Editing
  • account_tree
  • bug_report

overflow

요소 내의 내용의 크기가 정해진 요소 영역을 벗어나는 경우에 처리할 방식을 설정한다.

설명

overflow 속성은 일반적으로 컨테이너 요소에게 적용하지만 만약에 body 요소에게 적용시 높이가 고정되어 있다 하더라도 hidden 값이 적용되지 않는다. body는 특별한 요소로서 뷰포트와 관계가 매우 깊다. body에게 설정된 overflow 속성의 값은 뷰포트에 적용되도록 이동이 된다. 콘텐츠가 뷰포트 영역에 모두 표시된다면 overflow 값은 의미가 없다고 볼 수 있다. 그럼에도 body에게 높이를 지정하고 overflow 속성이 적용되기를 원한다면 루트(html) 요소에게 overflow 속성을 기본 값이 아닌 값으로 지정하면 된다.

사용 가능한 값 타입

〈overflow〉

  • visible | hidden | collapse | inherit
    CSS2.0

사용되는 키워드

  • auto

    요소 밖으로 콘텐츠가 벗어나는 경우에만 스크롤이 가능하도록 하고 그렇지 않은 경우에는 스크롤 영역을 표시하지 않는다.

  • clip

    overflow-clip-margin 속성에 의해 정의된 값에 따라 콘텐츠를 자르고 hidden 값과 다르게 프로그래밍 방식의 스크롤을 허용하지 않는다.

  • hidden

    요소 밖의 콘텐츠를 숨긴다.

  • scroll

    요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다.

  • visible

    요소 밖의 콘텐츠를 표시한다.

사용되는 전역 키워드

다음 전역 키워드는 속성에 따라 다른 의미를 가질 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • initial

    속성의 초기값(UA 기본값)을 요소에게 적용한다. 모든 속성에서 사용 가능하다.

  • revert

    현재 요소에게 적용된 속성 값을 웹브라우저(UA) 기본 값으로 되돌린다.

  • revert-layer

    캐스케이드(cascade) 레이어의 속성 값을 이전 캐스케이드(cascade) 레이어의 요소와 일치하는 CSS 규칙의 속성 값으로 돌아간다

  • unset

    사용자가 전역적인 선택자로 웹브라우저(UA) 기본 값을 재정의 했다면 그 기본 값을 유지한다.

다음은 필요에 따라 일부 값을 설명하므로 표시되지 않는 값은 값 유형을 참조하라.

구문

  • [ visible | hidden | clip | scroll | auto ]{1,2}

테스트 도구

overflow 속성에 대한 테스트

버전 명세

Modules
Module NameStatusSummary
CSS Overflow Module Level 3초안 작업

Last review date: 2022-10-20

지원 웹브라우저