css를 정리하자
간단하게 스타일을 적용시키는 팁입니다.
보통 해당 페이지의 글꼴 속성을 줄 때 (글자크기,링크의밑줄 등..)
<head>와 </head> 사이에 대충 아래와 비슷한 구문을 사용하는데요..
a:link {color:#007cd0;text-decoration:none}
a:visited {color:#007cd0;text-decoration:none}
a:active {color:#007cd0;text-decoration:none}
a:hover {color:#0099ff;text-decoration:none}\
페이지마다 매번 적기도 불편하고 나중에 편집할 때 열어보면 어지럽겠죠..?
이것을 css를 파일로 만들어서 문서에 연결해서 사용하시면 됩니다.
css 파일을 만드는 것은 js 파일을 만드는 것과 같은데요...
메모장다 내용을 삽입하고 파일형식을 (모든파일) 로 선택하시고 파일명에 파일명을 쓰고 뒤에 .css를 붙이면됩니다. 그렇게 css 를 만들어 계정에 올립니다.
● css불러 오기
<head>와 </head> 사이에 삽입합니다.
<link rel="stylesheet" type= "text/css" href="주소">
저 같은 경우는 style.css 를 만들어 인덱스가 있는 폴더에 올렸는데요...
모든페이지의 <head>와 </head> 사이에 style.css 를 불러 넣었습니다.
[ ------------------------------ 예문 ------------------------------ ]
<link rel="stylesheet" type= "text/css" href="http://www.daerew.com/style.css">
● 태그에 직접 적용할때는 아래와 같이 하면됩니다.
<font style="font-size:9pt; color:red; font-family:굴림;">내용</font>
웹폰트 적용시키기
1. 웹폰트파일을 서버에 올린다.
(웹폰트는 확장자가 *.eot파일이나 mwf 등이 있습니다)
2. 인클루드할 스타일 시트를 작성한다.
ex) 작성예.
'daerew.css' 라는 파일이 있다고 가정하면 그 내용은 아래와 비슷할겁니다.
@font-face { font-family:WEB정; src:url(웹정주소) }
body, table, tr, td, select, input, div, form, textarea { background:#ffffff; color:#000000; font-size:9pt; font-family:WEB정; line-height:100% }
3. css를 적용할 html페이지의 head 사이에 다음의 소스를 적용합니다.
<style type="text/css">
@import url(daerew.css);
</style>
이렇게 소스가 적용이 되면 body, table, tr, td, select, input, div, form, textarea 가 들어가는 모든 부분의 텍스트가 웹정체로 나타나게 되는것이죠 ..
글꼴의 크기와 종류등을 하나로 깔끔하게 만들기
처음엔 웹페이지에서 문자에 효과를 많이 주게 됩니다. 저도 그러했고 많은 분들이 그랬겟죠.. 하지만, 어느순간만 지나면 그런게 더 어지러워 보이고 사용자 입장에서 불필요하다고 느끼시게 될겁니다.그래서 많은 분들이 글꼴의 색을 단일색으로하게되고 꾸밈이 없이하게되지요.
글꼴을 편하게 조정할려면 스타일 시트로 <head>내에서 한번 잡아주시는게 가장 편하고 효율적입니다. 간단하게 정리한 소스를 볼까요~
1. 첫 번째로 바디에 글꼴을 지정합니다.
<HEAD></HEAD> 사이에 아래의 소스를 넣습니다.
<STYLE>
<!--
BODY {font-size:9pt;font-color:#666666;font-family:돋움;}
-->
</STYLE>
이렇게되면 그 페이지안의 글꼴들이 지정한데로 "돋움체"로 나오며 크기는 "9픽셀" , 색깔은 "회색(#666666)"으로 지정됩니다.
2. 두 번째로 테이블 내의 글꼴들을 통일시킵니다.
위에서 바디의 글꼴은 이미 통일을 시켰고 바디내의 테이블속 글꼴 역시 지정하실수가 있습니다.
<HEAD></HEAD> 사이에 아래의 태그를 넣어주세요.
<STYLE>
<!--
TD {font-size:9pt;font-color:#000000;font-family:돋움;}
-->
</STYLE>
이렇게되면 바디안에 테이블속성을 가진곳에서는 "검은색의 돋움폰트가 크기9픽셀" 로 일정하게 나타납니다
위 두가지만 사용해도 아주 깔끔한 모양으로 정리가 될겁니다.
링크된 글자 꾸미기
아래의 소스를 <head>와 </head>사이에 붙이고 수정하세요..
ink : 링크된 글씨
visited : 방문한 후의 글씨
active : 클릭된 상태의 글씨
hover : 마우스를 올렸을때의 글씨
underline overline 은 아래위로 줄
underline 은 아래에만 줄
overline 은 위에만 줄
none 은 줄 없음.
<STYLE type="text/css">
<!--
A:link { font-size: 9pt;text-decoration: none; color: 색지정 ; }
A:visited {font-size: 9pt;text-decoration: none;color: 색지정 ;}
A:active {font-size: 9pt;text-decoration: none;color: 색지정 ;}
A:hover {font-size: 9pt;text-decoration: underline overline;color: 색지정 ;}
-->
</STYLE>
색지정 란에는 원하는 색 코드를 넣으세요
이 구문을 자신의 사이트에 알맞게 수정한 후 style.css 로 저장한 뒤 계정에 올립니다.
스타일을 적용시킬 페이지의 <head> </head> 사이에
<link rel="stylesheet" href="주소/style.css"> 와 같이 넣습니다.
[ ------------------------------ 예문 ------------------------------ ]
<head>
<link rel="stylesheet" href="http://www.daerew.com/style.css">
</head>
저 같은 초보분들에게는 무지 유용하게 이용된답니다.
스킨에도 적용할 수 있으니 스킨의 영향으로 인해 해당 페이지의 글꼴등이 변하거나 한다면 <link rel="stylesheet" href="주소/style.css"> 만 스킨에 붙여주면 간단하게 해결되죵~~
● 링크 밑줄 없애기
A:link { font-size: 9pt;text-decoration: none; color: 색지정 ; }
A:visited {font-size: 9pt;text-decoration: none;color: 색지정 ;}
A:active {font-size: 9pt;text-decoration: none;color: 색지정 ;}
A:hover {font-size: 9pt;text-decoration: underline overline;color: 색지정 ;}
여기서 decoration: underline 부분을 none으로 지정하시면 됩니다.
링크에 마우스 오버시 움푹들어가는 효과
<head> 와 </head> 사이에 아래의 소스를 넣어주세요
<style>
A:hover {color:444444;text-decoration:none;position:relative; top:1; left:1;}
</style>
● 반대로... left1 을 right1로하면 튀어나오는 느낌..
<style>
A:hover {color:444444;text-decoration:none;position:relative; top:1; right:1;}
</style>
글자의 높낮이 간격 조절
<style type="text/css">
<!--
body, table, tr, td, select,input,div,form,textarea {font-family:굴림; font-size:9pt; line-height:120%}
-->
</style>
line-height:120% 의 숫자를 바꿔주면 되겠죠
마우스 커서 모양을 바꾸기
북서쪽 화살표 style="cursor:nw-resize"
북동쪽 화살표 style="cursor:ne-resize"
가로 style="cursor:e 또는 w-resize"
세로는 n-resize 또는 s-resize
물음표 style="cursor:help"
이동모양 style="cursor:move"
입력상태 style="cursor:text"
십자가 style="cursor:crosshair"
손모양 style="cursor:hand"
모래시계 style="cursor:wait"
변화없음 style="cursor:default"
● 적용방법
문서 전체에 적용
body style="cursor:원하는모양
한 문장에만 적용 font 태그에 삽입해 주시면 됩니다.
이미지테두리를 일괄적으로 없애기
이미지에 링크를 걸었을때, <img src="" border=0> 이라구, border=0을 안 넣어주면 보기흉한 파란 테두리가 생기잖아요. 일일이 이미지태그안에 border=0을 넣지 않고도 편하게 페이지내에서 이미지테두리를 일괄적으로 없애는 방법이 있어요.
<head> 와 </head> 사이에 아래의 구문을 넣어주세요
<style>
IMG {border: none;} (또는 IMG{border:0;})
</style>
또는 스타일시트 쓰시는 분은 css파일 안에
IMG {border: none;} (또는 IMG{border:0;})
라고 넣어주시면 되요.
홈페이지 이중 링크 시키기
한 화면에서 두가지 형태의 링크를 주고 싶은경우가 있죠. 서로 색을 달리하거나 폰트크기도 달리한다든지..
CSS에서 링크하는 것들은 pseudo-classes 라고 합니다.
pseudo-classes는 활용에 따라 다양하게 적용을 할 수 있습니다.
아래는 간단한 예제입니다.
<html>
<head>
<style type="text/css">
A.blue:link {color: blue}
A.red:link {color: red}
A.foot:active {color: purple}
A.foot:visited {color: blue}
</style>
</head>
<body>
<a href="http://startdesign.net" class="blue"> blue</a>
<a href="http://startdesign.net" class="red"> red</a>
</body>
</html>
스크롤바에 색상넣기
스크롤바를 사용자의 취향에 맞게 수정해서 사용하세요!
익스 5.5 에서만 제대로 보여집니다.
<head> 와 </head> 사이에 넣어 주세요...
<STYLE TYPE='text/css'>
<!--
BODY
{scrollbar-face-color: white; scrollbar-shadow-color: #008400;
scrollbar-highlight-color: #008400; scrollbar-3dlight-color: white;
scrollbar-darkshadow-color: white; scrollbar-track-color: white;
scrollbar-arrow-color: #008400}
-->
</STYLE>
color:#008400 이 부분에서 컬러 뒤의 숫자나 영문을 자신의 원하는 색으로 변겨하면 되겠죠...^^
점선 테이블 만들기
<fieldset style="line-height:15pt; padding:20; border-width:2; border-style:dotted; width:200; height:70; border-color: red;">
내용
</fieldset>
2라는 숫자는 점선테이블의 두께를 정합니다.
boder-style:dotted 는 선의 종류를 점선으로 하라는 명령이죠.
자동 줄바꿈을 통한 테이블 크기 고정
테이블 작업을 하다가 글의 내용이 길어지면 지정된 테이블의 크기가 늘어나는 현상이 있을 수 있습니다. 이럴 때 테이블의 크기를 고정시키고 자동으로 줄바꿈을 해주는 기능입니다.
<table> 태그의 아래의 구문을 넣습니다.
style="table-layout:fixed;"
[ ------------------------------ 예문 ------------------------------ ]
<table style="table-layout:fixed;">
● 적용 시키고자 하는 셀에 아래의 구문을 넣습니다.
style="word-break:break-all;"
[ ------------------------------ 예문 ------------------------------ ]
<td style="word-break:break-all;">
가로 스크롤바만 없애기
<body> 에 아래의 구문을 추가해주면 됩니다.
style="overflow-x:hidden;overflow-y:scroll"
[ ------------------------------ 예문 ------------------------------ ]
<body style="overflow-x:hidden;overflow-y:scroll">
● 위의 소스가 적용이 안된다면 아래처럼해보세요
<body scroll=auto style="overflow-x:hidden">
스타일시트를 이용한 글씨 세로로 쓰기
<center>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="writing-mode:tb-rl;">
내용을 적어주세요^^
</div>
</td>
</tr>
</table>
</center>
스타일을 중복 적용하자
.daerew { color:black;}
.daerew_bold { font-weight:bold; }
위의 스타일 두 개를 적용시킬 때 일반적으로 아래와 같이 사용합니다.
<span class=daerew>내용</span></span></font>
이것을 보다 편하게 아래와 같이하면 여러개를 손 쉽게 적용할 수 있습니다.
<span class='daerewdaerew_bold'>내용</span>
페이지전체 이미지 border 없애기
페이지에서 이미지의 border를 0 으로 지정하지 않으면 이미지의 테두리에 선이 생기는걸 볼수 있습니다. 일반적으로 이미지의 선을 없앨때는 border=0 이란 태그를 씁니다.
그러면, 이미지의 테두리 선이 없어지죠. 그런데, 한페이지에 이미지가 수십개라고 가정을 하고 그 이미지 각각의 테두리 선을 없애려면 하나하나 border=0 을 지정해야 합니다.
아주 노가다스럽죠..-_-;;
그럴때 한번에 해당페이지 이미지의 테두리 선을 없애는 방법이 있습니다.
스타일 시트로 정의를 내리면 가능한데요..
해당 페이지의 <head> 와 </head> 사이에 아래의 소스를 넣어보십시요.
모든 이미지의 테두리 선이 생기지 않는걸 보실수가 있습니다.
<style>
<!--
img {border: none;}
-->
</style>
스타일을 이용한 링크에 여러가지 효과 주기
<style type="text/css">
<!--
A:link {color:#666666; text-decoration:none}
A:visited {color:#666666; text-decoration:none}
A:active {color:#666666; text-decoration:none}
A:hover {color:#blue; text-decoration:none}
-->
</style>
위와 같은 기본적인 스타일 소스에서 A:hover 를 잘 이용하면 다양한 링크효과를 줄 수 있습니다.
밑 줄 A:hover {color:#blue; text-decoration:underline}
굵 게 A:hover {color:#blue; text-decoration:none; font-weight:bold}
크 게 A:hover {color:#blue; text-decoration:none; font-size:11pt}
배경색 A:hover {color:#blue; text-decoration:none; background-color:#blue; padding:2 2 0}
테두리 A:hover {color:#blue; text-decoration:none; border:1 solid #blue; padding:2 3 0}
점선테두리 A:hover {color:#blue; text-decoration:none; border:1 dotted #blue; padding:2 3 0}
누르는효과 A:hover {color:#blue; text-decoration:none; position:relative; top:2; left:2}
일반적인 텍스트에 롤오버 적용하기
테스트 해보세요 ☞ 대류커뮤니티
<span OnMouseOver="this.style.color='#blue'" OnMouseOut="this.style.color=''">내용</span>
form 문에서 여백없애기
<form .....> 이런 문은 기본적인 여백이 있습니다.
그럴때마다 style="margin:0px;padding:0px;" 라고 쓰기는 상당히 귀찮은 일일겁니다.
항상 읽어 들이는 style.css 가 있다면 다음과같이 추가 합니다.
form {padding:0px; margin:0px}
라고 추가 해 놓으면 어떠한 문장에서든지 form 문은 여백이 없어집니다.
자주 사용하는 css 속성
글꼴장식
text-decoration : 장식 글꼴 장식을 지정한다.(none,underline,overline,line-through,blink)
none : 장식 제거
underline : 밑줄
overline : 윗줄
line-through : 문자 중간에 선 첨가
blink : 문자 깜빡임
글씨굵기
font-weight : 굵기 글꼴의 굵기를 설정한다.
normal : 보통 글씨
bold : 굵은 글씨
lighter : 한단계 가는 폰트
bolder : 한단계 굵은 폰트
수치 : 100 ~ 900 (normal : 400, bold : 700에 해당)
font-style : (normal,italic,oblique)
글씨체
font-family : 글꼴 이름, 글꼴 이름, … 글꼴 종류를 지정할 때 사용한다.
serif : 명조체 (예 : Times New Roman, 바탕체)
sans-self : 고딕체 (예 : Helvetaca, Arial, 돋움체)
cursive : 필기체 계열 (예 : Caflisch Script, Adobe Poetica)
fantasy : 장식 글꼴 (예 : Critter, Cottonwood )
monospace : 고정 비례 폭 글꼴(예 : Courier New)
글꼴의 이름은 하나만 지정할 수도 있고 컴마(,)로 구분해서 여러 개를 한꺼번에 지정할 수도 있다. 여러 개를 지정할 경우는 지정되어 있는 글꼴 중 앞에서부터 시스템에 설치되어 있는 글꼴이 적용된다.
문자간격
Spacing
letter-spacing : 문자간격
text-indent : 문자 들여쓰기
line-height : 줄과 줄사이의 간격을 지정하기 위해 사용
word-spacing : 단어간격 문자와 문자간의 간격이나 단어와 단어의 간격을 설정할 때 사용한다.
normal : 표준 글자간격 설정 (Default)
실수값 + 단위 : 표준간격에서 늘어나거나 줄어들게 된다.
text-align속성으로 양쪽 정렬(justify)로 설정하면 지정한 결과가 나오지 않는 경우도 있다.
링크걸기
A:link { 스타일 } 보통상태의 링크를 의미한다.
A:visited { 스타일 } 이미 방문한 링크를 의미한다.
A:active { 스타일 } 클릭했을 때의 링크를 의미한다.
A:hover { 스타일 } 커서가 올라갔을 때의 링크를 의미한다.
자주사용되는 글씨...
한글 | "굴림체","돋움체","바탕체","궁서체"
영어 | "Arial","tahoma","verdana","Impact","times","sans-serif","geneva","courier"
Filter
FILTER: shadow(color=navy,direction=135);
FILTER: glow(color=navy,direction=135);
writing-mode:tb-rl
글씨를 세우는 역활을 하는것 입니다
CSS 만으로 구현하는 롤오버 이미지
<head> 와 </head> 사이에 아래의 구문을 삽입합니다.
<style type="text/css">
a.rollover img { border-width:0px; display:inline; }
a.rollover img.over { display:none; }
a.rollover:hover { border:0px }
a.rollover:hover img { display:none; }
a.rollover:hover img.over { display:inline; }
</style>
그리고 <body> 의 적당한 위치에 아래의 형식을 응용하여 이미지를 삽입하면 됩니다.
<a href="주소" class="rollover"><img src="기본이미지"><img src="마우스 오버시 보여줄 이미지" class="over"></a>
CSS로 둥근 모서리 구현하기
아래의 소스를 잘 살펴보세요
<style>
.rtop, .rbottom{display:block; background: #FFFFFF;}
.rtop *, .rbottom *{display: block; height: 1px; overflow: hidden; background: #9BD1FA;}
.r1{margin: 0 5px}
.r2{margin: 0 3px}
.r3{margin: 0 2px}
.r4{margin: 0 1px; height: 2px}
</style>
<div id="container" style="background: #9BD1FA">
<b class="rtop">
<b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
</b>
<p>대류커뮤니티 CSS로 둥근 모서리 구현하기</p>
<b class="rbottom">
<b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
</b>
</div>
색상값의 속성
css 에서 색상값을 지정할 때 주로 #000000, #ffffff 이런식으로 사용하지요...
이 때 반복되는 부분이라면 #000, #fff 이런식으로 세자리로 줄여서 사용해도 됩니다.
#ff9900 같은 경우는 #f90 라고 적어주면 됩니다.
그럼 #090 은 #009900 과 같은거고 #dbd 는 #ddbbdd 와 같은거겠죠? ^^;
값이 다를 경우 각각 두개씩 붙어 나옵니다.
효율적인 폰트 속성 지정
보통 css 에서 폰트 속성을 지정할 때 아래와 같이 하지요...
{font-family:굴림; font-size:9pt; color:black}
이것을 좀 더 간단하게 지정할 수 있습니다.
{font:9pt "굴림"; color:black}
이슬 01.26 01:36 삭제
참고로 CSS의 font 약식표현에는 순서가 있습니다. font-style font-variant font-weight font-size font-family 이런 순서로 구성을 해주셔야만 제대로 보여집니다. ^^ 유독 font에만 적용이 되더군요 border같은 것들은 순서에 상관 없던데..
셀렉트박스(풀다운)에 색깔 넣기
<select style="font-size:9pt;">
<option>select color
<option style="background-color:000000;color:white" value="#000000">black
<option style="background-color:2f4f4f;color:white" value="#2f4f4f">darkslategray
<option style="background-color:696969;color:white" value="#696969">dimgray
<option style="background-color:808080;color:white" value="#808080">gray
<option style="background-color:708090;color:white" value="#708090">slategray
<option style="background-color:778899;color:white" value="#778899">lightslategray
<option style="background-color:a9a9a9;color:white" value="#a9a9a9">darkgray
<option style="background-color:c0c0c0" value="#c0c0c0">silver
<option style="background-color:d3d3d3" value="#d3d3d3">lightgrey
<option style="background-color:dcdcdc" value="#dcdcdc">gainsboro
<option style="background-color:ffffff" value="#ffffff">white
<option style="background-color:fff5ee" value="#fff5ee">seashell
<option style="background-color:fffafa" value="#fffafa">snow
<option style="background-color:f8f8ff" value="#f8f8ff">ghostwhite
<option style="background-color:fffaf0" value="#fffaf0">floralwhite
<option style="background-color:f5f5f5" value="#f5f5f5">whitesmoke
<option style="background-color:f0f8ff" value="#f0f8ff">aliceblue
<option style="background-color:f0ffff" value="#f0ffff">azure
<option style="background-color:fdf5e6" value="#fdf5e6">oldlace
<option style="background-color:f5fffa" value="#f5fffa">mintcream
<option style="background-color:ffefd5" value="#ffefd5">papayawhip
<option style="background-color:ffdab9" value="#ffdab9">peachpuff
<option style="background-color:faf0e6" value="#faf0e6">linen
<option style="background-color:eee8aa" value="#eee8aa">palegoldenrod
<option style="background-color:ffe4e1" value="#ffe4e1">mistyrose
<option style="background-color:ffe4b5" value="#ffe4b5">moccasin
<option style="background-color:ffdead" value="#ffdead">navajowhite
<option style="background-color:d2b48c" value="#d2b48c">tan
<option style="background-color:f5deb3" value="#f5deb3">wheat
<option style="background-color:fafad2" value="#fafad2">lightgoldenrodyellow
<option style="background-color:ffffe0" value="#ffffe0">lightyellow
<option style="background-color:fff8dc" value="#fff8dc">cornsilk
<option style="background-color:faebd7" value="#faebd7">antiquewhite
<option style="background-color:f5f5dc" value="#f5f5dc">beige
<option style="background-color:fffacd" value="#fffacd">lemonchiffon
<option style="background-color:fffff0" value="#fffff0">ivory
<option style="background-color:f0e68c" value="#f0e68c">khaki
<option style="background-color:e6e6fa" value="#e6e6fa">lavender
<option style="background-color:fff0f5" value="#fff0f5">lavenderblush
<option style="background-color:ffe4c4" value="#ffe4c4">bisque
<option style="background-color:ffebcd" value="#ffebcd">blanchedalmond
<option style="background-color:deb887" value="#deb887">burlywood
<option style="background-color:cd853f" value="#cd853f">peru
<option style="background-color:00ced1" value="#00ced1">darkturquoise
<option style="background-color:00bfff" value="#00bfff">deepskyblue
<option style="background-color:7fffd4" value="#7fffd4">aquamarine
<option style="background-color:1e90ff" value="#1e90ff">dodgerblue
<option style="background-color:00ffff" value="#00ffff">cyan
<option style="background-color:f0fff0" value="#f0fff0">honeydew
<option style="background-color:87cefa" value="#87cefa">lightskyblue
<option style="background-color:afeeee" value="#afeeee">paleturquoise
<option style="background-color:e0ffff" value="#e0ffff">lightcyan
<option style="background-color:add8e6" value="#add8e6">lightblue
<option style="background-color:b0c4de" value="#b0c4de">lightsteelblue
<option style="background-color:40e0d0" value="#40e0d0">turquoise
<option style="background-color:48d1cc" value="#48d1cc">mediumturquoise
<option style="background-color:00ffff" value="#00ffff">aqua
<option style="background-color:7b68ee;color:white" value="#7b68ee">mediumslateblue
<option style="background-color:191970;color:white" value="#191970">midnightblue
<option style="background-color:6495ed;color:white" value="#6495ed">cornflowerblue
<option style="background-color:0000cd;color:white" value="#0000cd">mediumblue
<option style="background-color:6a5acd;color:white" value="#6a5acd">slateblue
<option style="background-color:4682b4;color:white" value="#4682b4">steelblue
<option style="background-color:0000ff;color:white" value="#0000ff">blue
<option style="background-color:483d8b;color:white" value="#483d8b">darkslateblue
<option style="background-color:5f9ea0;color:white" value="#5f9ea0">cadetblue
<option style="background-color:87ceeb;color:white" value="#87ceeb">skyblue
<option style="background-color:4169e1;color:white" value="#4169e1">royalblue
<option style="background-color:b0e0e6;color:white" value="#b0e0e6">powderblue
<option style="background-color:000080;color:white" value="#000080">navy
<option style="background-color:00008b;color:white" value="#00008b">darkblue
<option style="background-color:8a2be2;color:white" value="#8a2be2">blueviolet
<option style="background-color:8b008b;color:white" value="#8b008b">darkmagenta
<option style="background-color:9932cc;color:white" value="#9932cc">darkorchid
<option style="background-color:9400d3;color:white" value="#9400d3">darkviolet
<option style="background-color:ff00ff" value="#ff00ff">magenta
<option style="background-color:ff00ff" value="#ff00ff">fuchsia
<option style="background-color:c71585" value="#c71585">mediumvioletred
<option style="background-color:ba55d3" value="#ba55d3">mediumorchid
<option style="background-color:9370db" value="#9370db">mediumpurple
<option style="background-color:dc143c" value="#dc143c">crimson
<option style="background-color:ff1493" value="#ff1493">deeppink
<option style="background-color:ffb6c1" value="#ffb6c1">lightpink
<option style="background-color:ff69b4" value="#ff69b4">hotpink
<option style="background-color:ffc0cb" value="#ffc0cb">pink
<option style="background-color:dda0dd" value="#dda0dd">plum
<option style="background-color:800080;color:white" value="#800080">purple
<option style="background-color:ee82ee" value="#ee82ee">violet
<option style="background-color:d8bfd8" value="#d8bfd8">thistle
<option style="background-color:da70d6" value="#da70d6">orchid
<option style="background-color:4b0082;color:white" value="#4b0082">indigo
<option style="background-color:a52a2a;color:white" value="#a52a2a">brown
<option style="background-color:e9967a;color:white" value="#e9967a">darksalmon
<option style="background-color:f08080" value="#f08080">lightcoral
<option style="background-color:cd5c5c" value="#cd5c5c">indianred
<option style="background-color:ffa07a" value="#ffa07a">lightsalmon
<option style="background-color:db7093" value="#db7093">palevioletred
<option style="background-color:f4a460" value="#f4a460">sandybrown
<option style="background-color:fa8072" value="#fa8072">salmon
<option style="background-color:ff6347" value="#ff6347">tomato
<option style="background-color:ff4500" value="#ff4500">ornagered
<option style="background-color:ff0000" value="#ff0000">red
<option style="background-color:800000;color:white" value="#800000">maroon
<option style="background-color:8b0000;color:white" value="#8b0000">darkred
<option style="background-color:b22222;color:white" value="#b22222">firebrick
<option style="background-color:d2691e;color:white" value="#d2691e">chocolate
<option style="background-color:8b4513;color:white" value="#8b4513">saddlebrown
<option style="background-color:a0522d;color:white" value="#a0522d">sienna
<option style="background-color:bc8f8f" value="#bc8f8f">rosybrown
<option style="background-color:ff7f50" value="#ff7f50">coral
<option style="background-color:ff8c00" value="#ff8c00">darkorange
<option style="background-color:ffa500" value="#ffa500">orange
<option style="background-color:b8860b" value="#b8860b">darkgoldenrod
<option style="background-color:ffd700" value="#ffd700">gold
<option style="background-color:ffff00" value="#ffff00">yellow
<option style="background-color:7fff00" value="#7fff00">chartreuse
<option style="background-color:7cfc00" value="#7cfc00">lawngreen
<option style="background-color:00ff00" value="#00ff00">lime
<option style="background-color:32cd32" value="#32cd32">limegreen
<option style="background-color:00ff7f" value="#00ff7f">springgreen
<option style="background-color:3cb371" value="#3cb371">mediumseagreen
<option style="background-color:adff2f" value="#adff2f">greenyellow
<option style="background-color:8fbc8f" value="#8fbc8f">darkseagreen
<option style="background-color:90ee90" value="#90ee90">lightgreen
<option style="background-color:98fb98" value="#98fb98">palegreen
<option style="background-color:9acd32" value="#9acd32">yellowgreen
<option style="background-color:2e8b57;color:white" value="#2e8b57">seagreen
<option style="background-color:00fa9a" value="#00fa9a">mediumspringgreen
<option style="background-color:20b2aa" value="#20b2aa">lightseagreen
<option style="background-color:66cdaa" value="#66cdaa">mediumaquamarine
<option style="background-color:228b22;color:white" value="#228b22">forestgreen
<option style="background-color:008b8b;color:white" value="#008b8b">darkcyan
<option style="background-color:008080;color:white" value="#008080">teal
<option style="background-color:006400;color:white" value="#006400">darkgreen
<option style="background-color:556b2f;color:white" value="#556b2f">darkolivegreen
<option style="background-color:008000;color:white" value="#008000">green
<option style="background-color:808000;color:white" value="#808000">olive
<option style="background-color:6b8e23;color:white" value="#6b8e23">olivedrab
<option style="background-color:bdb76b" value="#bdb76b">darkkhaki
<option style="background-color:daa520" value="#daa520">goldenrod
</select>
셀렉트 박스에서 내용 우측정렬시키기
<SELECT style="direction:rtl;">
<OPTION>내용</OPTION>
<OPTION>내용</OPTION>
</SELECT>
간단히 링크점선 없애기
보통 링크의 점선을 없애기위해 자바스크립트를 이용하거나 =this.blur(); 이런식으로 처리를 하시죠?
css 한 줄로 텍스트링크, 이미지링크 모두 처리가 가능합니다.
a { selector-dummy : ｅxpression(this.hideFocus=true);}
[출처] css|작성자 나라라
http://blog.naver.com/boyoun0603?Redirect=Log&logNo=50087299351