[CSS] overflow 속성 정리(hidden, auto, scroll)

overflow 속성 정리(hidden, auto, scroll)

• visible : 박스를 넘어가도 보여줍니다.
• hidden : 박스를 넘어간 부분은 보이지 않습니다.
• scroll : 박스를 넘어가든 넘어가지 않든 스크롤바가 나옵니다.
• auto : 박스를 넘어가지 않으면 스크롤바가 나오지 않고, 박스를 넘어갈 때에는 스크롤바가 나옵니다.
• initial : 기본값으로 설정합니다.
• inherit : 부모 요소의 속성값을 상속받습니다.

나의 경우에는 overflow 속성을 사용할 때, hidden, auto, scroll를 주로 사용한다. 이외에는 잘 사용하지 않는다고 보면 되는데, overflow 속성 자체가 어떤 요소가 박스 밖으로 넘어갈 때의 처리방법을 선언하는 속성이다. 보통은 텍스트에 사용하기도 하지만, 종종 이미지나 다른 요소에도 적용해서 사용하는 경우가 있다.

또한 Scroll 기능을 활용해서 작은 공간에 스크롤을 만들어 박스 안에 내용을 더 많이 담을 수 있게 된다. 복잡한 속성은 아니고, 대부분의 브라우저에서 지원한다.

지원되는 브라우저

• Chrome : 1.0+
• Firefox : 1.0+
• Internet Explorer : 4.0+
• Opera : 7.0+
• Safari : 1.0+

  참고: 하나의 축을 visible(기본값)로 하고, 다른 축에는 다른 값을 지정할 경우 visible이 auto처럼 동작합니다.
  참고: JavaScript Element.scrollTop 속성을 사용하면 요소의 overflow가 hidden일 때도 스크롤할 수 있습니다.