1. 배경 이미지 관련 속성

  <style>
    .desc {
      background-color: #ffd9a0; }  /* 배경색 지정 */
    #clip-border {
      background-clip: border-box; }  /* 배경색 적용 범위 조절 */
    li {
      background-image: url('images/bg1.jpg');  /* 배경 이미지 삽입 */
      background-repeat: no-repeat;  /* 배경 이미지 반복 안 함 */
      background-position: left center;  /* 배경 이미지를 왼쪽 중앙에 위치 */
      background-attachment: fixed; }  /* 스크롤 시 배경 이미지 고정 */
    #bg1 {
      background-origin: padding-box; /* 패딩까지 배경 이미지 표시 */
      background-size: cover; } /* 요소를 완전히 덮도록 배경 이미지 표시 */
  </style>

---

1) background-color

: 배경색 지정

background-color: #ffd9a0;        /* 16진수 */
background-color: rgb(0, 128, 0); /* rgb값 */
background-color: green;          /* 색상이름 */

---

2) background-clip

: 배경색 적용 범위 조절

background-clip: border-box;  /* 테두리까지 적용 */
background-clip: padding-box; /* 테두리를 뺀 패딩 범위까지 적용 */
background-clip: content-box; /* 내용 부분에만 적용 */

---

3) background-image

: 웹 요소에 배경 이미지 삽입
배경을 넣을 때 요소보다 이미지 크기가 작으면 이미지가 가로와 세로로 반복되면서 요소의 배경을 가득 채운다

background-image: url('이미지 파일 경로');

---

4) background-repeat

: 배경 이미지의 반복 방법 지정

background-repeat: repeat;    /* 화면에 가득 찰 때까지 가로와 세로로 반복 <기본값> */
background-repeat: repeat-x;  /* 화면 너비에 가득 찰 때까지 가로로 반복 */
background-repeat: repeat-y;  /* 화면 너비에 가득 찰 때까지 세로로 반복 */
background-repeat: no-repeat; /* 반복하지 않음 */

---

5) background-position

: 배경 이미지의 수평 위치 또는 수직 위치의 값을 지정

background-position: a b;
a(수평위치): left | center | right  | <백분율> | <길이값>
b(수직위치): top  | center | bottom | <백분율> | <길이값>

---

6) background-attachment

: 스크롤 시 배경 고정 여부 지정

background-attachment: scroll;
background-attachment: fixed;

---

7) background

: image, repeat, position, attachment 의 속성을 background라는 하나의 속성으로 줄여 사용 가능
속성들 입력 시 각 속성값이 다르므로 입력 순서는 고려하지 않아도 된다

body {
  background-image: url('이미지 파일 경로');
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
}
=========================<background>=============================
body {
  background: url('이미지 파일 경로') no-repeat center bottom fixed;

---

8) background-origin

: 배경 이미지 적용 범위 지정

background-origin: padding-box; /* 박스 모델에서 패딩까지 배경 이미지를 표시 */
background-origin: border-box;  /* 박스 모델에서 테두리까지 배경 이미지를 표시 */
background-origin: content-box; /* 박스 모델에서 내용 부분에만 배경 이미지를 표시 */

---

9) background-size

: 배경 이미지의 크기 조절

background-size: auto;       /* 원래 배경 이미지 크기로 표시 <기본값>*/
background-size: 200px;      /* 너비는 200px, 높이는 자동 계산 */
background-size: 50%;        /* 너비는 요소 기준으로 50%, 높이는 자동 계산 */
background-size: 100% 100%;  /* 요소의 너비와 높이를 100%로 맞춤 */
background-size: contain;    /* 요소의 배경 이미지가 다 보이게 표시 */
background-size: cover;      /* 요소를 완전히 덮도록 배경 이미지 표시 */

---

2. 그라데이션 효과

<style>
  .grad1 {
    background: linear-gradient(to right bottom, blue, white); }
  /* 선형 그라데이션 왼쪽 위에서 오른쪽 아래 방향으로, 파란색에서 흰색으로 */
  .grad2 {
    background: linear-gradient(to bottom, #06f, white 30%, #06f); }
  /* 위에서부터 30% 위치에 색상 중지점 지정 */
  .grad3 {
    background: radial-gradient(circle, yellow, white, orange); }
  /* 원형 그라데이션 */
</style>  

---

1) 선형 그라데이션

: 색상이 수직, 수평 또는 대각선 방향으로 일정하게 변하는 것을 말한다

기본형

liner-gradient(to <방향> 또는 <각도>, <색상중지점>, [<색상중지점>, ......];

---

a. 방향

: to 다음에 방향을 나타내는 예약어를 최대 2개까지 사용할 수 있다
수평방향 left와 right, 수직방향 top과 bottom
선형 그라데이션의 위치나 각도 옵션을 생략하면 to bottom이 기본값이 된다

background: linear-gradient(to right bottom, blue, white);
/* 왼쪽 위에서 오른쪽 아래 방향으로, 파란색에서 흰색으로 */

---

b. 각도

: 색상이 바뀌는 방향을 알려준다

background: linear-gradient(45deg, #f00, #fff);
/* 45도 방향, 빨간색에서 흰색으로 */

---

c. 색상 중지점

: 색상이 바뀌는 지점이다
색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있다

background: linear-gradient(to bottom, #06f, white 30%, #06f);
/* 위에서 아래로, #06f 시작색상, 30% 위치에 색상 중지점 지정, #06f 끝 색상 */

---

2) 원형 그라데이션

: 원 또는 타원의 중심에서부터 동심원을 그리며 바깥 방향으로 색상이 바뀐다

기본형

radial-gradient(<모양> <크기> at <위치>, <색상중지점>, [<색상중지점>, ......];

a. 모양

: 원형 그라데이션에서 만들어지는 모양은 원형circle과 타원형ellipse이다
입력하지 않으면 타원형이 기본값이다

background: radial-gradient(circle, white, yellow, red);
/* 원형, 원의 중심에서부터 흰색, 노란색, 빨간색 */

b. 크기

: 원의 모양과 키워드값을 함께 쓴다

background:radial-gradient(circle closest-side, white, yellow, red);
/* 그러데이션 중심에서 가장 가까운 측면에 닿을 때까지 */
background:radial-gradient(circle closest-corner, white, yellow, red);
/* 그러데이션 중심에서 가장 가까운 꼭짓점에 닿을 때까지 */
background:radial-gradient(circle farthest-side, white, yellow, red);
/* 그러데이션 중심에서 가장 멀리 떨어진 측면에 닿을 때까지 */
background:radial-gradient(circle farthest-corner, white, yellow, red);
/* 그러데이션 중심에서 가장 멀리 떨어진 꼭짓점에 닿을 때까지 <기본값>*/

c. 위치

: at키워드와 함께 지정하면 그라데이션이 시작하는 원의 중심을 다르게 나타낼 수 있다
left, center, right중 하나 또는 top, center, bottom중 하나 또는 30%, 20% 같은 백분율
값을 생략하면 가로와 세로 모두 중앙인 center로 인식

background:radial-gradient(circle at 20% 20%, white, yellow, red);
/* 수평20% 수직20%위치 */

d. 색상 중지점

: 색상이 바뀌는 지점
색상만 지정할 수도 있고 색상과 함께 중지 점의 위치도 함께 지정할 수도 있다

background:radial-gradient(yellow, white 10%, orange 60%);
/* 색상 중지점의 위치까지 지정 */