배경 이미지와 색상 처리: CSS 속성 정리 및 활용법

1. 배경색 설정 (background-color)

• 용도: 웹 요소의 배경색을 지정합니다.
• 예시:

  background-color: #f0f0f0;

---

2. 배경 클립 설정 (background-clip)

• 용도: 배경이 웹 요소의 어느 부분까지 적용될지 지정하는 속성입니다.

• 기본값은 테두리까지 적용됩니다.

• 값:

  • border-box: 배경을 테두리 영역까지 확장.
  • padding-box: 배경을 패딩 영역까지 확장.
  • content-box: 배경을 콘텐츠 영역까지만 적용.

• 예시:

  background-clip: padding-box;

---

3. 배경 이미지 설정 (background-image)

• 용도: 웹 요소의 배경으로 이미지를 지정합니다.
• 예시:

  background-image: url('images/bg.jpg');

---

4. 배경 반복 설정 (background-repeat)

• 용도: 배경 이미지가 가로, 세로로 반복될지 여부를 설정합니다.

• 값:

  • repeat: 가로와 세로로 모두 반복 (기본값).
  • repeat-x: 가로로만 반복.
  • repeat-y: 세로로만 반복.
  • no-repeat: 반복하지 않음.

• 예시:

  background-repeat: no-repeat;

---

5. 배경 위치 설정 (background-position)

• 용도: 배경 이미지가 어디에 위치할지 지정합니다.

• 이미지가 반복되지 않는 경우에 유용합니다.

• 값: left, right, center, top, bottom, 또는 픽셀이나 퍼센트 값으로 위치를 지정할 수 있습니다.

• 예시:

  background-position: center top;

---

6. 배경 기준 설정 (background-origin)

• 용도: 배경 이미지가 어디에서 시작될지를 지정하는 속성입니다.

• 값:

  • border-box: 테두리 영역을 기준으로 배치.
  • padding-box: 패딩 영역을 기준으로 배치 (기본값).
  • content-box: 콘텐츠 영역만 기준으로 배치.

• 예시:

  background-origin: content-box;

---

7. 배경 고정 속성 (background-attachment)

• 용도: 배경 이미지를 고정할지 여부를 설정하는 속성입니다.

• 값:

  • scroll: 화면을 스크롤할 때 배경도 함께 이동 (기본값).
  • fixed: 배경 이미지가 고정되고 스크롤해도 움직이지 않음.
  • local: 콘텐츠를 스크롤할 때 배경도 함께 스크롤.

• 예시:

  background-attachment: fixed;

---

8. 배경 속성 단축 표기 (background)

• 용도: 여러 배경 관련 속성을 한 줄로 작성합니다.

• 각 속성 값의 순서는 중요하지 않습니다.

• 예시:

  background: url('images/bg.png') no-repeat center bottom fixed;

---

9. 배경 크기 조절 (background-size)

• 용도: 배경 이미지의 크기를 조절합니다.

• 값:

  • cover: 배경 이미지를 요소의 가로, 세로 크기에 맞게 꽉 채웁니다.
  • contain: 배경 이미지의 비율을 유지하며 요소에 맞게 조정합니다.

• 예시:

  background-size: cover;

---

10. 그라데이션 배경

10.1 선형 그라데이션 (linear-gradient)

• 용도: 선형적으로 색상을 변화시키는 배경을 설정합니다.
• 예시:

  background: linear-gradient(to right, red, blue);

10.2 원형 그라데이션 (radial-gradient)

• 용도: 원형으로 색상이 퍼지는 형태의 그라데이션을 설정합니다.
• 예시:

  background: radial-gradient(circle at 20% 20%, white, blue);

---

추가할 사항

1. background-blend-mode:

   • 용도: 배경 이미지와 배경색이 겹칠 때 블렌드 모드를 적용하여 두 색상이 섞이는 방식을 지정합니다.
   • 예시:

     background-blend-mode: multiply;

2. multiple background:

   • 용도: 하나의 요소에 여러 배경 이미지를 동시에 설정할 수 있습니다.
   • 배경을 쉼표로 구분하여 여러 이미지를 적용할 수 있습니다.
   • 예시:

     background: url('image1.jpg'), url('image2.png');