• 돌아가기
  • 아래로
  • 위로
  • 목록
  • 댓글
CSS

스크롤바 디자인 하기

오작교 40648

1

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 속성이 적용된 것처럼 콘텐츠가 보이지 않게 됩니다.

공유
1

댓글 쓰기 권한이 없습니다. 로그인

취소 댓글 등록

신고

"님의 댓글"

이 댓글을 신고하시겠습니까?

댓글 삭제

"님의 댓글"

삭제하시겠습니까?

목록

공유

facebooktwitterpinterestbandkakao story
검색어 : 202104
번호 분류 제목 글쓴이 날짜 조회 추천
공지 HTML HTML 기초 다지기 4 오작교 08.06.17.16:26 289970 0
공지 HTML HTML과 CSS의 종합 정리 1 오작교 07.10.01.10:21 348998 0
공지 일반 스타일시트의 총정리 오작교 06.09.14.13:08 293600 +14
300
normal
오작교 23.12.10.09:32 14425 0
299 Script
normal
오작교 23.12.10.09:29 19706 0
CSS
normal
오작교 21.01.09.14:18 40648 0
297 HTML
normal
오작교 15.09.17.08:58 116252 0
296 HTML
normal
오작교 15.09.13.21:38 21525 0
295 HTML
normal
오작교 15.09.13.21:30 25096 0
294 HTML
normal
오작교 15.08.30.12:19 52713 0
293 Script
normal
오작교 15.05.12.14:06 21088 0
292 HTML
file
오작교 12.03.08.13:51 35863 0
291 HTML
normal
오작교 11.06.03.10:44 40684 0
290 CSS
normal
오작교 11.06.03.10:29 70587 0
289 Script
normal
오작교 11.03.22.11:19 43398 0
288 Script
normal
오작교 11.03.22.11:15 38154 0
287 Script
normal
오작교 11.03.22.11:07 37042 0
286 HTML
normal
오작교 11.01.25.10:27 36138 0
285 CSS
normal
오작교 11.01.24.10:40 35305 0
284 HTML
normal
오작교 11.01.24.10:39 37018 0
283 Script
normal
오작교 11.01.24.10:34 38036 0
282 CSS
normal
오작교 11.01.24.10:31 37666 0
281 CSS
normal
오작교 11.01.24.10:27 36145 0