🎨 CSS 색상 지정 방법 정리 (블로그 포맷)
CSS에서 색상을 설정하는 방법은 다양하며, 텍스트 색, 배경 색, 테두리 색 등 여러 요소에 적용할 수 있습니다. 이번 포스팅에서는 CSS에서 색상을 지정하는 모든 방법을 쉽게 정리해봅니다.
📌 기본 속성: color
- 텍스트 색상을 지정할 때 사용하는 대표 속성입니다.
p {
color: red;
}
이 외에도 background-color, border-color 등 다양한 속성에도 동일한 방식으로 색상을 적용할 수 있습니다.
✅ CSS에서 색상을 지정하는 방법
1️⃣ 색상 키워드 (영문명)
- red, blue, green, black, white 등 기본 색 이름으로 지정
h1 {
color: navy;
}
2️⃣ RGB 함수 사용 (rgb() / rgba())
- RGB는 빛의 3원색인 빨강(R), 초록(G), 파랑(B)을 0~255 범위 내로 설정
- rgba()는 투명도(alpha)를 추가로 설정 가능
div {
color: rgb(255, 0, 0); /* 빨강 */
background-color: rgba(0, 0, 0, 0.3); /* 반투명 검정 */
}
3️⃣ HSL 함수 사용 (hsl() / hsla())
- hsl()은 색조(hue, 각도 단위), 채도(saturation), 밝기(lightness)로 구성
- hsla()는 여기에 투명도(alpha)를 추가
section {
background-color: hsl(120, 100%, 50%); /* 초록 */
color: hsla(240, 100%, 70%, 0.7); /* 반투명 파랑 */
}
4️⃣ 16진수 색상 코드 (#RRGGBB / #RRGGBBAA)
- #RRGGBB 형태로 색을 표현하며, 각 쌍은 빨강(R), 초록(G), 파랑(B)의 비율
- #RRGGBBAA는 투명도까지 포함
body {
background-color: #ffcc00; /* 노랑 */
color: #ffffffcc; /* 반투명 흰색 */
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible"
contect="IE=edge"
>
<title>색깔지정하기기</title>
<style>
p#one{
color: rgb(0%, 50%, 0%);
opacity: 0.1;
}
p#two{
color: rgba(0%, 50%, 0%, 0.5);
}
p#three{
color: hsl(300, 50%, 60%);
}
p#four{
color: hsla(300, 50%, 60%, 0.5);
}
p#five{
color: #ff00ff99;
}
</style>
</head>
<body>
<p id="one">고소한 아몬드와 함께 여는 아침</p>
<p id="two">고소한 아몬드와 함께 여는 아침</p>
<p id="three">고소한 아몬드와 함께 여는 아침</p>
<p id="four">고소한 아몬드와 함께 여는 아침</p>
<p id="five">고소한 아몬드와 함께 여는 아침</p>
</body>
</html>🧠 마무리 요약
구분 방법 예시
| 키워드 | 색 이름 사용 | red, blue |
| RGB | rgb(0,0,0) | rgba(0,0,0,0.5) |
| HSL | hsl(0, 100%, 50%) | hsla(0, 100%, 50%, 0.5) |
| 16진수 | #000000 | #00000080 |
✨ 실전 팁
- 디자인 시 시각적 일관성을 위해 같은 방식의 색상 지정 방법을 사용하는 것이 좋습니다.
- 투명도를 사용하고 싶다면 rgba() 또는 hsla()를 활용하세요.
- 16진수는 복잡해 보일 수 있지만 디자이너와 협업 시 많이 사용됩니다.
이제 여러분도 CSS에서 색상을 자유롭게 다룰 수 있어요! 🌈💻
'HTML & CSS' 카테고리의 다른 글
| Mini Project : 프로필 페이지 만들기(CSS:2일차 과제) (0) | 2025.03.31 |
|---|---|
| Chapter 2-9. 텍스트 꾸미기(CSS) (0) | 2025.03.31 |
| Chapter 2-7. 배경 다루기(CSS) (0) | 2025.03.31 |
| Chapter 2-6. 여백다루기(CSS) (0) | 2025.03.31 |
| Chapter 2-5 테두리 스타일(CSS) (0) | 2025.03.31 |