스크립트를 사용하지 않더라도 브라우저에서는 말 줄임을 css로 가능하게 지원해준다.

아래는 지원여부에 따라 테스트해본 결과이다.


<div class="selector">
test text.
test text.
test text.
test text.
test text.
test text.
test text.
</div>


.selector {
	width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}


css의 네가지 규칙만 넣어주면, IE6~10, safari, firefox, chrome 모두 잘 나왔다. (만약 부모노드에서 width값과 overflow: hidden이 걸려있으면 텍스트를 담은 태그에서는 생략해도 관계없다.)


그러면 2줄 이상일때 말줄임도 가능할까? html은 위와 같고 css만 다르게 변경하여 테스트 해보았다.



.selector {
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
	overflow: hidden;
	width: 150px;
	text-overflow: ellipsis;
}

이상하게도 webkit 계열(chrome, safari)을 제외한 나머지 브라우저에서는 안된다.

이런저런 방법을 해보았지만, 안된다. 크로스 브라우징을 생각한다면 가장 확실한

방법은 역시 스크립트 정답인듯 싶다.


돌아다니는중에 이 문제에 관련해서,

참고할만한 포스트와 플러그인 링크를 걸어두었다.



출처 : http://blim.co.kr/archives/22

'Computer > CSS' 카테고리의 다른 글

CSS로 말줄임 효과내기  (0) 2015.02.26
IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19

예전에 인터넷 익스플로러 9 (IE 9)에서 네이버 스마트 에디터 오류로 인하여 에디터 편집창이 활성화되지 않는 버그가 있어 코드를 아래와 같이 수정하였다.




Husky.SE_Basic.js 의 283번째 줄 부근?? 아마.. 이 근처인듯하다.


if(this.bIE){button=document.createElement("<BUTTON type='button'>");}


의 코드를 IE9 에 맞게 아래줄로 바꿔 줌.


if(this.bIE&&navigator.appVersion.indexOf("MSIE 9")){button=document.createElement("<BUTTON type='button'>");}else{button=document.createElement("BUTTON");button.type="button";}


이렇게 수정하였다.

IE8 이하버전과 IE9 이후 버전의 엘리먼트 생성 부분의 차이때문에 발생하였다.


이렇게 놔두고 IE 10 버전이 나오니 또 오류 ㅋㅋ.....

아놔 돌겠다.


그래서 아래처럼 코드를 수정 -_-;


if(this.bIE&&navigator.appVersion.indexOf("MSIE 9")<0&&navigator.appVersion.indexOf("MSIE 10")<0){button=document.createElement("<BUTTON type='button'>");}else{button=document.createElement("BUTTON");button.type="button";}


IE9, IE10 이 아닌 IE 버전은 기존코드를 그대로 쓰고 아닌건 표준 코드로 작성....



'Computer > CSS' 카테고리의 다른 글

CSS로 말줄임 효과내기  (0) 2015.02.26
IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
  1. 하정구 2013.06.19 15:38 신고

    if(this.bIE){try{button=document.createElement("<BUTTON type='button'>";);}
    catch(e){button=document.createElement("BUTTON";);button.type="button";}}
    else{button=document.createElement("BUTTON";);button.type="button";}



    출처 : http://dev.naver.com/projects/smarteditor/forum/26361

    전부 안되는 분들은 이거로 해보세요 ..

 

word-wrap: break-word; /* Internet Explorer 5.5+ */
     white-space: pre-wrap; /* css-3 */
     white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
     white-space: -pre-wrap; /* Opera 4-6 */
     white-space: -o-pre-wrap; /* Opera 7 */ 
     word-break:break-all;

 

 

 

 

FF억지춘향 줄바꿈 

/ Dev

html에서 한 문장의 줄이 길어지면 보통은 자동으로 줄바꿈해주지 않는다.
IE(5.5부터인가?)의 경우는 css에 "word-wrap:break-word;"를 써주면 조금 어색한 곳이라도 무조건 줄바꿈시켜준다.
문제는 Firefox!! 여차저차 정치적이고 알록달록한 이유로 현재 "word-wrap"스타일은 IE만 먹는다.

FF 의 경우는 한글을 2바이트로, 영문을 1바이트로 글자 수를 계산하면 내가 원하는 한 줄에는 대략 몇 바이트가 들어가는지 계산이 나온다. 그 한 줄에 해당하는 바이트가 될 때마다 글자 끝에 "​&#x200B;"를 붙이면 자동으로 줄바꿈이된다.("​&#x200B;"이 나올 때 마다 줄바꿈을 해야하는지 아닌지를 판단한다)
이 엔티티는 레이아웃상으로 전혀 드러나지 않는 엔티티이므로 마음껏 써도 된다.

"&#x200B;​"는 태국어에서 쓰는 너비 없는 단어 구분자라고 하던데 이런게 왜 태국어에 있는지는 모르겠지만 여튼 그 덕분에 FF에서도 줄바꿈이 가능해졌다.

이 글은 스프링노트에서 작성되었습니다.

.

'Computer > CSS' 카테고리의 다른 글

CSS로 말줄임 효과내기  (0) 2015.02.26
IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19

브라우저의 버그를 hack으로 해결할 수 있는 부분이 많이 있습니다만 그보다 사이트의 CSS구 조를 설계할때 각 브라우저의 속성을 파악해고 조금만 더 주의해서 설계를 하시면 hack을 사용하지 않고도 해결할 수 있는 부분이 많이 있습니다. hack을 사용할때는 조금 더 신중하게 사용하시는게 좋습니다. 특히 예전 버전의 브라우저에 적용되었던 hack이 새로운 브라우저에 영향을 끼칠 가능성이 있으며 CSS를 변경 할 때 업무효율을 저하시키는 한 요인이 될 것 입니다.
Intenet Explorer계열의 브라우저에서 제대로 표시가 되지 않는 경우에는 일단 width값이나 float관련 설정을 변경해 보시는 것도 하나의 방법인 것 같습니다. 혹시 Intenet Explorer에서 float와 margin을 같은 방향으로 설정했을때 문제가 생긴 경우라면 이 포스트를 참조하시기 바랍니다.

Netscape 4 제외시키기

Netscape 4은 media속성값에 “screen”이외의 값이 올 경우 읽어 들이지 못하는 것을 이용한 방법이다.

<link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />

이나

<link rel="stylesheet" type="text/css" href="/css/style.css" media="screen, tv" />

라고 지정할 경우 Netscape 4은 읽어 들이지 못한다.

부분적으로 읽어들이지 못하게 하는 경우에는 Caio’s hack인 /*/*/를 이용한다. 보통 코멘트는 */으로 닫지만 /*/으로 닫게 되면 Netscape 4에서는 인식되지 않는다. 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Netscape 4에서도 문제없이 적용된다.

p {
/*/*/ color:white; /* */
}

Mac IE 4.5, Netscape 4 제외시키기

@import룰로 url()함수를 이용하여 외부 스타일시트를 이중인용부호로 지정한다.
Mac IE 4.5는 @import에 url()함수를 이용하는 경우, 단일 인용부호와 인용부호가 없는 것이 아니면 읽어 들이지 못한다. Netscape 4은 @import를 지원하지 않는다.

@import url("/css/style.css")

Mac IE 5 제외시키기

CSS소스 안의 코멘트 서식을 /* \*/ 이라는 방식으로 기술한다. holly hack이라고 하며 그 뒤에 평상시의 코멘트 /* */를 적어두면 그 뒤의 스타일은 Mac IE 5에서도 문제없이 적용된다.

p {
/* \\*/ color:white; /* */
}

Win IE 4~5 제외시키기

셀렉터 바로 뒤에 /**/라고 적는다.

p/**/ { color:white;}

Win IE 4~5, Mac IE 4.5~5 제외시키기

프로퍼티와 값을 구분하는 콜론(;) 앞에 코멘트에 스페이스를 포함하여 /* */라고 적는다.

p { color/* */:white;}

Win IE 4~6, Mac IE 4, Netscape 4 제외시키기

셀렉터 앞에 html>body를 붙인다.

html>body p { color:white;}

Win IE 6 제외시키기

프로퍼티와 값을 구분하는 콜론(;)의 앞에, 스페이스와 코멘트를 /**/라고 적는다.

p { color /**/:white;}

star hack

셀렉트 앞에 *html를 붙이면, Win IE 4~6, Mac IE 4~5 등에는 스타일이 적용되고, 그 외의 브라우저에서는 적용되지 않는다.

*html p { color:white; }

underscore hack

프로퍼티의 가장 앞부분에 언더스코어(_)를 붙이면, Win IE 4~6에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

p { _color:white; }

hash hack

프로퍼티의 앞에 샾(#)을 붙이면, Win IE 4~6, Mac IE 5, Opera 7, Mozilla, Firefox에서는 스타일이 적용되고, 다른 브라우저에는 적용되지 않는다.

p { #color:white; }

star 7 hack

셀렉트의 앞에 html*을 붙이면, Win IE 5.5~6, Mac IE 5, Safari 등에서 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다. html*과 셀렉터사이에 스페이스를 넣지 않는다.

html*p { color:white; }

xmlns hack

속성셀렉터를 이용하여, html요소에 붙이는 xmlns속성을 스타일적용을 위하여 사용하는 방법.
Mozilla, Fire-fox, Opera 7/8, Safari, IE 7 등 속성셀렉터를 서포트하는 브라우저에서는 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

html[xmlns] h1 { color:red; }

:root hack

셀렉터의 앞에 :root를 붙이면, Mozilla, Firefox, Mac IE 5, Safari 등 :root유사클래스를 지원하는 브라우저에만 스타일이 적용되고, 다른 브라우저에서는 적용되지 않는다.

:root h1 { color:red; }

Tantek box model hack

voice-family프로퍼티를 이용한 가장 유명한 박스모델핵.

div#content {
width:500px;
voice-family: "\"}\"";
voice-family:inherit;
width:400px;
}

Win IE 5용 패스필터

@media tty {
i{content:"\";/*" "*/}}; @import '/css/style.css'; {;}/*";}
}/* */

Win IE 5.5용 패스필터

@media tty {
i{content:"\";/*" "*/}}@m; @import '/css/style.css';/*";}
}/* */

Win IE 5-5.5용 패스필터

@media tty {
i{content:"\";/*" "*/}}@import '/css/style.css';/*";}
}/* */

모던브라우저용 패스필터

@import "null?\"\{";
@import "/css/style.css";
@import "null?\"\}";

이 이외에도 많은 핵(hack)이 존재한다. CSS Filters (dithered.com)에 다양한 CSS hack이 잘 정리되어 있으므로 참고하시길…

2006년 7월 18일, IE7용의 핵(hack)을 추가.

IE7에만 적용

IE7에만 다른 스타일을 적용하는 방법은 해당 셀렉터의 앞에

*+html body

이나(*+html body는 Opera8~에도 적용되어 버리는 문제가 있기에 *+html>/**/body로 Opera8~ 전용 스타일을 기술하여야 한다. 참조:IE7のCSSバグとOpera CSS Hack)

*:first-child+html

을 기술한 다음 해당 셀렉터와 스타일을 작성하면 된다. 예를 들어 #banner라는 id셀렉터에 적용시키는 경우

*:first-child+html #banner {
      :
  [IE7용 스타일을 기술]
      :
}

라고 기술한다. IE7이외의 브라우저를 위한 원래의 #banner 스타일 설정은 IE7용 스타일 설정 앞에 기술한다(순서가 바뀌면 원하는 효과를 얻지 못한다. 참조:IE7 の CSS ハック)

#banner {
      :
  [IE7이외의 브라우저를 위한 스타일을 기술]
      :
}
*:first-child+html #banner {
      :
  [IE7용 스타일을 기술]
      :
}

IE 6 and below (IE6이하)

* html

IE 7 and below (IE7이하)

*:first-child+html, * html

IE 7 only (IE7전용)

*:first-child+html

IE 7 and modern browsers only (IE7과 모던브라우저)

html>body

Modern browsers only (not IE 7) (IE7이외의 모던 브라우저)

html>/**/body

Recent Opera versions 9 and below (최근의 Opera9이하)
Opera 9와 Safari 동시적용

html:first-child

Safari에만 적용
Opera 9와 Safari 동시적용

/* XXX \*/로 코멘트 아웃하고 html:\66irst-child를 덧붙임으로써 Safari에만 CSS가 적용된다.

/* safari only \\*/
html:\\66irst-child div.globalContainer{
margin: 0 0 0 18px;
}
/* end */

내용중 잘못된 부분이나 수정, 추가가 필요한 부분이 있으시면 의견 부탁드립니다.

이 글은 스프링노트에서 작성되었습니다.

.

'Computer > CSS' 카테고리의 다른 글

IE10에서 네이버 스마트 에디터 자바스크립트 오류  (2) 2013.05.13
자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26

소개 :

무료로 사용이 가능한 사이트 디자인 템플릿을 공유해 주는 해외 사이트입니다

국내의 그래픽 칠갑이나 빼곡한 리스트의 경향과 대조적으로 한가로운 분위기네요?


http://www.opensourcetemplates.org/

http://www.templateworld.com/free_templates.html

http://www.oswd.org/

http://www.free-css-templates.com/free-templates.html

http://www.templatesbox.com/

http://www.freelayouts.com/websites

http://www.ex-designz.net/template/tempcat.asp?cat_id=13

http://www.openwebdesign.org/browse.php

http://www.code-sucks.com/free-css-templates/

http://www.oswt.co.uk/browse_designs.html

http://www.solucija.com/home/css-templates/

http://www.cssfill.com/

http://www.sixshootermedia.com/free-templates/

.

'Computer > CSS' 카테고리의 다른 글

자동 개행  (0) 2012.08.10
CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/> 
<style> 
/* --- base --- */ 
a.tooltip { position: relative; text-decoration: underline;
a.tooltip:hover { color: #999999; text-decoration: none !important; } 

a.tooltip:hover:after, a.tooltip:hover:before { display: block; } 

/* --- tooltip container --- */ 
a.tooltip:before { 
content: attr(rel); 
display: block; 
width: 140px; 
    position: absolute; 
z-index: 1000; 
    bottom: 150%; 
    left: -10px; 
    padding: 5px 10px 8px 10px; 
text-align: left; 
    color: #ffffff; 
    display: none; 
/* background */ 
background: #404040; /* CSS2 */ 
background: -moz-linear-gradient(top, #4e4e4e 0%, #404040 100%); /* FF3.6+ */ 
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4e4e4e), color-stop(100%,#404040)); /* Chrome,Safari4+ */ 
background: -webkit-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Chrome10+,Safari5.1+ */ 
background: -o-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* Opera 11.10+ */ 
background: -ms-linear-gradient(top, #4e4e4e 0%,#404040 100%); /* IE10+ */ 
background: linear-gradient(top, #4e4e4e 0%,#404040 100%); /* W3C */ 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4e4e4e', endColorstr='#404040',GradientType=0 ); /* IE6-9 */ 
/* border-radius */ 
-webkit-border-radius: 2px; 
-moz-border-radius: 2px; 
border-radius: 2px; 
/* box-shadow */ 
-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); 
/* text-shadow */ 
text-shadow: 0px 1px 0px #292929; 

/* --- tooltip arrow --- */ 
a.tooltip:after { 
content: ""; 
display: block; 
    width: 0; 
    height: 0; 
    position: absolute; 
z-index: 1000; 
bottom: 18px; 
left: -2px; 
    border-left: 6px solid transparent; 
    border-right: 6px solid transparent; 
border-top: 6px solid #404040; 
    display: none; 
background: transparent;
</style> 
</head> 
<body> 
<br><br><br><br> 
<span><a href="#" class="tooltip" rel="이런 저런 내용이나 설명">링크나 제목</a></span> 
</body> 
</html> 



외국사이트 돌아다니다 이런식으로 가능한줄 처음 알았네요 ㅜ.ㅜ 
맨날 Javascript나 레이어 처리만 했었는데 -0- 
여러곳에 사용할때 편할것 같습니다. 

IE9, Chrome16 , FF9 등에서 확인 하였습니다. 
난 너무 최신버전만 좋아해 ㅜ.ㅜ

 
.

'Computer > CSS' 카테고리의 다른 글

CSS Hack  (0) 2012.08.10
디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15
회사에 내부 인트라넷에 통계용 그래프를 이전에는 VML 을 이용해서 작성했었는데

VML 이건 완전 캐노가다. ㅠㅠ.

VML 로직 짜는데 머리 다 빠지는줄. 그런데도 영 볼품은 없고.

그러다가 open-flash-chart 라는걸 알게됨......

이야 와방 굳임.!

굳!굳!굳!


[ 새 창으로 보기 ]


.

'Computer > CSS' 카테고리의 다른 글

디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15
한국의 전통색  (0) 2005.03.07
익스플로러버전6 부터 지원되는 이미지툴바를 제어하는 방법입니다.
MSDN에 있는 내용을 간략히 정리해봤읍니다.

관련문서: [ http://msdn.microsoft.com/library/default.asp?url=/workshop/misc/mypictures/mypictures_ovw.asp ]

모든 이미지의툴바 숨김
[CODE]<head> <meta http-equiv="imagetoolbar" content="no"> <!-- 모든 이미지에 툴바가 나타나지 않는다. --> </head> <body> <img src="1.jpg"> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]


특정 이미지의툴바 보여줌

[CODE]<head> <meta http-equiv="imagetoolbar" content="no"> </head> <body> <img src="1.jpg" galleryimg="yes"> <!-- 이곳 이미지에만 이미지툴바가 나타난다. --> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]


특정 이미지의툴바 감춤

헤데에 http-equiv="imagetoolbar" content="no" 를 선언하지 않고
특정 이미지만 툴바가 나타나지 않도록 설정할 수 있읍니다.

[CODE]<body> <img src="1.jpg" galleryimg="no"> <!-- 특정 이미지만 툴바가 나타나지 않는다. --> <img src="2.jpg"> <img src="3.jpg"> </body>[/CODE]

출처 : PHPSCHOOL 에서 우정원님의 글.

'Computer > CSS' 카테고리의 다른 글

디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15
한국의 전통색  (0) 2005.03.07
  1. waitfor 2005.06.25 01:26 신고

    툴바.. 생각보다 거추장스러워보이는 경우가 많아요. 저도 전부터 적용을 해두고 있는데.. 쓸만합니다. :D

  2. crazyidol 2005.06.25 01:38 신고

    waitfor//
    그렇죠... 좀 거추장스럽죠
    헉 출처를 안 밝히고 가져왔네.
    수정해야겠당.

블로그 방문도중 네임택 만들어주는 사이트가 링크되어있어서
방문해봤다.
신기하다 ^_^*
이런거 첨 봐서 ㅎㅎ
나두 하나 만들어봤당.









어떤가 ㅎㅎㅎ

아래로 방문하면 만들어준다
http://cat.powerdb.net/email/custom.php







>>ㅑ 아래 세개는 마루호스팅 커뮤니티에서 만든건데...
귀엽다 ^_^;.

'Computer > CSS' 카테고리의 다른 글

디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15
한국의 전통색  (0) 2005.03.07
  1. waitfor 2005.05.15 23:00 신고

    트랙백 보고 왔습니다.
    네임택 심플하고 좋네요~!

무채색계(無彩色界)
흑백1D1E2393,89,83,52
백색FFFFFF0,0,0,0
회색A4AAA738,27,31,0
구색959EA245,32,32,0
치색61626472,64,62,4
연지회색6F606E55,58,40,20
설백색DDE7E712,4,7,0
유배색E7E6D29,5,18,0
지배색E3DDCB6,6,17,4
소색D8C8B210,15,26,5
적색계(赤色界)
적색B8264721,98,68,8
홍색F15B5B0,80,60,0
적토색9F494C29,80,64,17
휴색68323540,80,66,44
갈색96614731,61,73,21
호박색BD7F4121,51,84,8
추향색C3886619,48,61,6
육색D7796411,62,59,2
주색CA5E5915,75,62,4
주홍색C2335218,94,60,5
담주색EA84744,59,50,0
진홍색BF2F7B20,94,17,4
선홍색CE5A9E16,79,2,0
연지색BE577B19,77,28,7
훈색D977939,64,20,2
진분홍색DB4E9C9,84,0,0
분홍색E2A6B47,39,14,1
연분홍색E0709B6,69,11,1
장단색E163506,75,70,1
석간주색8A4C4430,71,65,30
흑홍색8E6F8040,54,31,15
황색계(黃色界)
황색F9D5373,13,89,0
유황색EBBC6B6,25,67,1
명황색FEE1342,7,89,0
담황색F5F0C54,2,27,0
송화색F8E77F4,4,62,0
자황색F7B9382,29,89,0
행황색F1A55A3,40,73,0
두록색E5B98F8,27,45,1
적황색ED91494,51,80,0
토황색C8852C18,50,97,5
지황색D6B03814,26,91,3
토색9A6B3130,54,91,20
치자색F6CF7A3,18,61,0
홍황색DDA28F9,39,38,2
자황색BB9E8B22,33,40,7
금색별색
청록색계(靑綠色界)
청색0B6DB789,56,0,0
벽색00B5E373,5,4,0
천청색5AC6D059,0,20,0
담청색00A6A996,4,40,0
취람색5DC19B62,0,51,0
양람색6C71B564,58,0,0
벽청색448CCB72,36,0,0
청현색00649499,59,22,3
감색02689293,57,26,2
남색6A5BA868,73,0,0
연람색7963AB60,69,0,0
벽람색6979BB64,52,0,0
숙람색45436C86,84,40,9
군청색4F599F80,73,6,0
녹색41714182,44,95,9
명록색16AA5281,5,94,0
유록색6AB04864,8,97,0
유청색569A4972,20,96,1
연두색C0D84D29,0,87,0
춘유록색CBDD6124,0,78,0
청록색00977097,15,74,0
진초록색0A8D5E87,26,82,1
초록색1C924985,20,98,2
흑록색2E674E89,52,83,9
비색72C6A555,0,45,0
옥색9ED6C038,0,30,0
삼청색5C6EB471,59,0,0
뇌록색39766474,27,59,6
양록색31B67574,0,74,0
하염색24544183,43,75,39
흑청색1583AF84,39,17,0
청벽색18B4E969,8,0,0
자색계(紫色界)
자색6D1B4341,95,45,40
자주색89236A40,96,18,20
보라색9C499842,85,1,1
홍람색733E7F58,85,10,15
포도색5D346270,90,35,20
청자색403F9590,90,1,1
벽자색84A7D347,25,1,1
회보라색B3A7CD28,32,1,1
담자색BEA3C923,36,1,1
다자색47302E75,86,85,35
적자색BA416015,86,42,13
.

'Computer > CSS' 카테고리의 다른 글

디자인 템플릿  (0) 2012.08.10
[HTML] CSS3 를 이용한 툴팁(Tooltip) 표시  (0) 2012.01.19
와우.....open-flash-chart 이거 와방 좋네요.  (0) 2007.10.26
이미지 툴바 감추기  (2) 2005.06.25
이메일 네임택 만들어주는 사이트  (1) 2005.05.15
한국의 전통색  (0) 2005.03.07

+ Recent posts

티스토리 툴바