[비전공자를 위한 HTML/CSS] (22) CSS 속성- 색상

색상값은 다양한 형태로 적용할 수 있으며, 값의 형태에 따라 선언하는 방식이 조금씩 다르다.

 

 

색상값 지정 방식

• 컬러 키워드
• 16진법 (#RRGGBB or #RGB)
• RGB()
• RGBA()
• HSL(CSS 3)
• HWB(CSS4)

 

컬러 키워드

  : css 자체에서 사용 가능한 문자를 식별자. 'red', 'blue', 'green' 등과 같이 미리 정의 되어있는 키워드를 이용해 색상을 표현.   * transparent - 투명을 나타내는 키워드 *

 

 

16진법

  : 16진수(0-9, A-F)는 각각 두자리씩 세가지 색상을 나타냄.

  첫 두자리: 적색(RR), 가운데 두자리: 녹색(GG), 마지막 두자리: 청색(BB). 각 자리의 알파벳은 대소문자 구분X.

  각각의 두자리가 같은 값을 가지면 축약 가능. (ex. #11aacc  → #1ac)

 

 

RGB

  : rgb(R, G, B)의 형태로 각 변수 값(R-적색, G-녹색, B-청색)의 강도를 정의한다. (0~225의 정수값으로 지정.)

 

0: 검정, 225: 흰색

으로 값을 나타냄.

 

RGBA

  : RGB값에 A 값 추가된 형태.  A는 투명도를 나타냄. A는 0~1 사이의 값을 가지며 0.5와 같은 소수점으로 표현 가능.

  0: 투명, 1: 불투명 . alpha 값을 적지 않은 경우 적용되지 않기 때문에 꼭 alpha 값을 작성할 것.

 

<h1 style= "color: red">컬러 키워드</h1>
<h1 style= "color: #ff0000">16진법 1</h1>
<h1 style= "color: #f00">16진법 2</h1>

<div style = "background-color: rgb(225, 0, 0)">red</div>
<div style = "background-color: rgba(225, 0, 0, 0.5)">red</div>
<p></p>

<div style = "background-color: rgb(0, 255, 0)">green</div>
<div style = "background-color: rgba(0, 255, 0, 0.2)">green</div>
<p></p>

<div style = "background-color: rgb(0, 0, 255)">blue</div>
<div style = "background-color: rgba(0, 0, 255, 0.3)">blue</div>

 

 

<color> - CSS: Cascading Style Sheets | MDN (mozilla.org)

- CSS: Cascading Style Sheets | MDN

CSS Colors (w3schools.com)

CSS Colors