웹스터디

overflow

토픽 웹스터디 > CSS Dictionary

Summary

내용이 박스보다 큰 경우 밖으로 넘친 부분을 어떻게 표시할지를 지정한다. 

visible | hidden | scroll | auto | inherit
기본값 visible
적용대상 블럭레벨요소와 치환된 요소
상속 상속안됨
퍼센테이지 지정불가
미디어 Visual

Value

  • visible : 박스보다 넘쳐난 내용을 그대로 보여준다.
  • hidden : 박스보다 넘쳐난 내용을 표시하지 않도록 지정하며 스크롤을 제공하지 않는다.
  • scroll : 박스보다 넘쳐난 내용을 위해 스크롤을 제공한다. 잘려서 보이지 않는 부분을 스크롤해서 볼수있도록 한다. 내용이 박스보다 넘쳐나지 않아도 무조건 스크롤을 제공한다.
  • auto : 브라우저에 의존하며 해당영역이 박스보다 큰 경우 스크롤을 자동으로 제공한다.

Tip

  1. 다음과 같이 사용할 수 있다.
    div {
        width: 300px;
        height: 300px;
        overflow : hidden;
    }
  2. 참고로 overflow-x와 overflow-y는 windows I5+E의 독자적인 속성이다.

Sample

 

 

 

댓글

댓글 본문
  1. 김도윤
    sample이미지 안보이는것 같아요 ㅠㅠ
  2. Hun Chang
    이 기능은 text뿐만 아니라 이미지에도 적용되는군요.
    잘만 활용하면 그래픽 툴에서 mask를 사용하는 느낌으로 사용도 가능할 것 같습니다.
  3. 푸른하늘
    12일차 공부 감사합니다
  4. 김금란
    tip의 2번 "참고로 overflow-x와 overflow-ysms windows I5+E의 독자적인 속성이다."

    overflow-y는 -> overflow-ysms 오타 있어요
  5. 새로찬
    좋은내용 잘보고 갑니다.
  6. TeaTime
    2. 참고로 overflow-x와 overflow-ysms windows I5+E의 독자적인 속성이다.

    2. 참고로 overflow-x와 overflow-y는 windows I5+E의 독자적인 속성이다.

    '는'을 영어로 적어버리셧네요