w3.css
색상 라이브러리
색상 라이브러리는 안전 표준, 고속도로 색상, 패션 색상, 위장 색상 등과 같이 일반적으로 사용되는 색상 값을 포함하는 작은 CSS 파일이다.
Schoolbus
Falcon Ridge Parkway
STOP
색상 라이브러리를 사용하는 방법
색상 라이브러리는 사용하기 쉽다.
웹 페이지에 색상 라이브러리에 대한 링크를 추가하기만 하면 된다.
<link rel="stylesheet" href="https://www.w3schools.com/lib/w3-colors-highway.css">
그런 다음 색상을 지정하려는 HTML 요소에 클래스 이름을 추가한다.
예제
<div class="w3-highway-schoolbus">Schoolbus</div> <div class="w3-highway-green">Falcon Ridge Parkway</div> <div class="w3-highway-red">STOP</div>
기본 예시
예제 보기미국 고속도로 색상
| w3-highway-brown |
| w3-highway-red |
| w3-highway-orange |
| w3-highway-schoolbus |
| w3-highway-yellow |
| w3-highway-green |
| w3-highway-blue |
예제
<div class="w3-highway-red">STOP</div>
기본 예시
예제 보기미국 안전 색상
| w3-safety-red |
| w3-safety-orange |
| w3-safety-yellow |
| w3-safety-green |
| w3-safety-blue |
| w3-safety-purple |
예제
<div class="w3-safety-red">DANGER</div>
기본 예시
예제 보기유럽 신호 색상
| w3-signal-yellow |
| w3-signal-orange |
| w3-signal-red |
| w3-signal-violet |
| w3-signal-blue |
| w3-signal-green |
| w3-signal-grey |
| w3-signal-brown |
| w3-signal-white |
| w3-signal-black |
예제
<div class="w3-signal-red">Stop</div> <div class="w3-signal-yellow">Wait</div> <div class="w3-signal-green">Go</div>
기본 예시
예제 보기생생한 색상
| w3-vivid-pink |
| w3-vivid-red |
| w3-vivid-orange |
| w3-vivid-yellow |
| w3-vivid-green |
| w3-vivid-blue |
| w3-vivid-violet |
| w3-vivid-purple |
| w3-vivid-black |
| w3-vivid-white |
| w3-vivid-yellowish-pink |
| w3-vivid-reddish-orange |
| w3-vivid-orange-yellow |
| w3-vivid-greenish-yellow |
| w3-vivid-yellow-green |
| w3-vivid-yellowish-green |
| w3-vivid-bluish-green |
| w3-vivid-greenish-blue |
| w3-vivid-purplish-blue |
| w3-vivid-reddish-purple |
| w3-vivid-purplish-red |
예제
<div class="w3-vivid-red"> <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p> </div>
기본 예시
예제 보기식품 색상
| w3-food-apple |
| w3-food-aspargus |
| w3-food-apricot |
| w3-food-aubergine |
| w3-food-avocado |
| w3-food-banana |
| w3-food-butter |
| w3-food-blueberry |
| w3-food-cherry |
| w3-food-chocolate |
| w3-food-cranberry |
| w3-food-coffee |
| w3-food-egg |
| w3-food-grape |
| w3-food-kiwi |
| w3-food-lemon |
| w3-food-lime |
| w3-food-mango |
| w3-food-mushroom |
| w3-food-mustard |
| w3-food-mint |
| w3-food-olive |
| w3-food-orange |
| w3-food-pea |
| w3-food-peach |
| w3-food-pear |
| w3-food-pistachio |
| w3-food-plum |
| w3-food-raspberry |
| w3-food-saffron |
| w3-food-salmon |
| w3-food-spearmint |
| w3-food-squash |
| w3-food-strawberry |
| w3-food-tomato |
| w3-food-wheat |
| w3-food-wine |
예제
<div class="w3-food-apple">Apple</div> <div class="w3-food-banana">Banana</div>
기본 예시
예제 보기위장 색상
| w3-camo-brown |
| w3-camo-red |
| w3-camo-olive |
| w3-camo-field |
| w3-camo-earth |
| w3-camo-sand |
| w3-camo-tan |
| w3-camo-sandstone |
| w3-camo-dark-green |
| w3-camo-forest |
| w3-camo-light-green |
| w3-camo-green |
| w3-camo-dark-grey |
| w3-camo-grey |
| w3-camo-black |
예제
<div class="w3-camo-earth">Camouflaged Truck</div> <div class="w3-camo-grey">Camouflaged Ship</div>
기본 예시
예제 보기참고
W3C School - W3.CSS Color Libraries
공부 목적 블로그