스크롤바 색상 변경에 대한 개념 잡기

인터넷 익스플로러 5.5 이상을 사용하면 스크롤바의 색상을 쉽게 변경할 수 있다는 것은 이미 많이 알려진 사실이다. 이미 코리아인터넷닷컴에서도 "스크롤바의 색상을 바꾸는 방법"을 소개한 적이 있다.

지난 시간에 배웠던 부분을 약간 응용하면 다음과 같이 TextArea 영역의 스크롤바 색상만 변경할 수도 있다.

e비즈니스 및 IT 전문가를 위한 지식 미디어 코리아인터넷닷컴에 오신 것을 환 영합니다. 이 강좌는 스크롤바 색상 변경에 대한 개념을 설명하고 있습니다. 각 스타일의 속성이 무엇을 의미하는지 이번 시간을 통 해 배워 보시기 바랍니다. 이 예제는 TextArea의 스크롤바 색상을 변경한 예제입니다.

위 결과에 대한 소스 코드는 다음과 같다.

<textarea style="scrollbar-base-color: #008080;scrollbar-shadow-color:#008080;scrollbar-arrow-color: #FFFFFF; scrollbar-face-color: #008080;" cols="45" rows="4"> e비즈니스 및 IT 전문가를 위한 지식 미디어 코리아인터넷닷컴에 오신 것을 환영합니다. 이 강좌는 스크롤바 색상 변경에 대한 개념을 설명하고 있습니다. 각 스타일의 속성이 무엇을 의미하는지 이번 시간을 통해 배워 보시기 바랍니다. 이 예제는 TextArea의 스크롤바 색상을 변경한 예제입니다. </textarea>

이번 시간에 실제로 해보고자 하는 내용은 각각의 스크롤바 관련 스타일 속성이 무엇을 의미하는지 알아보는 것이다. 사용할 수 있는 스타일 속성은 다음과 같다.

• scrollbar-base-color
• scrollbar-face-color
• scrollbar-shadow-color
• scrollbar-highlight-color
• scrollbar-darkshadow-color
• scrollbar-3dlight-color
• scrollbar-track-color
• scrollbar-arrow-color

각각의 스타일 속성이 무엇을 의미하는지 아래 예제를 이용하여 테스트 해보기 바란다. 각각의 스타일 속성별로 적당한 색상을 변경한 후 "색상 변경" 버튼을 클릭하면 TextArea 영역의 스크롤바 색상이 변경되는 것을 볼 수 있을 것이다.

e비즈니스 및 IT 전문가를 위한 지식 미디어 코리아인터넷닷컴에 오신 것을 환영합니다. 이 강좌는 스크롤바 색상 변경에 대한 개념을 설명하고 있습니다. 각 스타일의 속성이 무엇을 의미하는지 이번 시간을 통해 배워 보시기 바랍니다. 이 예제는 TextArea의 스크롤바 색상을 변경한 예제입니다  

Base None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	Arrow None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	Dark Shadow None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	Face None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal
Highlight None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	Shadow None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	3dlight None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal	Track None Black White Green Maroon Olive Navy Purple Grey Yellow Lime Aqua Fushia Silver Red Blue Teal

이제 살펴보고 싶은 속성만 색상을 정의하고 나머지 속성은 전부 흰색으로 변경하여 각 속성이 의미하는 바를 명확히 이해해 보도록 하자.