<HTML5+CSS3> 색상과 관련된 스타일

색상과 관련된 스타일

 

color속성-글자색 바꾸기

-ex) p { color : #RRGGBB } ->RRGGBB는 각각 빨간 초록 파란색의 양을 표시한다.

16진수의 값으로 색상을 표현한다.

 

rgb표기법

-하나도 섞이지 않았을때는 0, 가득:255로 표시한다. #ff0000은 rgb로(255,0,0)이다.

(레드,그린,블루)순 다음 예는 rgb표기법으로 초록색을 채운 것이다.

ex) #b { background-color:rgb(0 200 0); } ->스타일 배경은 초록 계열

 

hsl표기법

-차례로 hue(색상), saturation(채도) , lightness(밝기)를 각각 나타낸다.

색의 3요소 중 하나로 각도를 기준으로 색상을 표시한다. 아무것도 섞이지 않은 상태가 채도가 높은 상태 0%면 회색톤 100%면 순색이다 밝기 또한 마찬가지로 0%가장 어둡다.

 

ex) #a { background:hsl (202,100%,50%) ; } -> 색상은 파랑(240) 채도100%,밝기 50%

 

%그 외 red나 yellow 처럼 색상 이름으로 표시할 수 있다.

ex) .accent { color : blue ; background-color : yellow; }

->.accent 선택자 부분에는 파란색 글씨에 노란색 배경

 

%www.colorpicker.com에 접속해 16진수 색상 값이나 rgb값 등 값 추출 가능

 

투명도를 조절하는 rgba와 hsla

-웹에서 색상을 표시할 때 rgb값을 사용하는데, CSS3에서는 기존의 방법과 달리 각 색상에 알파값을 더한 rgba라는 방식을 사용할 수 있다.

 

ex) rgba (red 값, green 값, blue값, alpha(투명) 값) ;

->여기서 알파가 불투명도 값을 나타내는 것으로 0~1까지 값중에 사용이 가능하다.

1=0.9나 0.8처럼 조금 씩 투명해지다가 0이되면 완전히 투명해 진다. 소수점 앞의 0을빼고 .9,or .8처럼 표현 가능하다.

 

ex) color : rgba (200,0,0,0,.5) - > .5부분이 반투명함을 나타내는 부분

 

% 배경색의 투명도를 조절: background-color속성의 rgba값 조절

글자색의 투명도를 조절: color속성의 rgba값 조절.

hsla를 이용해 색상을 표기할 때도 알파값을 추가해 투명도를 조절할 수 있다.