CSS 속성
Color와 관련된 속성들
CSS Color 모듈 (MDN)
:: CSS에서 색상, 색상 유형, 색상 혼합, 투명도 및 이러한 색상 효과를 HTML에 적용하는 방법을 다루는 모듈.
Color 자료형 (MDN)
-- 자료형에 대한 자세한 내용은 처음부터 다룰 내용이 아니므로 여기서는 간단하게만 설명한다.
:: CSS에서 색깔을 나타내는 방법은 색상 키워드 사용, RGB좌표계 사용, HSL좌표계 사용의 3가지가 있다.
:: <gradient>는 CSS에서 <color>가 아닌 <image>로 구분되는 것에 주의할 것.
색상 키워드
:: 미리 지정된 키워드로 색상을 표현하는 방법이다. ex) red, blue, ...
:: 색상 키워드는 기본적으로 투명도 없는 단일 색상을 표현한다.
:: 어떤 색상은 서로 다른 두가지 키워드로 표현되기도 한다. ex) aqua와 cyan은 둘 다 #00ffff를 나타낸다.
:: 색상 키워드 목록은 '이곳'에 정리해두었다.
:: transparent 키워드 : 완전히 투명한 색을 의미하는 키워드. 기술적으로는 rgba(0,0,0,0)과 같다.
:: currentColor 키워드 : 부모 요소의 color값을 상속받게 하는 키워드.
RGB 좌표계
:: 빛의 삼원색인 Red(빨강), Green(초록), Blue(파랑)의 세가지 색의 가산혼합을 이용하여 색을 표현하는 방법.
:: 16진수 표기법과 함수형 표기법으로 나눌 수 있다.
16진수 표기법 ex) #RRGGBB[AA]
:: #RRGGBB[AA] : #뒤에 R(Red), G(Green), B(Blue), A(Alpah)값을 두자리의 16진수 수로 나타내는 방법. Alpah값은 생략가능하며 생략시 FF(불투명)로 적용된다. #RRGGBBAA를 8자리 표기법, #RRGGBB를 6자리 표기법이라 한다.
-- #RGB[A] : 8자리 표기법이나 6자리 표기법의 단축 표기법. #f03f는 #ff0033ff와 같다.
함수형 표기법 ex) rgb(R,G,B[,A])
:: rgb(R, G, B [,A]) : R,G,B,A값을 모두 0~100까지의 %값으로 표시하거나, R,G,B값은 0~255까지의 정수값, A값은 0~1사이의 실수값으로 표시한다. A값은 생략 가능하다.
-- <percentage>형식과 <number>형식을 혼용하면 값이 적용되지 않으니 주의할 것.
-- CSS Colors Level4부터 rgb()와 rgba()는 완전히 같으며, 쉼표가 아닌 공백으로도 인자를 구분할 수 있다.
-- 단, 공백으로 구분할 때 투명도는 / 슬래쉬로 구분한다. ex) rgb(255 255 0 / 0.5)
HSL 좌표계
:: Hue(색조), Saturation(채도), Lightness(명도)를 이용해서 색을 표현하는 방법.
:: RGB좌표계에서 색은 육면체상의 한 점으로 표현되지만 HSL좌표계에서는 원기둥 혹은 원뿔상의 한 점으로 표현된다.
-- CSS에서의 HSL 좌표계는 두개의 원뿔을 붙여놓은 다이아형태를 갖는다.
:: HSL좌표계에서는 색상이 원형축을 기준으로 표현되고, 채도는 반지름, 명도는 높이로 표현된다.
:: 함수형 표기법으로 표현된다.
함수형 표기법 ex) hsl(H, S, L [,A])
:: hsl(H, S, L [,A]) : H(색상)은 <angle>로, S와 L은 <percentage>로, A는 <number>혹은 <percentage>로 표현한다.
-- <angle>은 deg, rad, grad, turn 단위로 표현할 수 있으며, 단위를 쓰지 않으면 deg로 처리된다.
-- S(채도) 100%는 가장 진한색이고, 0%는 회색이다.
-- L(명도) 100%는 흰색이고, 0%는 검은색, 50%가 일반적인 색이다.
-- A(투명도)는 생략 가능하며, 0~1까지의 실수나 <percentage>로 표시한다.
-- CSS Colors Level4부터 hsl()과 hsla()는 완전히 같으며, 쉼표가 아닌 공백으로도 인자를 구분할 수 있다.
-- 단, 공백으로 인자를 구분할 시 투명도는 /(slash)로 구분한다. ex) hsl(120deg 100% 50% / 0.5)
color (MDN)
:: 요소의 글씨 및 글씨 장식의 색을 지정하는 속성.
:: 값으로 <color>자료형을 갖는다.
color-adjust (MDN)
:: 출력 장치에서 요소의 모양 브라우저가 자동으로 최적화하는 것을 허용할지 여부를 지정하는 속성.
:: 값으로 'economy' 혹은 'exact' 키워드를 갖는다.
-- economy : 브라우저의 자동 최적화를 허용한다. 기본값이다.
-- exact : 브라우저의 자동 최적화를 허용하지 않는다. 즉, 어떤 출력 장치에서도 제작자가 설정한 그대로 나온다.
opacity (MDN)
:: 요소 자체의 불투명도를 지정하는 속성.
:: 요소 내의 텍스트부터 배경까지 모든 요소에 영향을 준다. 즉, 자식 요소에도 영향을 준다.
:: 자식 요소의 불투명도는 부모 요소의 값과 자식 요소의 값을 곱한 값을 갖는 것으로 보인다.
-- 자식 요소는 불투명하게 유지하고 싶다면 부모요소에서 background-color속성을 rgba형태로 지정하면 된다.
:: 0~1까지의 실수를 값으로 갖는다. 1이면 불투명하고 0이면 투명하다. 기본값은 1이다.