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