[css] scroll bar 디자인 하기 / overflow 속성

scroll bar 디자인

::-webkit-scrollbar { width: 5.2px; } /* 스크롤 바 */

::-webkit-scrollbar-track { background-color:#fff; } /* 스크롤 바 밑의 배경 */

::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; } /* 실질적 스크롤 바 */

::-webkit-scrollbar-thumb:hover { background: #404040; } /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */

::-webkit-scrollbar-thumb:active { background: #808080; } /* 실질적 스크롤 바를 클릭할 때 */

::-webkit-scrollbar-button { display: none; } /* 스크롤 바 상 하단 버튼 */

 

overflow

overflow는 요소의 박스에 콘텐츠가 넘칠 때 표현방법을 지정해주는 것입니다.

overflow 속성은 가로(x) 부분과 세로(y) 부분 모두에 일괄적으로 적용되는 속성 값입니다.

그런데 가로 부분의 넘치는 부분은 감추고, 세로 부분의 넘치는 부분은 그대로 보여주어야 할 때는

overflow-x / overflow-y로 사용하시면 됩니다.

* IE8 이하 버전에서는 overflow-x / overflow-y 속성을 지원하지 않습니다. 참고해주세요!

 

 

overflow-y 속성

visible(기본 값) - 특정 요소가 넘어가더라도 그대로 보여줍니다.

 

hidden - 부모 요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않도록 처리합니다.

            세로 스크롤바가 나타나지 않을 뿐 브라우저에 따라 가로 스크롤바는 나타납니다.

 

scroll - 부모요소의 범위를 넘어가는 자식 요소의 부분은 보이지 않지만,

          사용자가 확인할 수 있도록 스크롤바를 표시합니다.

          세로 스크롤 바를 항상 표시해줍니다.

 

auto - 부모 요소의 범위를 넘어가는 자식 요소의 부분이 있을 경우 해당 부분을 보이지 않도록 처리하고,

         사용자가 해당 부분을 확인할 수 있도록 스크롤 바를 표시합니다.

         내용이 넘칠 때만 세로 스크롤 바를 표시해줍니다.

 

initial - 기본 값으로 설정합니다.

 

inherit - 부모 요소의 속성 값을 상속받습니다.

*inherit 값은 IE7 이하는 지원하지 않습니다. IE8은 !DOCTYPE이 필요합니다. IE9부터 정상 지원합니다.

no-display - 콘텐츠가 박스 크기에 맞춰지지 않으면 display:none 속성이 적용된 것처럼 박스가 보이지 않게 됩니다.

no-content - 콘텐츠가 박스 크기에 맞춰지지 않으면 visibility:hidden 속성이 적용된 것처럼 콘텐츠가 보이지 않게 됩니다.