본문으로 바로가기

CSS 색상(Color)과 투명도(Transparent) 속성

category 웹코딩/CSS 2015. 6. 5. 11:00

CSS를 재정리하는 중이라 과거에 작성된 글들과 중복되는 내용이 많습니다. 검색결과에서도 나타나지 않는군요.

color

텍스트의 색상을 지정한다. 기본적으로 값이 상속된다.

body {color: red;}
h1 {color: #00ff00;}
p {color: rgb(0,0,255);}

속성값

  • color : CSS 색상값
  • inherit : 부모 요소로부터 값을 상속 받는다.

색상값

CSS의 색상값은 적색, 녹색, 청색의 혼합의 결과로 16진수를 이용한 표기법(HEX)과, RGB 표기법, HSL 표기법, 색상 이름을 직접 입력하는 방식들을 지원한다.

16진수

주요 브라우저에서 모두 지원한다. 16진수 색상은 #RRGGBB와 같은 형태로 RR(적색), GG(녹색), BB(청색)을 진수로 나타내며, 0~FF사이의 값을 가지게 된다(대소문자 구분하지 않음).

예를 들어, #0000FF의 값은 RR과 GG는 0의 값이고, 청색인 BB만 가장 밝은 FF의 값을 가지게 되니 청색으로 표현된다.

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */
RGB

주요 브라우저에 모두 지원한다. RGB 색상은 rgb(적색, 녹색, 청색)의 형태로, 각 변수값(적색, 녹색, 청색) 의 색상의 강도를 정의하고, 0~255의 정수로 된 퍼센트 값(0%~255%)을 가지게 된다.

예를 들어, rgb(0,0,255)의 값은 청색이 255로 가장 높은 값으로 지정되고 나머지는 0%의 값이니 청색으로 표현된다.

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */
RGBA

IE9+, Firefox 3+, Opera 10+, Chrome, Safari에서 지원한다. RGBA 색상은 rgba(적색, 녹색, 청색, 투명도)의 형태로, RGB의 색상 값에 알파채널을 확장한 것으로 투명도를 추가로 지정할 수 있게 한 것이며, 0.0(투명)~1.0(불투명) 사이의 값을 가지게 된다.

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */
HSL

IE9+, Opera 10+, Firefox, Chrome, Safari에서 지원한다. HSL 색상은 hsl(색조, 채도, 명도)의 형태로 색조, 채도 및 밝기를 원통형의 좌표를 이용해 나타낸다.

색조는 색상환에서 0~360까지 - 0 혹은 360은 적색, 120은 녹색, 240은 청색을 나타낸다. 채도는 퍼센테이지 값을 가지며, 0%는 회색의 음영을 가지게 된다. 명도 또한 퍼센테이지 값을 가지며, 0%는 검정, 100%는 하얀색이 된다.

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */
HSLA

IE9+, Firefox 3+, Opera 10+, Chrome, Safari에서 지원한다. HSLA 색상은 hsla(색조, 채도, 명도, 투명도)의 형태로, 위에서 설명한 HSL 색상 값에 알파채널을 확장한 것으로 투명도를 추가로 지정할 수 있게 한 것이며, 0.0(투명)~1.0(불투명) 사이의 값을 가지게 된다.

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */
키워드(미리 정의된 이름을 가진 색상)

140가지의 색상 이름이 HTML과 CSS 색상 사양에 미리 정의되어 있다(17개의 표준 색상과 123개의 추가된 색상).

17개의 표준 색상 : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow

Color Name HEX Color Shades Mix
Black  #000000   Shades Mix
Navy  #000080   Shades Mix
DarkBlue  #00008B   Shades Mix
MediumBlue  #0000CD   Shades Mix
Blue  #0000FF   Shades Mix
DarkGreen  #006400   Shades Mix
Green  #008000   Shades Mix
Teal  #008080   Shades Mix
DarkCyan  #008B8B   Shades Mix
DeepSkyBlue  #00BFFF   Shades Mix
DarkTurquoise  #00CED1   Shades Mix
MediumSpringGreen  #00FA9A   Shades Mix
Lime  #00FF00   Shades Mix
SpringGreen  #00FF7F   Shades Mix
Aqua  #00FFFF   Shades Mix
Cyan  #00FFFF   Shades Mix
MidnightBlue  #191970   Shades Mix
DodgerBlue  #1E90FF   Shades Mix
LightSeaGreen  #20B2AA   Shades Mix
ForestGreen  #228B22   Shades Mix
SeaGreen  #2E8B57   Shades Mix
DarkSlateGray  #2F4F4F   Shades Mix
LimeGreen  #32CD32   Shades Mix
MediumSeaGreen  #3CB371   Shades Mix
Turquoise  #40E0D0   Shades Mix
RoyalBlue  #4169E1   Shades Mix
SteelBlue  #4682B4   Shades Mix
DarkSlateBlue  #483D8B   Shades Mix
MediumTurquoise  #48D1CC   Shades Mix
Indigo   #4B0082   Shades Mix
DarkOliveGreen  #556B2F   Shades Mix
CadetBlue  #5F9EA0   Shades Mix
CornflowerBlue  #6495ED   Shades Mix
RebeccaPurple  #663399   Shades Mix
MediumAquaMarine  #66CDAA   Shades Mix
DimGray  #696969   Shades Mix
SlateBlue  #6A5ACD   Shades Mix
OliveDrab  #6B8E23   Shades Mix
SlateGray  #708090   Shades Mix
LightSlateGray  #778899   Shades Mix
MediumSlateBlue  #7B68EE   Shades Mix
LawnGreen  #7CFC00   Shades Mix
Chartreuse  #7FFF00   Shades Mix
Aquamarine  #7FFFD4   Shades Mix
Maroon  #800000   Shades Mix
Purple  #800080   Shades Mix
Olive  #808000   Shades Mix
Gray  #808080   Shades Mix
SkyBlue  #87CEEB   Shades Mix
LightSkyBlue  #87CEFA   Shades Mix
BlueViolet  #8A2BE2   Shades Mix
DarkRed  #8B0000   Shades Mix
DarkMagenta  #8B008B   Shades Mix
SaddleBrown  #8B4513   Shades Mix
DarkSeaGreen  #8FBC8F   Shades Mix
LightGreen  #90EE90   Shades Mix
MediumPurple  #9370DB   Shades Mix
DarkViolet  #9400D3   Shades Mix
PaleGreen  #98FB98   Shades Mix
DarkOrchid  #9932CC   Shades Mix
YellowGreen  #9ACD32   Shades Mix
Sienna  #A0522D   Shades Mix
Brown  #A52A2A   Shades Mix
DarkGray  #A9A9A9   Shades Mix
LightBlue  #ADD8E6   Shades Mix
GreenYellow  #ADFF2F   Shades Mix
PaleTurquoise  #AFEEEE   Shades Mix
LightSteelBlue  #B0C4DE   Shades Mix
PowderBlue  #B0E0E6   Shades Mix
FireBrick  #B22222   Shades Mix
DarkGoldenRod  #B8860B   Shades Mix
MediumOrchid  #BA55D3   Shades Mix
RosyBrown  #BC8F8F   Shades Mix
DarkKhaki  #BDB76B   Shades Mix
Silver  #C0C0C0   Shades Mix
MediumVioletRed  #C71585   Shades Mix
IndianRed   #CD5C5C   Shades Mix
Peru  #CD853F   Shades Mix
Chocolate  #D2691E   Shades Mix
Tan  #D2B48C   Shades Mix
LightGray  #D3D3D3   Shades Mix
Thistle  #D8BFD8   Shades Mix
Orchid  #DA70D6   Shades Mix
GoldenRod  #DAA520   Shades Mix
PaleVioletRed  #DB7093   Shades Mix
Crimson  #DC143C   Shades Mix
Gainsboro  #DCDCDC   Shades Mix
Plum  #DDA0DD   Shades Mix
BurlyWood  #DEB887   Shades Mix
LightCyan  #E0FFFF   Shades Mix
Lavender  #E6E6FA   Shades Mix
DarkSalmon  #E9967A   Shades Mix
Violet  #EE82EE   Shades Mix
PaleGoldenRod  #EEE8AA   Shades Mix
LightCoral  #F08080   Shades Mix
Khaki  #F0E68C   Shades Mix
AliceBlue  #F0F8FF   Shades Mix
HoneyDew  #F0FFF0   Shades Mix
Azure  #F0FFFF   Shades Mix
SandyBrown  #F4A460   Shades Mix
Wheat  #F5DEB3   Shades Mix
Beige  #F5F5DC   Shades Mix
WhiteSmoke  #F5F5F5   Shades Mix
MintCream  #F5FFFA   Shades Mix
GhostWhite  #F8F8FF   Shades Mix
Salmon  #FA8072   Shades Mix
AntiqueWhite  #FAEBD7   Shades Mix
Linen  #FAF0E6   Shades Mix
LightGoldenRodYellow  #FAFAD2   Shades Mix
OldLace  #FDF5E6   Shades Mix
Red  #FF0000   Shades Mix
Fuchsia  #FF00FF   Shades Mix
Magenta  #FF00FF   Shades Mix
DeepPink  #FF1493   Shades Mix
OrangeRed  #FF4500   Shades Mix
Tomato  #FF6347   Shades Mix
HotPink  #FF69B4   Shades Mix
Coral  #FF7F50   Shades Mix
DarkOrange  #FF8C00   Shades Mix
LightSalmon  #FFA07A   Shades Mix
Orange  #FFA500   Shades Mix
LightPink  #FFB6C1   Shades Mix
Pink  #FFC0CB   Shades Mix
Gold  #FFD700   Shades Mix
PeachPuff  #FFDAB9   Shades Mix
NavajoWhite  #FFDEAD   Shades Mix
Moccasin  #FFE4B5   Shades Mix
Bisque  #FFE4C4   Shades Mix
MistyRose  #FFE4E1   Shades Mix
BlanchedAlmond  #FFEBCD   Shades Mix
PapayaWhip  #FFEFD5   Shades Mix
LavenderBlush  #FFF0F5   Shades Mix
SeaShell  #FFF5EE   Shades Mix
Cornsilk  #FFF8DC   Shades Mix
LemonChiffon  #FFFACD   Shades Mix
FloralWhite  #FFFAF0   Shades Mix
Snow  #FFFAFA   Shades Mix
Yellow  #FFFF00   Shades Mix
LightYellow  #FFFFE0   Shades Mix
Ivory  #FFFFF0   Shades Mix
White  #FFFFFF   Shades Mix

자바스크립트 문법

object.style.color="#FF0000"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
지원 지원 지원 지원 지원

inherit 값은 IE7 이하는 지원하지 않는다. IE8은 !DOCTYPE이 필요하다. IE9부터 정상 지원한다.

opacity

CSS3에 추가된 속성으로 요소의 투명화 정도를 조절하는 속성이다.

.transparent8 {
  zoom: 1; /* ie 5,6,7 bug fix */
  filter: alpha(opacity=80);
  opacity: 0.8;
}
  • filter 값은 0~100의 값을 가지며 opacity는 0~1 사이의 값을 가진다.
  • 숫자가 높아질수록 원본에 가깝고 숫자가 낮아질수록 투명화 된다.
  • opacity는 부모요소에 적용시키면 자식들에게도 모두 상속되고 자식단에서 해제할 수 없기 때문에 배경과 텍스트를 따로 분리할 수가 없는 문제가 생긴다. 편법으로 opacity가 적용된 요소밖에서 텍스트요소를 absolute 포지션을 이용해서 위치 시킬수 있겠지만 구찮은 방법일수 있다. 이때문에 opacity를 0.8 이하로 낮추지 않고 쓰는 경우가 많다.

속성값

  • value(0.0~1.0) : 0.0(완벽한 투명)에서 1.0(불투명)까지 투명화 정도를 지정한다.
  • inherit : 부모 요소로부터 값을 상속 받는다.

opacity 데모 보기

자바스크립트 문법

object.style.opacity="0.5"

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9 FF4 SF5, iOS3 CH11, An2 O11

IE8 이하 버전들은 opacity 속성을 지원하지 않으며 대체 방안으로 filter 를 사용할 수 있다. 그러나 이런 filter 속성들은 간혹 링크의 오작동을 일으킬 수 있음에 유념하자.

rgba

rgb라는 색상정보에 a는 알파 채널값을 부여하여 투명도를 조정할 수 있다.

.target {
    background: #ffffff;
    background: rgba(255, 255, 255, 0.5);
}
  • rgba는 색상정보를 필요로 하는 속성에 직접 그 값을 부여할 수 있기 때문에 분리하여 사용할 수 있다.
  • 이 값은 opacity와 마찬가지로 0~1의 값을 가진다.
  • rgba를 지원하지 않는 브라우저를 위해 #ffffff와 같이 배경값을 선언해 준다.

IE8 이하 대체 방안

<!--[if lte IE 8]>
.target { 
    background: transparent; 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#80FFFFFF,endColorstr=#80FFFFFF); 
    zoom: 1;
}
<![endif]-->
  • IE 전용 조건부 주석문을 사용하였는데 와 사이에 위의 코드를 넣어주거나 따로 css파일을 링크 시켜주면 된다.
  • background: transparent 를 적용한 이유는 미리 다른 배경 색상이 설정되어 있을 경우 filter 메서드와 충돌할 가능성이 있기 때문이다.
  • zoom: 1은 이 필터를 적용할 요소는 레이아웃을 가져야 하는데 인라인 요소에는 ie의 특성상 레이아웃을 가지지 않기 때문에 추가해 준다.
  • filter 속성의 starColorstr 값과 endColorstr 값인데 기존의 3byte Hex값이 아니라 4byte Hex값이 되었음을 유념해야 한다. 그리고 처음 두글자에 Alpha 값을 지정하는데 rgba가 아닌 argb 형식이다. 16진수의 값을 적용한다.

포토샵등을 이용해서 원하는 색상의 opacity 값을 조절하여 요소의 배경으로 채워 넣는 방법도 있다. 물론 이때도 ie6은 png 파일의 투명도를 인식하지 못하기 때문에 그에 상응하는 코드를 삽입해야 한다.

지원 현황

인터넷익스플로우 파이어폭스 사파리 크롬 오페라
IE9+ 지원 지원 지원 지원

IE8 이하 버전들은 rgba 속성을 지원하지 않기 때문에 위의 예시처럼 filter 속성중에 gradient를 사용해야 한다.

opacity 와 rgba (Transparent)에서 좀 더 자세한 설명을 참조하자.

'웹코딩 > CSS' 카테고리의 다른 글

CSS 글자정렬과 꾸밈속성 (Text Align, Effect Property)  (0) 2015.06.06
CSS 글꼴속성 (Font Property)  (0) 2015.06.06
CSS Flex 속성  (4) 2015.06.04
CSS Display와 Visibility 속성  (3) 2015.06.04
CSS Overflow와 Text-overflow 속성  (3) 2015.06.04