[CSS] 11. 색상과 배경(색상 모델과 배경 속성)

웹사이트의 디자인에서 색상과 배경은 매우 중요한 역할을 합니다. CSS에서 다양한 방식으로 색상을 지정하고 배경을 설정할 수 있으며, 그라데이션과 배경 이미지를 함께 활용하여 시각적 효과를 극대화할 수 있습니다. 이 글에서는 색상 값을 설정하는 방법과 배경 이미지 및 그라데이션을 활용하는 방법을 설명하겠습니다.

1. 색상 모델: RGB, HEX, HSL

CSS에서 색상 값을 지정할 때 여러 가지 모델을 사용할 수 있습니다. 가장 흔한 색상 값 지정 방법은 RGB, HEX, HSL입니다.

RGB 색상: Red, Green, Blue 세 가지 색상을 조합하여 색을 표현합니다. 각 색상 값은 0부터 255까지의 숫자로 설정되며, rgb() 함수로 색상을 지정할 수 있습니다.

body {
  background-color: rgb(255, 0, 0); /* 빨간색 배경 */
}

HEX 색상: 16진수로 표현되는 색상 코드입니다. #AABBCC 형식으로 지정하며, 각 두 자리 값이 Red, Green, Blue에 대응합니다.

h1 {
  color: #00ff00; /* 초록색 텍스트 */
}

HSL 색상: Hue, Saturation, Lightness로 색상을 표현합니다. 색상은 각도의 형태로 지정되며(0부터 360까지), 채도(Saturation)와 밝기(Lightness)는 %로 설정됩니다.

p {
  color: hsl(240, 100%, 50%); /* 파란색 텍스트 */
}

2. 배경 이미지와 그라데이션: background 속성 활용법

CSS에서 배경을 설정할 때 background 속성을 사용합니다. 이 속성을 통해 배경 이미지를 추가하거나, 그라데이션 효과를 적용할 수 있습니다.

배경 이미지 설정: background-image 속성으로 이미지를 배경으로 설정할 수 있습니다. 배경 이미지가 요소의 크기에 맞춰 조정될 수 있도록 background-size, background-repeat 등의 추가 속성을 함께 사용할 수 있습니다.

body {
  background-image: url('background.jpg'); /* 배경 이미지 설정 */
  background-size: cover; /* 이미지가 요소 전체에 맞춰짐 */
  background-repeat: no-repeat; /* 이미지가 반복되지 않음 */
}

그라데이션 적용: linear-gradient() 또는 radial-gradient() 함수를 사용하여 그라데이션 효과를 배경에 적용할 수 있습니다. linear-gradient()는 선형 그라데이션을, radial-gradient()는 방사형 그라데이션을 만듭니다.

div {
  background: linear-gradient(to right, red, yellow); /* 왼쪽에서 오른쪽으로 빨간색에서 노란색으로 그라데이션 */
  height: 200px;
}

div {
  background: radial-gradient(circle, blue, green); /* 원형 그라데이션 */
  height: 200px;
}

3. 그라데이션과 배경 이미지의 병합

그라데이션과 배경 이미지는 겹쳐서 적용할 수 있습니다. 이 경우, 그라데이션을 먼저 설정한 뒤, 배경 이미지를 추가로 적용하면 그라데이션이 이미지 위에 덧씌워지는 방식으로 표현됩니다.

body {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('background.jpg'); /* 반투명한 검정색 그라데이션과 이미지 병합 */
  background-size: cover;
  background-repeat: no-repeat;
}

이와 같이 그라데이션과 배경 이미지를 적절히 조합하면, 웹사이트의 시각적 매력을 더욱 높일 수 있습니다.

참고 사이트

• developer.mozilla.org
• css-tricks.com
• w3schools.com