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 사용:
- B는 11이고, 16을 곱하면 176이 됩니다.
- F = 15
- 176 더하기 15 = 191
- 알파 값은 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
속성도 색상을 값 중 하나로 허용합니다.
학습 내용 확인하기
색상에 대한 지식 테스트
다음 중 올바른 색상은 무엇인가요?
rbga(400 0 1)
#0f08
#OOFZ2
rgb(255, 0, 0)
hsl(180deg 50% 50%)
hotpink
잘못된 HSL 색상을 찾습니다.
hsl(5, 0%, 90%)
hsl(.5turn 40% 60%)
hsl(0, 0, 0)
hsl(2rad 50% 50%)
hsl(0 0% 0% / 20%)