'CSS에서의 색상 설정'에 해당되는 글 1건

CSS에서의 색상 설정

CSS에서 색상은 다음과 같은 방식으로 지정될 수 있다.

RGB 색상

RGB 색상 값은 모든 주요 브라우저에서 지원된다. RGB 색상 값은 rgb(red 빨강, green 녹색, blue 파랑)으로 지정한다. 각 변수(빨강, 녹색, 파랑)는 색상의 강도를 정의하고 0부터 255 사이의 정수, 또는 퍼센트 값(0% ~ 100%)으로 지정할 수 있다.

예를 들어, rgb(0, 0, 255) 값은 파랑으로 표현된다. 파랑(blue)의 변수가 최대 값으로 설정되고, 나머지 값(red, green)은 0으로 설정되기 때문이다.

 {
 width:100px; 
 height:100px; 
 background-color:rgb(165, 42, 42); 
 border:1px solid rgb(0, 0, 0); 
 }

 {
 width:100px; 
 height:100px; 
 background-color:rgb(100%,67%,50%); 
 border:1px solid rgb(0%, 0%, 0%); 
 }

! 주의
rgb(255, 0, 51.2)  정수만을 입력해야 한다. 소수는 안됨.
rgb(100%, 0, 20%)  퍼센트 값과 정수 값을 섞어서 쓰면 안된다.

16진수 색상 코드. 일명 Hex 코드 (Hexadecimal Colors)

 16진수 색상 값은 모든 주요 브라우저에서 지원된다. 16진수 색상은 #RRGGBB, 즉 RR(Red - 빨강), GG(Green - 녹색), (Blue- 파랑) 16진수 색상으로 지정한다. 모든 값은 0 ~ FF 사이여야 한다.

예를 들어, #0000FF 값은 파랑색으로 렌더링 된다. 파란색 구성요소의 최대 값(FF)으로 설정 되고 나머지는 0으로 설정 되기 때문이다.

6자리, 또는 3자리의 Hex 코드를 지정할 수 있다.

 
 { 
 width:100px; 
 height:100px; 
 background-color:#2580a2; 
 border:1px solid #000000; 
 } 

 { 
 width:100px; 
 height:100px; 
 background-color:#f03; 
 border:1px solid #000; 
 }