이미지와 그라데이션 효과로 배경 꾸미기

배경색과 배경 범위 지정하기

• 배경색을 지정하는 background-color 속성

background-color: #008000;
background-color: rgb(0,128,0);
background-color: green;

• 배경색의 적용 범위를 조절하는 background-clip 속성

  속성값
  border-box: 박스 모델의 가장 외곽인 테두리까지 적용한다. 기본값
  padding-box: 테두리를 뺀 패딩 범위까지 배경 지정
  content-box: 콘텐츠에만 배경 지정

배경 이미지 지정하기

• 웹 요소에 배경 이미지를 넣는 background-image 속성

  기본형
  background-image: url('이미지 파일 경로')

• 배경 이미지의 반복 방법을 지정하는 background-repeat 속성

  속성값
  repeat: 가로 세로로 가득 찰 때까지 반복한다. 기본값
  repeat-x: 브라우저 화면 너비가 가득 찰 때까지 반복한다.
  repeat-y: 브라우저 화면 높이가 가득 찰 때까지 반복한다.
  no-repeat: 한번만 표시하고 반복하지 않는다.

• 배경 이미지의 위치를 조절하는 background-position 속성

  기본형
  background-position: <수평 위치> <수직 위치>

  수평 위치 : left | center | right | <백분율> | <길이 값>
  수직 위치 : top | center | bottom | <백분율> | <길이 값>

• 배경 이미지의 적용 범위를 조절하는 background-origin 속성

  속성값
  content-box: 박스 모델에서 내용 부분에만 배경 이미지를 표시, 기본값
  padding-box: 박스 모델에서 패딩까지 배경 이미지를 표시
  border-box: 박스 모델에서 테두리까지 배경 이미지를 표시

• 배경 이미지를 고정하는 background-attachment 속성

  속성값
  scroll: 화면을 스크롤하면 배경 이미지도 스크롤 된다. 기본값
  fixed: 화면을 스크롤하면 배경 이미지는 고정되고 내용만 스크롤 된다.

• background 속성 하나로 배경 이미지 제어하기

body {
  background-image: url(이미지 경로);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-attachment: fixed;
}
/* === */
background: url(이미지 경로) no-repeat center bottom fixed;

• 배경 이미지 크기를 조절하는 background-size 속성

  속성값
  auto: 원래 배경 이미지 크기만큼 표시, 기본값
  contain: 요소 안에 배경 이미지가 들어오도록 이미지를 확대.축소 한다.
  cover: 배경 이미지로 요소를 모두 덮도록 이미지를 확대.축소 한다.
  <크기>: 이미지의 너비와 높이를 지정, 하나만 주어지면 너비로 인식, 높이는 자동으로 계산
  <백분율>: 크기를 백분율로 지정하고 그 크기에 맞게 이미지를 확대.축소 한다.

그라데이션 효과로 배경 꾸미기

• 선형 그라데이션

  기본형
  linear-gradient(to <방향> 또는 <각도>, <색상 중지점>, [<색상 중지점>, ...])
  색상 중지점 : 바뀌는 색

/* ex */
.grad {
  background: blue;
  background: linear-gradient(to right bottom, blue, white);
}

.grad {
  background: blue;
  background: linear-gradient(to bottom, #06f, white 30%, #06f);
  /* 위에서 부터 30% 위치에 색상 중지점 지정 */
}

• 원형 그라데이션

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

/* ex */
.grad {
  background: blue;
  background: radial-gradient(white, yellow, red);
  /* 모양을 지정하지 않으면 타원형 */
}

.grad {
  background: blue;
  background: radial-gradient(circle, white, yellow, red);
  /* 원형 */
}