색상

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

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

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

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

숫자 색상

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

16진수 색상

h1 {
  color: #b71540;
}

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

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

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

16진수 배율이 0~9A~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% 가 파란색 범위에 해당합니다. 우리가 보는 색의 원점입니다.

각 각도 값이 나타내는 내용을 시각화할 수 있도록 60도 단위로 도 값에 대한 라벨이 있는 색상환

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

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

HSL 색상 함수를 시각적으로 세분화 색조는 색상환을 사용합니다. 채도는 회색이 청록색에 섞여 있음을 보여줍니다. 밝기가 검은색에서 흰색으로 바뀝니다.

알파는 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의 초깃값이기도 합니다.
  • currentColorcolor 속성의 상황별로 계산된 동적 값입니다. 텍스트 색상이 red인 경우 border-colorcurrentColor로 설정하면 빨간색도 표시됩니다. currentColor를 정의하는 요소에 정의된 color 값이 없는 경우 대신 캐스케이드로 currentColor가 계산됩니다.
를 통해 개인정보처리방침을 정의할 수 있습니다.

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

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

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

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

이해도 확인

색상에 관한 지식 테스트

다음 중 유효한 색상은 무엇인가요?

rbga(400 0 1)
rbga는 rgba의 오타이며 400은 허용되는 것보다 크므로 유효하지 않습니다.
#0f08
🎉
#OOFZ2
16진수 값이 아니며, 5개의 숫자에 불과하고 Z가 포함되어 있어 유효하지 않습니다.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

잘못된 hsl 색상을 찾습니다.

hsl(5, 0%, 90%)
유효한 hsl 값입니다.
hsl(.5turn 40% 60%)
유효한 hsl 값입니다.
hsl(0, 0, 0)
🎉 금액을 찾았습니다. 두 번째 및 세 번째 값은 백분율이어야 합니다.
hsl(2rad 50% 50%)
유효한 hsl 값입니다.
hsl(0 0% 0% / 20%)
유효한 hsl 값입니다.

리소스