9.1 CSS에서 색상을 지정하는 방법
색상은 웹 디자인과 웹 개발에서 중요한 역할을 해. CSS에는 색상을 지정하는 여러 가지 방법이 있지, 그 방법 덕분에 개발자가 매력적이고 직관적인 인터페이스를 만들 수 있어. 아래에서는 색상 모델, 투명도, 그라디언트, 그리고 색상 작업을 위한 표준 함수들을 포함한 CSS에서 색상을 지정하는 다양한 방법을 살펴볼게.
CSS에서 색상을 지정하는 방법:
- 이름이 지정된 색상
- 16진수 색상
- RGB와 RGBA
- HSL과 HSLA
- 그라디언트
- 투명도
9.2 RGB 색상 모델
RGB (Red Green Blue) 모델은 빨간색, 초록색, 파란색을 섞어서 색상을 정하는 거지. 각각의 색상은 0부터 255 사이의 값을 가져.
1바이트는 0부터 255까지의 256개의 값을 가질 수 있어. 0은 최소값, 255는 최대값이야.
구문:
color: rgb(255, 0, 0); /* 빨간색 */
color: rgb(0, 255, 0); /* 초록색 */
color: rgb(0, 0, 255); /* 파란색 */
예시:
body {
background-color: rgb(240, 248, 255); /* 배경 색상: aliceblue */
}
9.3 HEX 색상 모델
HEX (Hexadecimal)은 색상을 16진수 값으로 표현해. 각 값 (RR, GG, BB)은 00부터 FF까지 변화할 수 있어.
1바이트는 0부터 255까지의 256개의 값을 가질 수 있지만, 16진수로 기록하면 최소값 0, 최대값 FF가 될 거야.
구문:
color: #ff0000; /* 빨간색 */
color: #00ff00; /* 초록색 */
color: #0000ff; /* 파란색 */
예시:
h1 {
color: #4CAF50; /* 초록색 */
}
9.4 HSL 색상 모델
HSL (Hue, Saturation, Lightness)은 색상을 색조, 채도, 밝기로 표현해. 색조 (Hue)는 각도 (0-360)로 측정되고, 채도 (Saturation)와 밝기 (Lightness)는 퍼센트 (0%-100%)로 측정되지.
구문:
color: hsl(0, 100%, 50%); /* 빨간색 */
color: hsl(120, 100%, 50%); /* 초록색 */
color: hsl(240, 100%, 50%); /* 파란색 */
예시:
p {
color: hsl(210, 100%, 50%); /* 파란색 */
}
9.5 투명도: RGBA와 HSLA
색상에 투명도를 추가하기 위해 RGBA와 HSLA 모델을 사용해. 이 모델들은 투명도 레벨을 0 (완전히 투명)에서 1 (완전히 불투명)까지 지정하는 알파 채널 (Alpha)을 추가하거든.
1. RGBA (Red, Green, Blue, Alpha):
구문:
color: rgba(255, 0, 0, 0.5); /* 반투명 빨간색 */
color: rgba(0, 255, 0, 0.3); /* 반투명 초록색 */
color: rgba(0, 0, 255, 0.7); /* 반투명 파란색 */
예시:
div {
background-color: rgba(255, 99, 71, 0.6); /* 반투명 토마토 색상 */
}
2. HSLA (Hue, Saturation, Lightness, Alpha):
구문:
color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨간색 */
color: hsla(120, 100%, 50%, 0.3); /* 반투명 초록색 */
color: hsla(240, 100%, 50%, 0.7); /* 반투명 파란색 */
예시:
span {
color: hsla(210, 100%, 50%, 0.8); /* 반투명 파란색 */
}
GO TO FULL VERSION