![[CSS]: 색상(color)](/images/htmlcss_logo.png){kind=logo}
Table of Contents
- CSS Color 완벽 가이드
CSS Color 완벽 가이드
웹 디자인에서 색상(Color)은 매우 중요한 요소이다. CSS에서는 다양한 방법으로 색상을 지정할 수 있으며, 이를 활용하여 시각적인 효과를 극대화할 수 있다. 이 글에서는 CSS에서 색상을 표현하는 방법과 관련 속성들을 정리해보겠다.
1. CSS에서 색상을 지정하는 방법
CSS에서는 여러 가지 방식으로 색상을 지정할 수 있다.
✅ 색상 이름 (Color Name)
CSS는 기본적으로 140가지 이상의 색상 이름을 제공한다.
.element {
color: red; /* 빨강 */
background-color: blue; /* 파랑 */
border-color: green; /* 초록 */
}
예시: red, blue, green, black, white, yellow, gray, orange 등
✅ HEX 코드 (Hexadecimal)
HEX 코드는 #RRGGBB 또는 #RGB 형식으로 색상을 표현한다.
.element {
color: #ff0000; /* 빨강 */
background-color: #00ff00; /* 초록 */
border-color: #0000ff; /* 파랑 */
}
#FF0000→ 빨강 (R=255, G=0, B=0)#00FF00→ 초록 (R=0, G=255, B=0)#0000FF→ 파랑 (R=0, G=0, B=255)#000000→ 검정 (R=0, G=0, B=0)#FFFFFF→ 흰색 (R=255, G=255, B=255)
✅ RGB (Red, Green, Blue)
RGB는 rgb(red, green, blue) 형식으로 색상을 표현한다.
.element {
color: rgb(255, 0, 0); /* 빨강 */
background-color: rgb(0, 255, 0); /* 초록 */
border-color: rgb(0, 0, 255); /* 파랑 */
}
✅ RGBA (RGB + Alpha)
RGBA는 RGB에 투명도(Alpha)를 추가한 방식이다. 값의 범위는 0(완전 투명)에서 1(완전 불투명)까지 설정할 수 있다.
.element {
background-color: rgba(255, 0, 0, 0.5); /* 반투명 빨강 */
}
✅ HSL (Hue, Saturation, Lightness)
HSL은 색조(Hue), 채도(Saturation), 밝기(Lightness)를 기반으로 색상을 지정한다.
.element {
color: hsl(0, 100%, 50%); /* 빨강 */
background-color: hsl(120, 100%, 50%); /* 초록 */
border-color: hsl(240, 100%, 50%); /* 파랑 */
}
✅ HSLA (HSL + Alpha)
HSLA는 HSL에 투명도(Alpha)를 추가한 방식이다.
.element {
background-color: hsla(0, 100%, 50%, 0.5); /* 반투명 빨강 */
}
2. 주요 CSS 색상 관련 속성
✅ color
텍스트 색상을 지정하는 속성이다.
p {
color: navy;
}
✅ background-color
배경 색상을 지정하는 속성이다.
div {
background-color: lightgray;
}
✅ border-color
테두리 색상을 지정하는 속성이다.
.box {
border: 2px solid red;
border-color: blue;
}
✅ opacity
요소의 투명도를 조절하는 속성으로 0(완전 투명)에서 1(완전 불투명)까지 지정할 수 있다.
.element {
opacity: 0.5; /* 반투명 */
}
✅ box-shadow
요소의 그림자를 추가할 수 있다.
.box {
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}
3. 그라디언트 (Gradient)
CSS에서는 linear-gradient()와 radial-gradient()를 사용하여 그라디언트를 적용할 수 있다.
✅ 선형 그라디언트 (Linear Gradient)
.gradient-box {
background: linear-gradient(to right, red, blue);
}
💡 to right(왼쪽 → 오른쪽), to bottom(위 → 아래) 등의 방향을 지정할 수 있다.
✅ 원형 그라디언트 (Radial Gradient)
.gradient-box {
background: radial-gradient(circle, yellow, green);
}
4. 색상 변수 활용하기 (CSS 변수)
반복적으로 사용되는 색상을 변수로 정의하면 유지보수가 쉬워진다.
:root {
--primary-color: #3498db;
--secondary-color: #e74c3c;
}
.button {
background-color: var(--primary-color);
color: white;
}
.alert {
background-color: var(--secondary-color);
color: white;
}
결론
CSS에서는 다양한 방법으로 색상을 지정할 수 있으며, 이를 활용하면 디자인을 더욱 풍부하게 만들 수 있다. HEX, RGB, HSL 등의 색상 표현 방식과 관련 속성을 이해하고 적절히 활용해보자! 🎨