컬러 표기법
2021. 7. 15. 18:05ㆍTIL/웹퍼블리셔취업과정
728x90
▶ 16진수를 이용한 컬러 표기법
6자리 숫자로 표기하는 것이 맞는 표기법이지만 각 두자리의 숫자가 겹치는 경우 줄여서 사용이 가능하다
#000000 -> #000
각 두자리 숫자들은 레드, 그린, 블루의 색상을 의미함
ul li:nth-of-type(1) {
background-color: #000;
}
ul li:nth-of-type(2) {
background-color: #111;
}
ul li:nth-of-type(3) {
background-color: #222;
}
ul li:nth-of-type(4) {
background-color: #333;
}
ul li:nth-of-type(5) {
background-color: #444;
}
ul li:nth-of-type(6) {
background-color: #555;
}
ul li:nth-of-type(7) {
background-color: #666;
}
ul li:nth-of-type(8) {
background-color: #777;
}
ul li:nth-of-type(9) {
background-color: #888;
}
ul li:nth-of-type(10) {
background-color: #999;
}
ul li:nth-of-type(11) {
background-color: #aaa;
}
ul li:nth-of-type(12) {
background-color: #bbb;
}
ul li:nth-of-type(13) {
background-color: #ccc;
}
ul li:nth-of-type(14) {
background-color: #ddd;
}
ul li:nth-of-type(15) {
background-color: #eee;
}
ul li:nth-of-type(16) {
background-color: #fff;
}black, white로 사용하기보다는 #000, #fff로 사용하는 것이 일반적이다
▶ rgba표기법을 이용하면 명도 조절이 가능하다
rgba( 레드, 그린, 블루, 투명도)
'TIL > 웹퍼블리셔취업과정' 카테고리의 다른 글
| css 초기화 (0) | 2021.07.15 |
|---|---|
| 그라디언트 / 그림자 (0) | 2021.07.15 |
| 웹폰트 사용하기 (0) | 2021.07.15 |
| margin과 padding (0) | 2021.07.14 |
| a태그 활용법 (0) | 2021.07.14 |