STYLE

Editing

overflow

요소 내의 콘텐츠의 크기가 정해진 요소 영역을 벗어나는 경우에 가로, 세로 방향으로 벗어나는 콘텐츠를 속기 방식으로 설정한다.

설명

overflow 속성 값이 visibleclip의 경우 overflow-x 또는 overflow-y 속성 값중 하나가 표시되지 않거나 클리핑(clipping)되지 않았다면 각각 autohidden 값으로 계산된다.

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

사용 가능한 값 타입

〈'overflow'〉

overflow 속성에 사용되는 타입이다.

  • CSS Overflow Module Level 3
    [ <overflow> ]{1,2}

    overflow-xoverflow-y 속성의 값을 순서대로 설정한다. 두 번째 값을 생략하면 첫 번째 값을 사용한다.

    Example

    요소 내의 콘텐츠중 첫 번째 p 요소에게 가로 크기를 명시했다. 따라서 overflow 속성 값이 scroll hidden이므로 overflow-x 속성은 스크롤을 표시하고 overflow-y는 벗어나는 콘텐츠를 숨긴다.

사용되는 타입

아래 유형에서 지원하는 모든 키워드와 단위를 사용하지 않을 수도 있다. 값 사용에 대한 자세한 사항은 아래 값 항목을 참고하라.

  • 〈overflow〉

    overflow-x, overflow-y, overflow 속성에 사용되는 값을 나타낸다.

    • CSS Overflow Module Level 3
      visible | hidden | clip | scroll | auto

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

구문

  • overflow: auto;
    CSS Overflow Module Level 3

테스트 도구

overflow 속성에 대한 테스트

지원 웹브라우저