색상

CSS 팟캐스트 - 006: 색상 1부 를 통해 개인정보처리방침을 정의할 수 있습니다.

색상은 모든 웹사이트에서 중요한 부분이며 CSS에는 다양한 색상 유형 옵션이 있습니다. 함수와 처리를 살펴보겠습니다

사용할 색상 유형은 어떻게 결정하나요? 색상을 반투명하게 만들려면 어떻게 해야 하나요? 이 강의에서는 프로젝트와 팀에 올바른 결정을 내리는 데 도움이 되는 옵션을 배우게 될 것입니다.

CSS에는 다양한 데이터 유형이 있으며, 일종의 언어입니다. 색상은 이러한 유형 중 하나이고 다른 유형을 사용합니다. 자체 정의를 나타내는 숫자와 같은 형태입니다.

숫자 색상

CSS의 색상은 숫자 색상을 통해 처음 노출될 가능성이 매우 높습니다. 숫자 색상 값을 몇 가지 다른 형식으로 작업할 수 있습니다.

16진수 색상

h1 {
  color: #b71540;
}

16진수 표기법 (종종 16진수로 줄임)은 RGB의 축약 구문입니다. 숫자 값을 빨간색 녹색 및 파란색에 할당합니다. 세 가지 기본 색상입니다.

16진수 범위는 0~9 및 A~F입니다. 6자리 시퀀스로 사용하면 0~255인 RGB 숫자 범위로 변환됩니다. 각각 빨강, 초록, 청색 채널에 상응합니다.

숫자 색상으로 알파 값을 정의할 수도 있습니다. 알파 값은 투명도의 비율입니다. 16진수 코드에서는 6자리 시퀀스에 또 다른 두 자리를 추가합니다. 8자리 시퀀스를 만드는 것입니다. 예를 들어 16진수 코드에서 검은색을 설정하려면 #000000를 작성합니다. 50% 투명도를 추가하려면 #00000080로 변경합니다.

16진수 배율이 0~9 및 A~F이므로 투명도 값이 예상과 다를 수 있습니다. 다음은 검은색 16진수 코드 #000000에 추가된 주요 일반 값입니다.

• 0% 알파는 완전히 투명하며 00: #00000000입니다.
• 50% 알파는 80: #00000080
• 75% 알파는 BF: #000000BF

두 자리 16진수를 10진수로 변환하려면 첫 번째 자릿수에 16을 곱합니다 (16진수는 16진수이기 때문). 그런 다음 두 번째 숫자를 추가합니다. 알파 75% 의 예로 BF 사용:

1. B는 11과 같고 16을 곱하면 176이 됩니다.
2. F는 15와 같습니다.
3. 176 더하기 15 = 191은
4. 알파 값은 255의 191~75% 입니다.

RGB (빨간색, 녹색, 파란색)

h1 {
  color: rgb(183, 21, 64);
}

RGB 색상은 rgb() 색상 함수, 숫자 또는 백분율을 매개변수로 사용합니다. 숫자는 0~255 범위 내에 있어야 하며 백분율은 0% 에서 100% 사이여야 합니다. RGB는 0-255 스케일에서 작동하며 따라서 255는 100%, 0~0%가 됩니다.

RGB에 검은색을 설정하려면 rgb(0 0 0)로 정의합니다. 제로 레드, 0 초록색, 0 파란색입니다. 검은색은 rgb(0%, 0%, 0%)로 정의할 수도 있습니다. 흰색은 완전히 반대입니다(rgb(255, 255, 255) 또는 rgb(100%, 100%, 100%)).

알파는 두 가지 방법 중 하나로 rgb()에서 설정됩니다. 빨간색, 녹색, 파란색 매개변수 뒤에 /를 추가합니다. 또는 rgba() 함수를 사용하세요. 알파는 0과 1 사이의 백분율 또는 소수로 정의할 수 있습니다. 예를 들어 최신 브라우저에서 50% 알파 검은색을 설정하려면 rgb(0 0 0 / 50%) 또는 rgb(0 0 0 / 0.5)를 작성합니다. 더 광범위하게 지원하려면 rgba() 함수를 사용합니다. 쓰기: rgba(0, 0, 0, 50%) 또는 rgba(0, 0, 0, 0.5).

HSL (색조, 채도, 밝기)

h1 {
  color: hsl(344, 79%, 40%);
}

HSL은 색조, 채도, 밝기를 의미합니다. Hue는 색상환의 값을 빨간색 (0과 360)으로 시작하여 0~360도 나타냅니다. 색조는 180 또는 50% 가 파란색 범위에 해당합니다. 우리가 보는 색의 원점입니다.

채도는 선택한 색조가 얼마나 선명한지입니다. 채도가 완전히 낮은 색상 (채도 0%)은 회색조로 표시됩니다. 마지막으로 밝기는 추가된 빛의 흰색에서 검은색까지의 배율을 설명하는 매개변수입니다. 100%이 밝으면 항상 흰색이 됩니다.

hsl() 색상 함수를 사용하여 hsl(0 0% 0%) 또는 hsl(0deg 0% 0%)를 작성하여 트루 블랙을 정의합니다. 이는 색조 매개변수가 색상환의 각도를 정의하기 때문입니다. 숫자 유형을 사용하는 경우 0-360입니다. 각도 유형인 (0deg) 또는 (0turn)도 사용할 수 있습니다. 채도와 밝기는 모두 백분율로 정의됩니다.

알파는 hsl()에 정의되어 있습니다. 색조, 채도, 밝기 매개변수 뒤에 /를 추가 또는rgb() hsla() 함수를 사용하세요. 알파는 0과 1 사이의 백분율 또는 소수로 정의할 수 있습니다. 예를 들어 50% 알파 블랙을 설정하려면 hsl(0 0% 0% / 50%) 또는 hsl(0 0% 0% / 0.5)을 사용합니다. hsla() 함수를 사용하여 hsla(0, 0%, 0%, 50%) 또는 hsla(0, 0%, 0%, 0.5)를 작성합니다.

색상 키워드

CSS에는 이름이 지정된 색상 148개가 있습니다. 보라색, 토마토, 골든로드와 같은 평범한 영어 이름입니다. 가장 인기 있는 이름 중에는 Web Almanac에 따르면 검정색, 흰색, 빨간색, 파란색 및 회색입니다. 인기 작품은 골든로드, 앨리스블루, 핫핑크입니다.

표준 색상 외에도 다음과 같은 특수 키워드를 사용할 수 있습니다.

• transparent은 완전히 투명한 색상입니다. background-color의 초깃값이기도 합니다.
• currentColor는 color 속성의 상황별로 계산된 동적 값입니다. 텍스트 색상이 red인 경우 border-color을 currentColor로 설정하면 빨간색도 표시됩니다. currentColor를 정의하는 요소에 정의된 color 값이 없는 경우 대신 캐스케이드로 currentColor가 계산됩니다.

CSS 규칙에서 색상을 사용하는 위치

CSS 속성이 <color> 데이터 유형을 값으로, 위의 색상 표현 방법 중 하나를 사용할 수 있습니다. 텍스트 스타일을 지정하려면 color, text-shadow, text-decoration-color 속성을 사용하세요. 모두 색상을 값으로 사용하거나 색상을 값의 일부로 허용합니다.

배경의 경우 색상을 background 또는 background-color 값으로 설정할 수 있습니다. 색상은 linear-gradient와 같은 그라데이션에도 사용할 수 있습니다. 그라데이션은 CSS에서 프로그래매틱 방식으로 정의할 수 있는 이미지 유형입니다. 그라데이션은 16진수, rgb, hsl과 같은 색상 형식의 조합으로 두 개 이상의 색상을 허용합니다.

마지막으로 border-color 및 outline-color는 상자의 테두리와 윤곽선 색상을 설정합니다. box-shadow 속성은 색상도 값 중 하나로 허용합니다.

이해도 확인

색상에 관한 지식 테스트

리소스

• HSL에서 각도를 사용하는 방법을 보여주는 편리한 데모
• 색상에 대한 종합 가이드
• 넓은 색 영역에 관한 종합 가이드
• [동영상] 16진수 코드를 읽는 방법에 관한 설명
• 16진수 코드 작동 방식