웹마스터 팁

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

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)
제목 글쓴이 날짜
[펌]유동아이피->고정아이피(포워딩 아님!!) [12] Plus가좋다 2004.06.08
IIS6.0+PHP4.3.3+MySql4.0.18+제로보드4.1 pl4 [10] 류진곤 2004.06.08
Apache 서비스를 위한 NT 보안 설정 [2] 토토루 2004.05.24
Apache 서버운영에 쓸모있는 팁 몇가지 [2] PCLab 2004.05.21
FTP서버설치 (filezilla server) [6] 이주성 2004.05.20
[경보]Serv-U 4.0 이전 버전 크래킹 툴 발견 [4] u2em 2004.04.26
개인서버로 메일 서버 및 기타 서버를 운영할 때 메일 및 서비스 절대 못 하게 하기...(xp이상) [3] 그냥이렇게。 2004.04.20
Apache 보안 [4] u2em 2004.04.05
초보자를 위한 Windows용 Apache2 + PHP + MySQL 설치 [7] PCLab 2004.03.29
경량화 리눅스 'Linux Annyung' [5] u2em 2004.03.27
Apache 자체 Log 관리 87K300 2004.03.20
-초보의 초보대상 강좌-커널 패치하기... [2] 87K300 2004.03.19
xampp 1.3 설치해 보기(winxp) [3] 이주성 2004.03.03
apache,php,mysql,zendoptimizer,phpmyadmin 다운 받기 [5] 이성헌 2004.02.28
Serv-U의 보안 설정 [1] 87K300 2004.02.24
Windows XP 에서 Apache 2 + PHP 5 + SQLite 설치하기 [8] 엔젤퀸 2004.02.23
[XAMPP]한 컴퓨터에서 여러 개의 홈페이지 운영하는 방법(가상호스트 아님) [8] The Darkness 2004.02.05
procmail로 마이둠 웜(MyDoom Worm) 필터링 좋은진호 2004.02.04
[초보강좌] 윈도우 서버의 용량 제한~~!! [17] file HoYa™ 2004.01.08
리눅스 서버 설치 및 관리에 따른 초보경험담을 게시판에 담아... [1] eversun 2004.01.05