2021. 8. 28. 18:46ㆍ카테고리 없음
8-2. CSS 속성 : 색상
가. Color 속성
- 폰트의 색상 값을 적용할 때 사용
| 1 h1{color: 색상값;} |
나. Color 속성값의 종류
■ 컬러 키워드
■ 16진법(축약형 포함)
■ RGB(RGBA 포함)
1) 컬러 키워드
- CSS 자체에서 사용 가능한 문자 식별자
- red, green, blue, black, white 등 과 같이 미리 정의되어있는 직관적인 키워드를 입력하여 색상 표현
- 참고로 transparent는 투명을 의미하는 키워드
| 1 h1{color: red;} |
2-1) 16진법(기본형, #000000)
- 6자리의 16진수로 3가지 색상을 표현
- 6자리 : 000000
: 첫번째 두 자리는 '적색'을 의미
: 가운데 두 자리는 '녹색'을 의미
: 마지막 두 자리는 '청색'을 의미
- 16진수 : 숫자 10개(0~9) + 알파벳 6개(a~f)
: 숫자 0에 가까워질수록 검정을 표현
: 알파벳 f에 가까워질수록 하얀색을 표현(대소문자 구분 없음)
- 속성값에 샾( # )을 입력한 후, 6자리(000000)를 입력
| 1 h1{color: #ff0000;} → '적색' 표현 2 h1{color: #00ff00;} → '녹색' 표현 3 h1{color: #0000ff;} → '청색' 표현 |
2-2) 16진법(축약형, #000)
- 6자리의 각각의 두 자리 내의 값이 각각의 같은 값이면 3자리로 축약하여 사용가능
| [16진법 기본형] h1{color: #aa11cc;} → [16진법 축약형] h1{color: #a1c;} |
3-1) RGB{기본형, rgb(0,0,0)}
- RGB 값은 Red, Green, Blue를 각 변수로 갖는 형태
- 각 변수(Red, Green, Blue)의 강도를 정의함
- 그 강도는 정수(0~255)로 지정함
- '0'에 가까워질수록 '검정색'을 표현
- '255'에 가까워질수록 '흰색'을 표현
- 속성값에 'rgb'를 입력한 후, 소괄호 내에 적색, 녹색, 청색 순으로 그 강도를 나타낸 정수를 입력하되,
각 그 구분은 콤마( , )로 구분함
| 1 h1{color: rgb(255,0,0);} → '적색' 표현 2 h1{color: rgb(0,255,0);} → '녹색' 표현 3 h1{color: rgb(0,0,255);} → '청색' 표현 4 h1{color: rgb(0,0,0);} → '검정색' 표현 5 h1{color: rgb(255,255,255);} → '흰색' 표현 |
3-2) RGBA{투명도인 알파값을 포함한, rgb(0,0,0,0)}
- RGB 값에 브라우저 기본 배경에 대한 투명도 변수(A)가 추가된 형태로, 각 변수의 강도를 정의함
- 그 '투명도'의 강도는 '0~1' 사이 소수점의 값으로 지정
- '0'에 가까워질수록 '투명(rgb 지정한 색이 보이지 않음)'을 표현
- '1'에 가까워질수록 '불투명(rgb 지정한 색 그대로 보임)'을 표현
- 그래서 '0.5'는 '반투명'을 표현
| 1 h1{color: rgba(0,0,0,0);} → '투명' 표현 2 h1{color: rgba(255,0,0,1);} → '적색' 표현 3 h1{color: rgba(255,0,0,0);} → '투명' 표현 4 h1{color: rgba(255,0,0,0.5);} → '반투명한 적색' 표현 |