글자색, 배경색, 테두리색, 그림자색 등 모든곳에 사용할 수 있습니다.
그럼 시작해 볼까요? ㅎ
CSS 에서의 컬러값
CSS 공작소에 방문해 주셔서 감사드립니다. 반응형 예제로 느껴보세요!!
CSS 에서 컬러를 지정할때 사용할 수 있는 방법을 정리해 보았습니다.
몇가지 방법이 있는데 하나씩 예제로 살펴보겠습니다.
이곳의 내용은 16진수 컬러값 과 rgb 컬러값에 대한 약간의 지식이 있다는 가정하에 작성한 내용입니다. ^^;;
(어렵지 않습니다 !)
예제 1
이 방법은 CSS 에서 컬러를 지정하는 모든 곳에 사용할 수 있습니다.
설명
예제 2
컬러의 "영문명" 으로 사용하는 방법
보기
red
green
blue
deep pink
slate gray
소스
<style type="text/css">
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
font-weight : bold;
height : 100px;
line-height : 100px !important;
width : 100px;
}
</style>
<div class="css_test">
<div style="background:red;">red</div>
<div style="background:green;">green</div>
<div style="background:blue;">blue</div>
<div style="background:deeppink;">deep pink</div>
<div style="background:slategray;">slate gray</div>
</div>
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
font-weight : bold;
height : 100px;
line-height : 100px !important;
width : 100px;
}
</style>
<div class="css_test">
<div style="background:red;">red</div>
<div style="background:green;">green</div>
<div style="background:blue;">blue</div>
<div style="background:deeppink;">deep pink</div>
<div style="background:slategray;">slate gray</div>
</div>
사용된 CSS (클릭시 보기) :
backgroundborder-radiuscolordisplayfont-sizefont-weightheightline-heightpaddingtext-alignwidth
설명
- 영문 컬러명으로 사용하는 방법입니다.
- background : red 처럼 사용합니다.
- 컬러명은 띄어쓰기 없이 입력해 주어야 합니다. steel blue 같은 경우라면 steelblue 처럼요.
예제 3
참고 : 컬러 영문명과 색보기 (139개)
보기
maroon
dark red
brown
firebrick
crimson
red
tomato
coral
indian red
light coral
dark salmon
salmon
light salmon
orange red
dark orange
orange
gold
dark golden rod
golden rod
pale golden rod
dark khaki
khaki
olive
yellow
yellow green
dark olive green
olive drab
lawn green
chart reuse
green yellow
dark green
green
forest green
lime
lime green
light green
pale green
dark sea green
medium spring green
spring green
sea green
medium aqua marine
medium sea green
light sea green
dark slate gray
teal
dark cyan
aqua
cyan
light cyan
dark turquoise
turquoise
medium turquoise
pale turquoise
aqua marine
powder blue
cadet blue
steel blue
corn flower blue
deep sky blue
dodger blue
light blue
sky blue
light sky blue
midnight blue
navy
dark blue
medium blue
blue
royal blue
blue violet
indigo
dark slate blue
slate blue
medium slate blue
medium purple
dark magenta
dark violet
dark orchid
medium orchid
purple
thistle
plum
violet
magenta
orchid
medium violet red
pale violet red
deep pink
hot pink
light pink
pink
antique white
beige
bisque
blanched almond
wheat
corn silk
lemon chiffon
light golden rod yellow
light yellow
saddle brown
sienna
chocolate
peru
sandy brown
burly wood
tan
rosy brown
moccasin
navajo white
peach puff
misty rose
lavender blush
linen
old lace
papaya whip
sea shell
mint cream
slate gray
light slate gray
light steel blue
lavender
floral white
alice blue
ghost white
honeydew
ivory
azure
snow
black
dim gray
gray
dark gray
silver
light gray
gainsboro
white smoke
white
설명
- 컬러테이블의 영문명을 참고하여 직접 만들어 보았습니다.
- 영문 컬러명이 의외로 많고 재미있습니다. ^^;
- 영문 컬러명이 의외로 많고 재미있습니다. ^^;
예제 4
"#FF0077" 같은 16진수 코드값으로 사용하기
보기
#FF0000
#008000
#0000FF
#FF1493
#708090
소스
<style type="text/css">
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
font-weight : bold;
height : 100px;
line-height : 100px !important;
width : 100px;
}
</style>
<div class="css_test">
<div class="" style="background:#FF0000;">#FF0000</div>
<div class="" style="background:#008000;">#008000</div>
<div class="" style="background:#0000FF;">#0000FF</div>
<div class="" style="background:#FF1493;">#FF1493</div>
<div class="" style="background:#708090;">#708090</div>
</div>
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
font-weight : bold;
height : 100px;
line-height : 100px !important;
width : 100px;
}
</style>
<div class="css_test">
<div class="" style="background:#FF0000;">#FF0000</div>
<div class="" style="background:#008000;">#008000</div>
<div class="" style="background:#0000FF;">#0000FF</div>
<div class="" style="background:#FF1493;">#FF1493</div>
<div class="" style="background:#708090;">#708090</div>
</div>
사용된 CSS (클릭시 보기) :
backgroundborder-radiuscolordisplayfont-sizefont-weightheightline-heightpaddingtext-alignwidth
설명
- background : #FF0000 처럼 사용합니다.
- 00~FF 의 16진수 두자리 값이 3개 모인것 입니다.
- 순서대로 빨강, 녹색, 파랑색의 2자리씩 총 6자리 값 입니다.
그리고 중복되는 값은 줄여서 사용할 수 있습니다. (6자를 3자로 줄입니다)
- #FFFFFF > #FFF (FF 두개를 하나의 F 로 줄여서 총 3개가 됩니다.)
- #FF7700 > #F70
- #FF1200 같은 경우는 줄일 수 없습니다. #F120 이렇게는 안됩니다.
예제 5
실습 - 컬러선택기로 16진수(hex) 값을 알아보세요
보기
설명
- 제이쿼리(jQuery)로 구현된 컬러선택기(Color Picker)입니다.
- 이 컬러선택기 역시 CSS 와 제이쿼리로 만들어진 것입니다.
- 관련 홈페이지 주소 : http://colpick.com/
- 이 컬러선택기 역시 CSS 와 제이쿼리로 만들어진 것입니다.
- 관련 홈페이지 주소 : http://colpick.com/
예제 6
"rgb" 값을 이용하는 방법
보기
rgb(255,0,0)
rgb(0,128,0)
rgb(0,0,255)
rgb(255,20,147)
rgb(112,128,144)
소스
<style type="text/css">
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 9pt !important;
font-weight : bold;
height : 110px;
line-height : 110px !important;
width : 110px;
}
</style>
<div class="css_test">
<div style="background:rgb(255,0,0);">rgb(255,0,0)</div>
<div style="background:rgb(0,128,0);">rgb(0,128,0)</div>
<div style="background:rgb(0,0,255);">rgb(0,0,255)</div>
<div style="background:rgb(255,20,147);">rgb(255,20,147)</div>
<div style="background:rgb(112,128,144);">rgb(112,128,144)</div>
</div>
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 9pt !important;
font-weight : bold;
height : 110px;
line-height : 110px !important;
width : 110px;
}
</style>
<div class="css_test">
<div style="background:rgb(255,0,0);">rgb(255,0,0)</div>
<div style="background:rgb(0,128,0);">rgb(0,128,0)</div>
<div style="background:rgb(0,0,255);">rgb(0,0,255)</div>
<div style="background:rgb(255,20,147);">rgb(255,20,147)</div>
<div style="background:rgb(112,128,144);">rgb(112,128,144)</div>
</div>
사용된 CSS (클릭시 보기) :
backgroundborder-radiuscolordisplayfont-sizefont-weightheightline-heightpaddingtext-alignwidth
설명
- 16진수값을 10진수로 풀어낸 값입니다.
- rgb(0, 100, 255) 처럼 입력합니다. 순서대로 빨강, 초록, 파랑 입니다.
- 값의 범위는 0~255 까지 입니다.
- 자주쓰는 값은 외울 수 있겠지만 보통은 컬러선택기나 컬러표를 사용하는게 좋겠죠.
예제 7
rgb 값을 볼 수 있는 컬러 선택기
보기
예제 8
rgb 값에 투명도를 더하는 "rgba" 컬러
보기
원의 색이 좀 흐릿해 졌습니다.
rgba(255,0,0,0.5)
rgba(0,128,0,0.5)
rgba(0,0,255,0.5)
rgba(255,20,147,0.5)
rgba(112,128,144,0.5)
소스
<style type="text/css">
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 9pt !important;
font-weight : bold;
height : 140px;
line-height : 140px !important;
width : 140px;
}
</style>
원의 색이 좀 흐릿해 졌습니다.
<div class="css_test">
<div style="background:rgba(255,0,0,0.5);">rgba(255,0,0,0.5)</div>
<div style="background:rgba(0,128,0,0.5);">rgba(0,128,0,0.5)</div>
<div style="background:rgba(0,0,255,0.5);">rgba(0,0,255,0.5)</div>
<div style="background:rgba(255,20,147,0.5);">rgba(255,20,147,0.5)</div>
<div style="background:rgba(112,128,144,0.5);">rgba(112,128,144,0.5)</div>
</div>
.css_test {
text-align : center;
padding : 5px;
}
.css_test div {
border-radius : 50%;/* 둥굴게 */
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 9pt !important;
font-weight : bold;
height : 140px;
line-height : 140px !important;
width : 140px;
}
</style>
원의 색이 좀 흐릿해 졌습니다.
<div class="css_test">
<div style="background:rgba(255,0,0,0.5);">rgba(255,0,0,0.5)</div>
<div style="background:rgba(0,128,0,0.5);">rgba(0,128,0,0.5)</div>
<div style="background:rgba(0,0,255,0.5);">rgba(0,0,255,0.5)</div>
<div style="background:rgba(255,20,147,0.5);">rgba(255,20,147,0.5)</div>
<div style="background:rgba(112,128,144,0.5);">rgba(112,128,144,0.5)</div>
</div>
사용된 CSS (클릭시 보기) :
backgroundborder-radiuscolordisplayfont-sizefont-weightheightline-heightpaddingtext-alignwidth
설명
- 역시 사용법은 쉽습니다.
- background : rgba(255, 0, 0, 0.5) 처럼 사용합니다.
rgb 를 rgba 로 바꿔 주고 마지막에 값을 하나더 넣어주면 됩니다. a 는 alpha(알파) 투명도를 의미합니다.
알파값은 0~1 사이의 소수점으로 입력 할 수 있고 0은 투명 1은 불투명 입니다. 중간은 0.5 입니다.
- background : rgba(255, 0, 0, 0.5) 처럼 사용합니다.
rgb 를 rgba 로 바꿔 주고 마지막에 값을 하나더 넣어주면 됩니다. a 는 alpha(알파) 투명도를 의미합니다.
알파값은 0~1 사이의 소수점으로 입력 할 수 있고 0은 투명 1은 불투명 입니다. 중간은 0.5 입니다.
예제 9
반투명 효과 보기 (뒷 배경이 보임)
보기
배경그림이 보입니다. (반투명 효과)
rgba(255,0,0,0.5)
rgba(0,128,0,0.5)
rgba(0,0,255,0.5)
rgba(255,20,147,0.5)
rgba(112,128,144,0.5)
설명
- rgba 는 반투명 효과이기 때문에 뒤에 있는것들이 지정된 컬러와 합쳐져 보입니다.
- 잘 사용한다면 CSS 만으로 좋은 멋진 효과를 구현할 수 있습니다.
- 응용은 여러분의 몫 !
- 잘 사용한다면 CSS 만으로 좋은 멋진 효과를 구현할 수 있습니다.
- 응용은 여러분의 몫 !
연구 1
심심풀이 브랜드 컬러 몇개
보기
rgb 코드값 순서대로 나열했습니다. (일부 정확하지 않을 수 있습니다)
삼성
페이스북
트위터
Yahoo
에버노트
안드로이드
Google+
코카콜라
Youtube
아마존
Pinterest
플리커
소스
<style type="text/css">
.css_test {
padding : 5px;
text-align : center;
}
.css_test div {
border-radius : 5px;
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
height : 60px;
line-height : 60px !important;
margin : 2px 0;
width : 120px;
}
</style>
rgb 코드값 순서대로 나열했습니다. (일부 정확하지 않을 수 있습니다)
<div class="css_test">
<div style="background:#0C4DA2;">삼성</div>
<div style="background:#3b5998;">페이스북</div>
<div style="background:#4099FF;">트위터</div>
<div style="background:#6D3995;">Yahoo</div>
<div style="background:#6fb536;">에버노트</div>
<div style="background:#A4C639;">안드로이드</div>
<div style="background:#DD4B39;">Google+</div>
<div style="background:#E5212B;">코카콜라</div>
<div style="background:#CC181E;">Youtube</div>
<div style="background:#FF9900;">아마존</div>
<div style="background:#cb2027;">Pinterest</div>
<div style="background:#ff0084;">플리커</div>
</div>
.css_test {
padding : 5px;
text-align : center;
}
.css_test div {
border-radius : 5px;
color : white;
display : inline-block;/* DIV 를 가운데로 정렬하기 위해 */
font-size : 12pt !important;
height : 60px;
line-height : 60px !important;
margin : 2px 0;
width : 120px;
}
</style>
rgb 코드값 순서대로 나열했습니다. (일부 정확하지 않을 수 있습니다)
<div class="css_test">
<div style="background:#0C4DA2;">삼성</div>
<div style="background:#3b5998;">페이스북</div>
<div style="background:#4099FF;">트위터</div>
<div style="background:#6D3995;">Yahoo</div>
<div style="background:#6fb536;">에버노트</div>
<div style="background:#A4C639;">안드로이드</div>
<div style="background:#DD4B39;">Google+</div>
<div style="background:#E5212B;">코카콜라</div>
<div style="background:#CC181E;">Youtube</div>
<div style="background:#FF9900;">아마존</div>
<div style="background:#cb2027;">Pinterest</div>
<div style="background:#ff0084;">플리커</div>
</div>
사용된 CSS (클릭시 보기) :
backgroundborder-radiuscolordisplayfont-sizeheightline-heightmarginpaddingtext-alignwidth
설명
- 각 브랜드별로 고유컬러가 정해져 있습니다.
+ 관련 CSS +