// 색상, Color
- 색상 값은 다양한 형태로 적용할 수 있으며 값의 형태에 따라 선언하는 방식이 다르다.
h1 { color: 색상 값; }
- 색상 값 지정 방식
- 컬러 키워드
- CSS 자체에서 사용 가능한 문자 식별자.
- 미리 정의되어있는 키워드 를 이용해 색상을 표현할 수 있다.
~ red, blue, black - 16 진법 (#RRGGBB)
- 6자리의 16진수(0-9, A-F)는 각각 두 자리씩 세 가지 색상을 나타낸다.
- 첫 번째 두 자리는 적색(RR), 가운데 두 자리는 녹색(GG), 마지막 두 자리는 청색(BB)을 의미한다.
- 각 자리의 알파벳은 대소문자를 구분하지 않는다.
- f는 full을 의미한다.(rgb로 보면 255)
~ #aa11cc - 16진법 (#RGB)
- 6자리의 16진수에서 각각의 두 자리가 같은 값을 가지면 3자리로 축약하여 사용할 수 있다.
~ #aa11cc -> #a1c - RGB( )
- RGB 값은 rgb(R, G, B)의 형태로 각 변수 값(R 적색, G 녹색, B 청색)의 강도를 정의한다.
- 0~255의 정수로 된 값을 지정할 수 있으며, 0 → 255는 검정 → 흰색으로 값의 변화를 나타낸다. - RGBA( )
- RGBA 값은 기존 RGB에서 A(alpha)값이 추가된 형태
- rgb(R, G, B, A)의 형태로 각 변수는(R 적색, G 녹색, B 청색, A 투명도)의 강도를 정의한다.
- A 값은 0 ~ 1 사이의 값을 지정할 수 있으며, 0.5와 같이 소수점으로 표기한다.
- 0 → 1은 투명 → 불투명으로 값의 변화를 나타낸다.
컬러 키워드 참고: https://htmlcolorcodes.com/color-names/
Color Names — HTML Color Codes
HTML color names rule. Modern browsers support 140 HTML color names which we've listed here along with their Hex color codes and RGB values.
htmlcolorcodes.com
RGB, 16진법 참고: https://htmlcolorcodes.com/color-picker/
Color Picker — HTML Color Codes
Finding that perfect color is easier than you think. Use our color picker to discover beautiful colors and harmonies with Hex color codes and RGB values.
htmlcolorcodes.com
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>css</title>
<style media="screen">
.keyword{color: red;}
.hexa{color: #056780;}
.hexa2{color: #590;}
.rgb{color: rgb(20, 200, 150); }
.rgba{color: rgba(50, 120, 70, 0.5)}
</style>
</head>
<body>
<div>
<p class="keyword">컬러 키워드</p>
<p class="hexa">16진법 6자리</p>
<p class="hexa2">16진법 3자리</p>
<p class="rgb">RGB()</p>
<p class="rgba">RGBA()</p>
</div>
</body>
</html>'클라이언트 > CSS' 카테고리의 다른 글
| CSS 속성 - 박스모델 (0) | 2023.03.05 |
|---|---|
| CSS 속성 - 배경 (0) | 2023.03.05 |
| CSS 속성 - 단위 (0) | 2023.03.04 |
| CSS 구체성 (0) | 2023.03.04 |
| CSS 가상 선택자 (0) | 2023.03.04 |
