웹마스터 팁

스크롤바 색상을 아름답게.

2003.12.16 22:28

해리포터포에버

scroll.jpg
s1.jpg
여러 운영체제에서는 그에 따르는 스크롤 바를 제공하고 있습니다.
그러나 그 색상이 한가지 뿐이고 아름답지 못해서 홈페이지를 사용하고 있는 사용자라면
누구에게나 불편함이 될수도 있었을 것입니다.
이것은 다른 곳에서 흔히 발견될수 있지만 그래도 올려드립니다.
자신만의 아름다운 스크롤바를 만들어 보세요.
====================================================================
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:white; scrollbar-shadow-color:white; scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:rgb(204,204,204); scrollbar-base-color:white; scrollbar-arrow-color:rgb(204,204,204); scrollbar-track-color:white;">가 소스입니다.
간단한 기초설명을 말씀드리자면 색상코드 아시죠?
모르신다면 한번더 설명하겠습니다.
코드는 R(red빨강)G(green초록)B(blue파랑)라고 말합니다.
코드는 ###### 이렇게 여섯자리 문자,숫자로 표현하는데요
각각 A~F, 0~9까지 있답니다.(사실 저도 정확히는 모릅니다. 그러나 또 정확히 모르면서 올렸다고 욕은 하지 말아주셨으면 합니다.)
원하는 색상을 고르시려면 색상표를 참조하시는 것이 좋습니다(색상표는 검색엔진에서 쉽게 찾으실수 있습니다)
======================================================================
제가 위에 올린 스크롤바는 이런 색상입니다.
저는 대체로 심플하고 깔끔한것이 좋더라구요.
만약 아래것이 마음에 안드신다면 위의 색상을 변경하시면 됩니다.
그럼 위의 소스를 살펴볼까요?
bgcolor은 흰색이라고 했는데 백그라운드(배경)색상을 말하는 겁니다.
text는 검정색이라고 했는데 이것은 말그대로 텍스트(문자)색상을 말하는 겁니다.
아.. 이건 상관없는것이니 넘어가고
본격적으로 스크롤바 색상에 들어가보도록 하겠습니다.(주제는 스크롤바이니 말이죠)
영어를 읽으실줄 아시는 분은 읽어서 scrollbar를 찾으세요
그다음부터 본격적으로 스크롤바 색상의 시작입니다. 순서대로 정리해보았습니다

1.  페이스 칼라-(여기서 red, green, blue 등 색상을 변경해주세요)
2.  세도우 칼라(강조색상)-(여기서 red, green, blue 등 색상을 변경해주세요)
3.  하이라이트 칼라(돌출면 색상)-(여기서 red, green, blue 등 색상을 변경해주세요)
4.  3D칼라(3D강조색)-(여기서 red, green, blue 등 색상을 변경해주세요)
5.  다크 세도우 칼라(진한 강조색)-(여기서 red, green, blue 등 색상을 변경해주세요)
6.  베이스 칼라(기본색상)-(여기서 red, green, blue 등 색상을 변경해주세요)
7.  어로우 칼라-(여기서 red, green, blue 등 색상을 변경해주세요)
8.  트랙 칼라-(여기서 red, green, blue 등 색상을 변경해주세요)

완전히 올리지 못하여 그저 죄송할 따름입니다.
아래는 제가 만들어본 스크롤바의 색상과 그 소스입니다.
유용하게 사용해주셨으면 좋겠고 저는 이만 물러가겠습니다.
-----------------------------------------------------
함께하세요
항상 초보자의 입장에서 생각하겠습니다.
쪽지문의 언제든지 환영합니다
-----------------------------------------------------
1. 화이트앤그레이
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:white; scrollbar-shadow-color:white; scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:rgb(204,204,204); scrollbar-base-color:white; scrollbar-arrow-color:rgb(204,204,204); scrollbar-track-color:white;">
2. 스카이블루
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:white; scrollbar-shadow-color:rgb(0,153,255); scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:rgb(0,204,255); scrollbar-base-color:white; scrollbar-arrow-color:rgb(0,204,255); scrollbar-track-color:white;">
3. 워터그린
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:rgb(153,255,102); scrollbar-shadow-color:white; scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:rgb(0,255,204); scrollbar-base-color:white; scrollbar-arrow-color:rgb(204,204,204); scrollbar-track-color:white;">
4. 화이트앤옐로
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:white; scrollbar-shadow-color:rgb(255,255,204); scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:yellow; scrollbar-base-color:white; scrollbar-arrow-color:yellow; scrollbar-track-color:white;">
5. 블랙박스
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="scrollbar-face-color:black; scrollbar-shadow-color:rgb(204,204,204); scrollbar-highlight-color:white; scrollbar-3dlight-color:white; scrollbar-darkshadow-color:rgb(153,153,153); scrollbar-base-color:white; scrollbar-arrow-color:rgb(153,153,153); scrollbar-track-color:white;">


* DeX™님에 의해서 게시물 이동되었습니다 (2003-12-16 23:47)
제목 글쓴이 날짜
서브 메뉴 나타났다가 사라지게 하는 방법. 그동안의 노가다는 이젠 끝! [22] file CoolUnit 2004.03.01
그림위에 마우스를 올렸을때 그림저장 버튼 안나타나게 하기... [17] file PHASE 2004.01.19
스크롤바 색상을 아름답게. [17] file 해리포터포에버 2003.12.16
마우스 커서에 대해서... [16] file impre 2003.09.20
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] file PHASE 2003.09.08
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] file 토끼군 2003.08.20
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
노프레임 홈만들기 (2) - 로그인, 최근게시물 설치 [31] file @kihwa 2003.07.26
노프레임 홈만들기 (1) - 표로 레이아웃 만들고 그림 삽입하기 [45] file @kihwa 2003.07.11
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
쭘's식 홈페이지 만들기 No.3 - 깔끔 노프레임 (미리보기 포함) [37] file 쭘's 2003.06.07
css3 안쪽과 바깥쪽 그림자 만들기 입니다 file 낮은자 2014.03.06
[펌] HTML5와 CSS3를 사용하여 최신 웹 사이트 구축하기 [6] file 999 2011.01.11
노프레임 홈페이지 만들기 강좌 file H.N커뮤니티 2009.02.28
메뉴에 마우스오버시 레이어서브메뉴창 뜨게하기 (나모웹) file H.N커뮤니티 2009.02.22
css 정리 파일(한글) [3] file 미곰탱 2009.01.22
스크립트 모음 [1] file *이종민* 2008.11.29
계산기 [1] file *이종민* 2008.11.29
바탕화면에 바로가기 만들기 file *이종민* 2008.11.29