[CODECADEMY] CSS COLOR (Named colors/ RGB / Hexadecimal/불투명도)

 

1. Foreground vs Background

 

 

색상의 특성을 논의하기 전에 색상에 대해 두 가지 구별을하는 것이 중요합니다. 

색상은 다음 디자인 측면에 영향을 줄 수 있습니다.

 

전경색 (foreground color)

배경색 (background color)

 

전경색은 요소가 나타나는 색상입니다. = 텍스트 색상

예를 들어 제목이 녹색으로 표시되도록 스타일을 지정하면 제목의 전경색 이 스타일 지정됩니다.

 

반대로 제목의 배경이 노란색으로 표시되도록 스타일을 지정 하면 제목의 배경색 이 스타일 지정됩니다.

CSS에서이 두 가지 디자인 측면은 다음 두 가지 속성으로 스타일을 지정할 수 있습니다.

 

color -이 속성은 요소의 전경색 스타일을 지정합니다.

background-color -이 속성은 요소의 배경색 스타일을 지정합니다.

 

 

h1 {
  color: Red;
  background-color: Blue;
}

 

위의 예에서 제목의 텍스트가 빨간색으로 표시되고 제목의 배경이 파란색으로 나타납니다.

 

---

 

2. 16 진수 (Hexadecimal)

색상을 지정하는 데 사용할 수있는 구문 중 하나를 16 진수 라고 합니다. 

이 시스템을 사용하여 지정된 색상을 16 진 색상 이라고 합니다 . 

16 진수 색상은 해시 문자 ( #)로 시작하고 그 뒤에 3 ~ 6자가옵니다. 문자는 빨강, 파랑 및 녹색의 값을 나타냅니다.

DarkSeaGreen: #8FBC8F
Sienna:       #A0522D
SaddleBrown:  #8B4513
Brown:        #A52A2A
Black:        #000000 or #000
White:        #FFFFFF or #FFF
Aqua:         #00FFFF or #0FF

 

           
위의 예에서 값에 문자와 숫자가 모두 있음을 알 수 있습니다. 

16 진수 시스템에 익숙한 것처럼 10 (0-9) 대신 16 자리 (0-15)가 있기 때문입니다. 

10-15를 나타 내기 위해 AF를 사용합니다. 다음 은 다양한 색상과 16 진수 값 목록입니다.

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

 

 

공지 사항 것을 Black, White그리고 Aqua모두 모두 세 문자 여섯 개 문자로 표시됩니다. 

숫자 쌍이 동일한 문자 인 16 진 색상으로 수행 할 수 있습니다. 

위의 예에서, Aqua는 #0FF 표현 될 수 있는데, 처음 두 문자값이  0이고, 두 번째 및 세 번째 쌍은 모두 F이기때문.

3 개의 문자 16 진 색상은 6 개의 문자로 표시 될 수 있지만 (각 문자를 두 번 반복하여) 

동일하게 반대로 적용 할 수는 없습니다. 

---

 

3. RGB 색상 (RGB Colors)

 

10 진수를 사용하는 RGB 값을 나타내는 또 다른 구문이 있습니다. 

h1 {
  color: rgb(23, 45, 23);
}

 

여기에서 세 값은 각각 색상 구성 요소를 나타내며 각각 0에서 255 사이의 10 진수 값을 가질 수 있습니다.

첫 번째 숫자는 빨강의 양을 나타내고,

두 번째 숫자는 녹색을,

세 번째 숫자는 파란색을 나타냅니다. 

 

이 색상은 16 진수와 정확히 동일하지만 구문과 숫자 체계가 다릅니다.

일반적으로 16 진수 및 10 진수 색상 표현은 동일합니다. 

당신이 선택한 것은 개인적인 취향의 문제입니다. 

즉, 16 진수와 16 진수를 비교하는 것이 더 쉽기 때문에 하나를 선택하고

CSS 전체에서 일관성을 유지하는 것이 좋습니다.

 

---

 

4. 색조, 채도 및 밝기

(Hue, Saturation, and Lightness)

 

RGB 색상 구성표는 컴퓨터가 내부적으로 색상을 표현하는 방식과 매우 유사하므로 편리합니다. 

CSS에는 색조-채도-밝기 색 구성표라고하는 또 다른 강력한 시스템이 있으며 HSL로 축약됩니다 .

HSL 구문은 10 진수 형식의 RGB와 비슷하지만 중요한 방식이 다릅니다.

 

첫 번째 숫자는 색조의 정도를 나타내며 0과 360 사이 일 수 있습니다.

두 번째와 세 번째 숫자는 각각 채도와 명도를 나타내는 백분율입니다. 예를 들면 다음과 같습니다.

 

color: hsl(120, 60%, 70%);

 

색조 가 첫 번째 숫자입니다. 컬러 휠의 각도를 나타냅니다. 

빨강은 0도, 초록은 120도, 파랑은 240도, 360도에서 빨강으로 돌아갑니다.

아래에서 컬러 휠의 예를 볼 수 있습니다.

 

 

채도 는 색상의 강도 또는 순도를 나타냅니다. 

컬러 휠의 중심에서 둘레로 선분을 그린 경우 채도는 해당 선분의 한 지점입니다. 

해당 선분을 다른 각도로 회전하면 채도가 다른 색조를 찾는 방법을 알 수 있습니다. 

포인트가 가장자리에 가까워 질수록 채도가 100 %로 증가합니다 (색상이 더 풍부 해짐). 

점이 중앙에 가까워짐에 따라 채도가 0 %로 감소합니다 (색이 더 회색이됩니다).

 

밝기 는 색상이 얼마나 밝거나 어두운지를 나타냅니다. 

중간 (50 %)은 보통 밝기입니다. 

반으로 시작하는 전등 스위치에 슬라이딩 조광기가 있다고 상상해보십시오.

 디머를 ​​100 %쪽으로 밀면 색상이 더 밝아지고 흰색에 가까워집니다. 

디머를 ​​0 %쪽으로 밀면 색상이 더 어둡고 검은 색에 가깝습니다.

 

HSL은 색상 조정에 편리합니다. 

RGB에서 색상을 조금 더 어둡게 만들면 세 가지 색상 구성 요소 모두에 영향을 줄 수 있습니다. 

HSL에서는 밝기 값을 변경하는 것만 큼 쉽습니다. 

HSL은 또한 밝기와 채도가 같지만 색조가 다른 다양한 색상을 선택하여

함께 작동하는 색상 세트를 만드는 데 유용합니다.

 

 

---

 

5. 불투명도와 알파 (Opacity and Alpha)

 

지금까지 본 모든 색상은 불투명합니다.

두 개의 불투명 한 요소를 겹치면 맨 아래 요소가 맨 위 요소를 통해 표시되지 않습니다.

이 연습에서는 일부 색상 의 불투명도 또는 투명도를 변경 하여

하단 요소의 일부 또는 전부가 덮개 요소를 통해 표시되도록합니다.

HSL 색상 표에서 불투명도를 사용하려면 hsl 대신 hsla을 사용하고

3개의 값 대신 4개를 사용한다. 예를 들면 다음과 같습니다.

 

color: hsla(34, 100%, 50%, 0.1);

처음 세 값은 hsl과 동일하게 작동합니다 . 

네 번째 값 (이전에 보지 못했음)은 alpha 입니다. 

이 마지막 값을 불투명도라고도합니다.

알파는 0에서 1까지의 10 진수입니다. 

알파가 0이면 색상이 완전히 투명 해집니다. 

알파가 1이면 색상이 불투명합니다. 

반투명 값은 0.5 입니다 

알파 값을 "전경과 혼합 할 배경의 양"으로 생각할 수 있습니다. 

색상의 알파가 1보다 낮 으면 색상 뒤에있는 색상이 혼합됩니다. 

혼합은 각 픽셀마다 발생합니다. 번짐이 발생하지 않습니다.

RGB 색 구성표에는 불투명도에 대한 구문이 비슷합니다 =rgba.

처음 세 값은 동일하게 작동 rgb하며 마지막 값은 알파입니다. 예를 들면 다음과 같습니다.

color: rgba(234, 45, 98, 0.33);

알파는 HSL 및 RGB 색상에만 사용할 수 있습니다.

알파 값을 color: green color: #FFFFF. 에 추가 할 수 없습니다 

그러나 불투명도가 0 인 명명 된 색상 키워드 transparent가 있습니다. 

 rgba(0, 0, 0, 0) 와 같습니다. 다른 색상 키워드와 같이 사용됩니다.

color: transparent;