여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. w3.css - 색상
w3.css – 색상
4개월전 작성
4개월전 수정

w3.css

색상

Red

Pink

Purple

Deep Purple

Indigo

Blue

Light Blue

Cyan

Aqua

Teal

Green

Light Green

Lime

Sand

Khaki

Yellow

Amber

Orange

Deep Orange

Blue Gray

Brown

Light Gray

Gray

Dark Gray

Pale Red

Pale Yellow

Pale Green

Pale-Blue

 

W3.CSS에 사용되는 기본 색 구성표는 머티리얼 디자인 색상(마케팅, 도로 표지판 및 스티커 메모에 사용되는 색상)에서 영감을 받았다.

HTML 요소 색칠하기

w3-color 및 w3-text-color 클래스는 모든 HTML 요소에 색상을 지정하는 데 사용할 수 있다.

컨테이너

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

버튼

텍스트
빨간색 보라색 파란색 녹색 주황색
테두리

빨간색

녹색

파란색

노란색

회색

검은색

테이블
이름 포인트들
질 스미스 50
이브 잭슨 94
아담 존슨 67
카드

자동차는 운송에 사용되는 바퀴가 달린 자체 동력 자동차입니다. 대부분의 용어 정의에서는 자동차가 주로 도로에서 주행하고, 1~8인용 좌석을 갖추고, 일반적으로 바퀴가 4개 있도록 설계되었다고 명시합니다. (위키피디아)

배경색

w3-color 클래스는 모든 HTML 요소의 배경색을 설정한다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

예제
<div class="w3-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-yellow">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

<div class="w3-gray">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

텍스트 색상

w3-text-color 클래스는 HTML 요소의 텍스트 색상을 설정한다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

예제
<div class="w3-text-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 9 million inhabitants.</p>
</div>

호버 색상

w3-hover-color 클래스는 HTML 요소의 배경 호버 색상을 정의한다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

예제
<div class="w3-container w3-orange w3-hover-red">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

 

w3-hover-text-color 클래스는 HTML 요소의 텍스트 호버 색상을 정의한다.

런던

런던은 영국에서 가장 인구가 많은 도시로, 대도시 지역에는 900만 명이 넘는 주민이 살고 있습니다.

예제
<div class="w3-container w3-orange w3-hover-text-white">
  <h2>London</h2>
  <p>London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.</p>
</div>

색상 라이브러리

표준 W3.CSS 색상 외에도 W3.CSS는 다양한 색상 라이브러리의 색상을 사용할 수도 있다.

윈도우 색상
라임
녹색
올리브
에메랄드
물오리
강철
청록색
파란색
남빛
코발트
제비꽃
자주빛
분홍색
마젠타
빨간색
주황색
호박색
노란색
갈색
짙은 회갈색
시에나
진홍
패션 색상
불꽃
푸른 잎
마리나
프림로즈
옐로우
뉴트럴 그레이
그늘진
가문비나무
네이비
모란
토니
포트
고속도로 색상
빨간색
녹색
파란색
노란색
참고
Mingg`s Diary
밍구
공부 목적 블로그