Properties

Properties

  • account_tree
  • bug_report

Overflow

시각적 미디어에서 스크롤이 가능한 오버플로(overflow) 처리와 관련된 CSS 속성을 다룬다.

개요

CSS Overflow Module은 정해진 크기의 요소 내에 존재하는 콘텐츠 수용에 대한 기술적인 주제를 다룬다.

CSS 1에서는 정해진 크기를 갖는 요소가 수용할 수 있는 콘텐츠의 양보다 많은 경우에는 작성자의 오류를 판단했다. 즉 작성자는 콘텐츠의 양을 고려해서 요소의 크기를 정하든지 요소의 크기를 고려해서 콘텐츠의 양을 조정하던지에 대한 선택을 해야 했다.

CSS 2에서는 요소의 크기와 콘텐츠 크기와의 관계를 작성자가 제어할 수 있도록 하는 overflow 속성이 추가되었다. 콘텐츠의 양을 요소의 크기에 맞추지 않은 것을 작성자의 오류라고 보지 않는 것이다.

CSS Overflow Module Level 3부터 요소 내에 넘치는 콘텐츠를 다루기 위한 몇 가지 속성들이 추가되었다.

관련 속성

  • overflow

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

    overflow 속성 값이 clip인 경우 클리핑 되기 전에 페인트될 수 있는 바깥쪽 범위를 지정한다.
  • overflow-x

    정해진 크기의 요소 내 콘텐츠가 넘치는 경우 가로 방향으로 어떻게 처리할 것인지를 설정한다.
  • overflow-y

    정해진 크기의 요소 내 콘텐츠가 넘치는 경우 세로 방향으로 어떻게 처리할 것인지를 설정한다.
  • scroll-behavior

    스크롤이 가능한 컨테이너 내에서 링크를 클릭할 때 스크롤 위치에 부드럽게 이동할지에 대한 여부를 지정한다.
  • scrollbar-gutter

    overflow 속성에 의해 제공되는 스크롤바의 존재를 제어하는 기능과는 별도로 작성자에게 스크롤바 거터(gutter)의 존재에 대한 제어를 한다.
  • text-overflow

    텍스트가 컨테이너 내에서 모두 표시되지 못할 경우 사용자에게 알리는 방식을 설정한다.

W3C Modules

CSS Overflow Module Level 3
W3C Working Draft, 31 December 2022
CSS Overflow Module Level 4
W3C Working Draft, 21 March 2023