🎨 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

티스토리툴바