색상

CSS 팟캐스트 - 006: Color 파트 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

2자리 16진수를 십진수로 변환하려면 첫 번째 자리에 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-255여야 합니다. RGB는 0~255 배율에서 작동하므로 255는 100%와 같고 0~0%와 같습니다.

RGB에서 검은색을 설정하려면 검은색을 rgb(0 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은 색조, 채도 및 밝기를 나타냅니다. 색조는 색상환의 값을 0에서 360도 사이의 값으로 설명하며, 빨간색 (0과 360 모두)부터 시작합니다. 색조 180 또는 50% 가 파란색 범위에 해당합니다. 그것은 우리가 보는 색의 원점입니다.

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

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

알파는 rgb()와 같은 방식으로 색조, 채도, 밝기 매개변수 뒤에 /를 추가 하거나 hsla() 함수를 사용하여 hsl()에서 정의됩니다. 알파는 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개입니다. 보라색, 토마토, 골든로드와 같은 평범한 영어 이름입니다. 웹 연감에 따라 가장 많이 사용되는 이름은 검은색, 흰색, 빨간색, 파란색, 회색입니다. 인기곡으로는 골든로드, 앨리스블루, 핫핑크 등이 있습니다.

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

• 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진수 코드 작동 방식