2011. 5. 9. 23:55ㆍIT/Tistory Tips
웹페이지 글이 길어지면 화면 오른쪽이나 아래에 스크롤 바가 나타난다. 대부분 회색 배경에 하얀 화살표가 나타난다. CSS를 사용해서 스크롤 바를 꾸며보자. fleXcroll이나 jScrollPane이라는 jQuery 플러그인을 사용하면 모든 브라우저에 스크롤 바를 적용할 수 있지만, 이번엔 그냥 CSS만 사용해서 IE, Chrome, Safari의 스크롤 바를 바꿔보자.
| Internet Explorer용 코드 |
|---|
| html {scrollbar-3dLight-Color: #efefef; scrollbar-arrow-color: #dfdfdf; scrollbar-base-color: #efefef; scrollbar-Face-Color: #dfdfdf; scrollbar-Track-Color: #efefef; scrollbar-DarkShadow-Color: #efefef; scrollbar-Highlight-Color: #efefef; scrollbar-Shadow-Color: #efefef} |
| Webkit(Safari, Chrome)용 코드 |
| /* Chrome, Safari용 스크롤 바 */ ::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; } ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef} ::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)} ::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)} |
늘 하던 것처럼 위 CSS를 [티스토리 관리 화면] - [스킨] - [HTML/CSS 편집] - [style.css]에 맨 아래에 붙여 넣는다. 이 스타일을 기본으로 원하는 스타일을 적용하면 된다.
일단 IE 스타일을 살펴보자. IE는 스크롤 바 각 요소의 색만 바꿀 수 있다. scrollbar-arrow-color는 스크롤 바 아래위 왼쪽 오른쪽 화살표 색이다. scrollbar-base-color는 스크롤 바 전체 배경 색이다. scrollbar-Face-Color는 상하좌우로 움직이는 부분(thumb), 화살표가 포함된 상하좌우 끝 사각형 부분(button) 색이다. scrollbar-Track-Color는 스크롤 바 thumb를 제외한 나머지 빈 부분 색이다. scrollbar-DarkShadow-Color, scrollbar-Shadow-Color는 스크롤 바 thumb, button의 오른쪽과 아래, 즉, 어두운 부분 색이다. scrollbar-3dLight-Color, scrollbar-Highlight-Color는 스크롤 바 thumb, button의 왼쪽과 위, 즉, 밝은 부분 색이다. /'pəlp/ 블로그처럼 스크롤 바 화살표를 없애려면 scrollbar-arrow-color와 scrollbar-Face-Color를 같은 색으로 지정하면 된다. 그 외 나머지 요소 역시 블로그 스킨이나 웹페이지 구성에 맞게 적당한 색을 지정하면 스크롤 바 스타일을 바꿀 수 있다. 주의할 것은 IE에 스크롤 바 CSS를 적용하려면 html 즉, 페이지 전체에 적용해야 한다는 점이다. IE 스크롤 바 스타일은 IE5 이상에 적용된다.
Webkit용 스타일은 좀 더 복잡하다. 일단 사용할 수 있는 가상 요소와 가상 선택자를 살펴보자.
| 가상 요소 종류 | |
|---|---|
| ::-webkit-scrollbar | 스크롤 바 영역 전체 |
| ::-webkit-scrollbar-button | 상하, 좌우 화살표가 포함된 부분 |
| ::-webkit-scrollbar-track | 화살표를 제외한 몸통 부분 |
| ::-webkit-scrollbar-track-piece | 몸통 부분에서 실제 움직이는 부분을 제외한 나머지 길 |
| ::-webkit-scrollbar-thumb | 몸통 부분에서 실제 움직이는 부분 |
| ::-webkit-scrollbar-corner | 상하/ 좌우 스크롤 바가 만날 때 오른쪽 아래 공간 |
| ::-webkit-resizer | corner 공간으로 크기를 변경할 수 있음 |
| 가상 선택자 종류 | |
| :horizontal | 좌우 스크롤 바의 모든 요소에 적용 |
| :vertical | 상하 스크롤 바의 모든 요소에 적용 |
| :decrement | 스크롤 바에서 윗쪽, 왼쪽 방향 button, track 요소에 적용 |
| :increment | 스크롤 바에서 아래쪽, 오른쪽 방향 button, track 요소에 적용 |
| :start | thumb 이전에 위치한 button, track 요소에 적용 |
| :end | thumb 이후에 위치한 button, track 요소에 적용 |
| :double-button | 상하 화살표가 붙어 두 개가 한꺼번에 표시된 요소에 적용 (좌우도 같음) |
| :single-button | 상하 화살표가 아래 위 따로 나뉘어 표시된 요소에 적용 (좌우도 같음) |
| :no-button | 화살표 button이 없는 요소에 적용 |
| :corner-present | 스크롤 바 corner가 있는 요소에 적용 |
| :window-inactive | 지금 활성화된 창의 스크롤 바에 적용 |
가상 요소는 말 그대로 가상으로 사용할 수 있는 요소(element)다. CSS에선 span, p, div 등 HTML 각 요소를 선택해서 스타일을 적용하지만, 스크롤 바는 HTML 태그로 지정할 수도, class나 id를 부여할 수도 없으므로 가상 요소를 사용해야 한다. 위의 가상 요소(::-webkit으로 시작하는 항목)는 일반 요소처럼 사용할 수 있다. 예를 들어 span 요소에 배경색을 지정할 때 span {background:#ccc}라고 스타일을 지정하듯 ::-webkit--scrollbar {width: 12px; height: 12px}처럼 스타일을 지정할 수 있다. 가상 선택자는 webkit 엔진에서 스크롤 바 스타일을 지정할 때 적용할 수 있도록 제공된 선택자다. :link, :hover, :first-child, :last-child 등의 가상 선택자를 사용할 때처럼 webkit 스크롤 바 스타일엔 위의 가상 선택자를 추가로 사용할 수 있다. 예를 들어 오른쪽 스크롤 바 위로 화살표 스타일을 지정하려면 ::webkit-scrollbar-button:start:decrement {background:#efefef}처럼 사용할 수 있다.
Chrome, Safari에서만 스크롤 바 스타일이 적용됩니다.
그럼 위의 예제 코드에서 webkit 부분 CSS만 살펴보자. ::-webkit-scrollbar {width: 8px; height: 8px; border: 3px solid #fff; }는 스크롤 바 전체 너비를 8px로 지정한다. width와 height를 모두 지정하였으므로 상하 스크롤 바, 좌우 스크롤 바 모두 너비가 8픽셀이 된다. border 부분은 원래 사용할 필요가 없지만, 내 블록에 적용했을 때 검은색 부분이 약간 나타나서 임시로 사용했다. 이유를 알 수 없는 검은 점들이 border를 지정하자 없어졌다. ::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 10px; background: url('./images/bg.png') #efefef}는 스크롤 바 위, 왼쪽 화살표와 아래, 오른쪽 화살표 스타일이다. display: block과 height: 10px을 함께 사용해서 화살표 영역 자체에 block 속성을 부여하고 높이를 10픽셀로 지정했다. background로 블로그 배경과 같은 이미지를 지정했고 이미지를 사용할 수 없을 때 배경 색으로 표시되도록 #efefef를 함께 사용했다. ::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 10px; border-radius:10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)}는 화살표를 제외한 몸통 부분으로 배경 색을 지정하고 border-radius, box-shadow 속성을 부여했다. border-radius는 테두리를 둥글게 만드는 것이고 box-shadow는 지정한 영역에 그림자를 표시하는 것이다. ::-webkit-scrollbar-thumb {height: 50px; width: 50px; background: rgba(0,0,0,.2); -webkit-border-radius: 8px; border-radius: 8px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)}는 스크롤 바 몸통에서 실제 움직이는 막대 부분 스타일이다. height와 width를 모두 지정해서 기본 크기를 50픽셀로 고정하고 배경 색, border-radius, box-shadow 속성을 부여했다. 실제로 적용하면 위의 예와 같다. 물론 Chrome, Safari에서만 스타일이 적용되고 나머지 IE, Opera, Firefox에선 일반 스크롤 바로 보인다.
Webkit용 스크롤 바는 Styling Scrollbars와 Custom Scrollbars in WebKit에서 상세한 정보와 예제를 확인할 수 있다.
webkit용 스크롤 바 CSS는 JavaScript를 사용하는 다른 스크롤 바와 비교하면 적용되는 브라우저가 제한적이라는 단점이 있지만, JavaScript를 내려받는 시간, 연산 시간이 소요되지 않아서 페이지 지연이 없다. 또 배경 그림, 배경 색, box-shadow, border-radius 등 webkit에서 지원하는 모든 CSS 속성을 사용할 수 있으므로 다양한 모양으로 꾸밀 수 있다.