CSS Keywords

{object_name}

CSS Overflow Module

  • Overflow

    • auto

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

    • clip

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

    • hidden

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

    • scroll

      요소 밖의 콘텐츠는 잘리지만 스크롤을 통해 보기를 허용한다. 그렇지 않은 경우에도 스크롤 영역이 표시된다. auto에 비해 가지는 장점은 동적인 처리를 통해 콘텐츠의 양을 예측할 수 없는 경우에 스크롤바가 나타나고 사라지는 문제를 해결할 수 있다. 대상 매체가 인쇄인 경우에는 밖으로 벗어난 내용이 인쇄될 수 있다.

    • visible

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

  • Scroll Behavior

    • auto

      스크롤 상자는 즉시 스크롤된다.

    • smooth

      스크롤 상자는 UA가 정의한 시간 동안 UA가 정의한 애니메이션 방식으로 부드러운 스크롤을 지원한다.

  • Scrollbar Gutter

    • auto

      클래식 스크롤바는 overflow 속성 값이 scroll이면 오버플로우와 상관없이 스크롤바 여백을 만들어 공간을 차지한다. auto이면 컨테이너가 오버플로우될 때 스크롤바 여백을 만들어 공간을 차지한다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.

    • both-edges

      컨테이너의 인라인(inline) 시작 가장자리 또는 인라인 끝 가장자리 중 하나에 스크롤 막대 여백이 있는 경우 반대쪽 가장자리에도 다른 스크롤 막대 여백이 생긴다.

    • stable

      컨테이너가 실제로 오버플로우(overflow)되는 여부와 상관없이 overflow 속성이 hidden, scroll, auto일 때 클래식 스크롤바에 스크롤 여백을 만든다. 오버레이(overlay) 스크롤바는 공간을 차지하지 않는다.

  • Text Overflow

    • clip

      블록 컨테이너 요소를 벗어나는 인라인 콘텐츠를 잘라낸다. 문자는 부분적으로만 렌더링될 수 있다.

    • ellipsis

      줄임표를 렌더링하여 잘린 인라인 콘텐츠를 나타낸다. 보통 점 세 개 '...'로 표시한다.

©2024 devdic.com, Korea

출처를 밝힌 리소스 이외의 본 레퍼런스에 사용된 모든 생성물의 소유 및 저작권은 devdic.com에 있습니다. 특별히 재배포를 금지한 것 이외는 재배포가 가능하며 반드시 출처를 표기해 주시기 바랍니다.
현재는 베타 버전으로 미등록 및 불완전한 콘텐츠가 일부 있을 수 있습니다. 오류 및 기술 자료 제보(건의)는 언제든지 환영하며 감사드립니다.
기본적으로 W3C 기술 사양을 기준으로 작성하였으며 일반적이지 않은 기술 설명에 대한 내용의 일부는 Mozilla의 MDN web docs에서 도움 받았음을 밝힙니다. 그들을 존경합니다.

master@cydemy.com