색상 표현법
안녕하세요. 오늘은 CSS에서 색상을 표현하는 방법을 간단히 설명드리겠습니다.
1. 색상명으로 표현
색상의 이름을 나타내는 방법으로, 약 140가지의 색상 이름들이 브라우저에 미리 정의되어 있습니다
ex) red yellow brown...
<body>
<p style="background-color:red;">colorname : red</p>
<p style="background-color:green;">colorname : green</p>
<p style="background-color:blue;">colorname : blue</p>
</body>
결과 확인하기
colorname : red
colorname : green
colorname : blue
2. RGB값으로 표현
rgb(red, green, blue)와 같은 형식으로 색을 표현합니다. 여기서 red, green, blue 각각의 변수에는 0에서 255사이의 정수를 입력하거나 백분율 값을 지정하여 색상을 결정짓습니다.
ex) rgb(255, 255, 255)
<body>
<p style="background-color: rgb(255, 0, 0);">red</p>
<p style="background-color: rgb(0, 255, 0);">green</p>
<p style="background-color: rgb(0, 0, 255);">blue<p>
</body>
결과 확인하기
red
green
blue
3. RGBA값으로 표현
RGB 표현의 확장으로, 불투명도를 지정하는 기능이 추가된 것입니다.rgba(red, greed, blue, alpha)로 표현하며 alpha 변수의 값은 0.0(투명)과 1.0(불투명) 사이의 값 중 지정한다.
ex) rgba(255, 255, 255, 0.4) ...
<body>
<p style="background-color: rgba(255, 0, 0, 0.2);">red</p>
<p style="background-color: rgba(255, 0, 0, 0.4);">red</p>
<p style="background-color: rgba(0, 255, 0, 0.6);">red</p>
<p style="background-color: rgba(0, 0, 255, 0.8);">red<p>
</body>
결과 확인하기
red
red
red
red
4. HEX값으로 표현
#RRGGBB 형식의 16진수 색상 값을 이용하여 표현하는 방법입니다. RR, GG, BB는 각각 red, green, blue를 나타내는 값이며 16진수 00에서 FF사이의 값으로 결정됩니다.
ex) #000000, #FF00FF ...
<body>
<p style="background-color:#000000; color:#FFFFFF" >black </p >
<p style="background-color:#FF0000;" >red </p >
<p style="background-color:#00FF00;" >green </p >
<p style="background-color:#0000FF;" >blue </p >
<p style="background-color:#FFFF00;" >yellow </p >
<p style="background-color:#FF00FF;" >fuchsia </p >
<p style="background-color:#00FFFF;" >aqua </p >
<p style="background-color:#FFFFFF;" >white </p >
</body>
결과 확인하기
black
red
green
blue
yellow
fuchsia
aqua
white
5. HSL/HSLA값으로 표현
HSL는 Hue(색상), Saturation(채도), Lightness(명도)로 색상을 정의하는 방법입니다. 색상은 0부터 360까지의 색상환에 따라 결정되며 0:red, 120:green, 240:blue로 나타납니다. 채도와 명도는 백분율로 나타냅니다. HSLA는 HSL방식에서 불투명도 지정 기능이 추가된 것이며 HSLA(색상,채도,명도,불투명도) 형식으로 나타냅니다.
ex) rgb(255, 255, 255)
<body>
<p style="background-color:hsl(0,100%,80%);" >채도 100%, 밝기 80% </p >
<p style="background-color:hsl(0,100%,60%);" >채도 100%, 밝기 60% </p >
<p style="background-color:hsl(0,100%,40%);" >채도 100%, 밝기 40% </p >
<p style="background-color:hsl(0,100%,20%);" >채도 100%, 밝기 20% </p >
<p style="background-color:hsl(0,80%,50%);" >채도 80%, 밝기 50% </p >
<p style="background-color:hsl(0,60%,50%);" >채도 60%, 밝기 50% </p >
<p style="background-color:hsl(0,40%,50%);" >채도 40%, 밝기 50% </p >
<p style="background-color:hsl(0,20%,50%);" >채도 20%, 밝기 50% </p >
</body>
결과 확인하기
채도 100%, 밝기 80%
채도 100%, 밝기 60%
채도 100%, 밝기 40%
채도 100%, 밝기 20%
채도 80%, 밝기 50%
채도 60%, 밝기 50%
채도 40%, 밝기 50%
채도 20%, 밝기 50%
Opacity 속성
추가 Opacity 속성은 전체 요소(배경색, 텍스트 색상 포함)의 불투명도를 설정하는 속성입니다.속성 값은 0.0(투명)에서 1.0(불투명)사이의 값입니다.
'CSS' 카테고리의 다른 글
| CSS 애니메이션 연습하기01 (7) | 2022.08.29 |
|---|---|
| CSS 요소숨기기 (10) | 2022.08.25 |
| CSS 단위 (9) | 2022.08.23 |
| 이미지 스프라이트 / 백그라운드 표현 / IR 효과 (9) | 2022.08.19 |
| CSS - SCSS (12) | 2022.08.18 |
댓글