[CSS] 색상과 배경 다루기 (Gradients & Multi-bg)

이번 포스팅에서는 [CSS 디자인] 파트의 세부 주제인 색상 심화 및 그라디언트 활용법에 대하여 상세히 알아보겠습니다.

1. RGB vs HSL: 색상 보정의 마법사 HSL

실무에서 HEX나 RGB를 많이 쓰지만, 버튼의 hover 상태(조금 더 어둡게)나 시스템 테마를 구성할 때는 hsl()이 압도적으로 편리합니다. 명도(Lightness) 수치만 살짝 조절하면 되기 때문입니다.

.btn-primary {
  /* H: 210(파랑), S: 100%, L: 50% */
  background-color: hsl(210, 100%, 50%);
}

.btn-primary:hover {
  /* 색상과 채도는 유지하고 명도만 40%로 낮춰 어둡게 처리! */
  background-color: hsl(210, 100%, 40%);
}

2. 다중 배경 이미지와 그라디언트 블렌딩 노하우

배경 이미지 위에 반투명한 검은색 레이어(Dim 효과)를 씌울 때 별도의 <div> 없이 background 속성 하나로 끝내는 방법입니다.

.hero-banner {
  /* 콤마(,)를 사용하여 그라디언트와 URL 이미지를 겹침. 먼저 선언한 것이 위(Front)로 올라옵니다. */
  background: 
    linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)),
    url('/images/hero-bg.jpg');
    
  background-size: cover;
  background-position: center;
}

---

지금까지 색상(HSL)과 다중 배경 처리 노하우에 대해 살펴보았습니다. 불필요한 DOM 추가 없이 CSS만으로 세련된 오버레이 효과를 구현해 보세요.