Background

background-color

• 요소의 배경 색상을 지정하는 속성입니다.

• 요소의 콘텐츠가 아닌 요소의 배경색을 지정하는 속성입니다.

• 값	의미	기본값
  transparent	투명색	transparent
  색상	키워드, rgb, rgba, hex 등

background-image

• 요소 배경에 하나 이상의 이미지를 삽입하는 속성입니다.

• background-color 속성도 같이 사용하는 경우 background-image 뒤에 backgroun-color가 적용됩니다.

• 값	의미	기본값
  none	이미지 없음	none
  url("경로")	이미지 경로(URL)

• url() 함수를 통해 이미지 경로를 작성합니다. 삽입한 배경 이미지는 요소의 너비가 지정되어 있어야 보입니다.

• 하나 이상의 이미지를 삽입하려는 경우 콤마(,)를 사용하여 다중 이미지를 지정할 수 있습니다.

background-repeat

• 배경 이미지의 반복을 설정하는 속성입니다. 반복될 때는 기본적으로 요소의 좌측 상단부터 반복되어 출력됩니다.

• 값	의미	기본값
  repeat	배경 이미지를 수직, 수평으로 반복	repeat
  repeat-x	배경 이미지를 수평으로 반복
  repeat-y	배경 이미지를 수직으로 반복
  no-repeat	반복 없음
  space	요소의 크기를 벗어나지 않을 만큼 수직, 수평으로 반복

• 배경 이미지는 기본적으로 요소의 크기를 꽉 채우도록 반복적으로 출력됩니다(왼쪽 상단을 기준으로 요소의 크기만큼 이미지가 반복되어 출력).
  마지막 반복 이미지가 요소의 크기를 벗어나는 경우 이미지를 잘라 출력합니다.

background-size

• 배경 이미지의 크기를 설정하는 속성입니다.

• 값	의미	기본값
  auto	배경 이미지가 원본의 크기로 표시	auto
  contain	배경 이미지의 크기 비율을 유지하며, 요소의 더 짧은 너비에 맞춰짐(이미지가 짤리지 않음)
  cover	배경 이미지의 크기 비율을 유지하며, 요소의 더 넓은 너비에 맞춰짐(이미기가 짤릴 수 있음)
  단위	px, em, rem 등
  % 단위	요소의 너비 백분율로 지정

• contain 값의 경우 이미지의 비율을 유지하면서, 이미지가 요소 안에 짤리지 않고 요소가 이미지를 포함하도록 하는 속성값입니다. 그러므로 이미지는 짤리지 않지만 요소 내부에 빈 공간이 생길 수 있습니다.
  즉, 빈 공간이 생기더라도 전제 이미지가 어떻게든 다 보이도록 이미지 사이즈를 조정합니다.

• cover 값의 경우 이미지의 비율을 유지하면서, 요소 내부에 빈 공간이 생기지 않도록 꽉 차도록 사이즈가 조정이 됩니다. 이때 이미지가 짤릴 수 있습니다.
  즉, 이미지가 짤리더라도 빈 공간이 생기지 않도록 이미지 사이즈를 조정합니다.

• px, em, rem, % 등 단위의 값을 작성하는 경우 띄어쓰기로 구분하여 width heigth 둘 다 작성할 수도 있고, width 값 하나만 작성하여 비율에 맞게 크기를 지정할 수도 있습니다.

• % 단위값 사용시 요소 자체의 가로, 세로 너비 백분율 값을 작성해줍니다.

background-position

• 배경 이미지의 위치를 지정하는 속성입니다.

• 이때 2개의 값인 x축(가로)의 위치와 y축(세로)의 위치를 명시해주어야 합니다. 기준이되는 영점은 요소의 좌측 상단을 영점으로하여 위치가 지정됩니다.

• 배치 기준은 이미지를 감싸는 요소가 됩니다.

• 값	의미	기본값
  % 단위	요소의 너비 백분율로 이미지 중앙을 영점으로 위치 지정	0% 0%
  방향	top, right, bottom, left, center
  단위	px, em, rem 등

background-position 속성의 첫 번째 값은 x축에 대한 위치, 두 번째 값은 y축에 대한 위치를 띄어쓰기로 구분하여 작성합니다.

단위

px, em, rem 등 단위값을 사용하는 경우 요소 좌측 상단 꼭짓점을 영점으로 우측으로 x축, 아래로 y축으로 이동하게 됩니다.

주의할 점으로 만약 요소의 너비 이상인 값을 작성시 요소 밖으로 이미지가 짤리게 됩니다.

percent

% 단위 값 사용시 요소의 가로, 세로 너비 백분율로 이미지 중앙을 영점으로 x축은 오른쪽으로, y축은 아래로 이동하게 됩니다.

이때 주의할 점으로 0%나 100% 값을 사용하더라도 요소를 벗어 나지 않으며 끝에 존재하게 됩니다.

예를 들어, background-position: 100% 0;을 사용하더라도 요소의 오른쪽 끝에 이미지가 짤리지 않고 표시됩니다.

즉, 0% 0%는 left top과 동일하고, 0% 100%는 left bottom과 동일, 100% 0%는 right top과 동일, 100% 100%는 right bottom와 동일합니다.

방향

방향을 값으로 사용하는 경우 순서에 의미가 없습니다. 즉, 순서를 바꿔 작성해도 상관이 없습니다.

또한 방향을 작성할 때 하나의 값만 작성할 수도 있습니다. 이때 나머지 하나의 값은 자동적으로 center로 적용되어 배경 이미지가 배치됩니다.

방향값을 사용하는 경우 배경 이미지가 요소를 벗어나지 않습니다. 즉, 언제나 요소 내부에 이미지가 잘리지 않고 배치가 됩니다.

---

정리하자면 % 단위값과 방향 키워드를 사용하는 경우에는 배경 이미지가 잘리지 않고 언제나 요소 내부에 표시되며, 이외 단위값을 사용하는 경우 이미지가 잘려 표시될 수 있습니다.

px, em, rem과 같은 단위값들은 요소 좌측 상단을 영점으로 이미지를 이동시킵니다.

% 단위값의 기준은 배경 이미지가 표시될 요소 자체의 가로, 세로 너비 비율로 지정됩니다. 그리고 작성된 값은 이미지 중앙을 영점으로 이동하게 됩니다.

그리고 방향 키워드나 단위값을 섞어서 작성이 가능하며, 이때 값의 순서를 반드시 지켜 작성해주어야 합니다.

background-origin

• 배경 이미지가 배치될 원점을 지정하는 속성입니다.

• 값	의미	기본값
  padding-box	배경 이미지를 padding box에 상대적으로 배치	padding-box
  border-box	배경 이미지를 border box에 상대적으로 배치
  content-box	배경 이미지를 content box에 상대적으로 배치

• background-poistion 속성을 통해 배경 이미지를 배치할 때 배경 이미지는 요소의 좌측 상단을 영점으로 배치가 되었습니다.
  이때 영점은 실제로 Box Model 구조에서 padding box 영역의 좌측 상단을 영점으로 배치가 됩니다.

• background-origin 속성값을 border-box로 지정하게 되면 Box Model의 border box 영역의 좌측 상단을 영점으로 배치합니다.

• background-origin 속성값을 content-box로 지정하게 되면 Box Model의 content box 영역의 좌측 상단을 영점으로 배치합니다.

background-attachment

• 요소가 스크롤될 때 배경 이미지의 스크롤 여부를 설정하는 속성입니다.

• 값	의미	기본값
  scroll	배경 이미지가 요소와 함께 스크롤	srcoll
  fixed	배경 이미지가 viewport에 고정되어 요소와 함께 스크롤 되지 않음
  local	요소 내 스크롤 시 배경 이미지만 스크롤 됨

• scroll 값인 경우 배경 이미지와 요소가 같이 스크롤이 됩니다. 우리가 생각하는 일반적인 형태이며 기본값입니다.

• fixed 값은 배경 이미지가 viewport에 고정된 상태로 스크롤을 해도 움직이지 않습니다. 요소만 스크롤 됩니다.

• local 값은 스크롤하는 어떤 특성이 지역적으로 바뀝니다. 요소 내부에 지역적으로 스크롤 할 때 배경 이미지만 스크롤이 됩니다.

background

• backgroun 속성은 단축 속성이며 backgroun-color, background-image, background-origin, backgroun-repeat, background-poistion, background-size, background-attachment를 공백으로 구분하여 한 번에 설정할 수 있습니다.

• 필수로 작성되어야 할 속성은 없습니다. 생략된 속성값들은 자동적으로 기본값을 사용하게 됩니다.

• background-color를 작성하는 경우에는 가장 마지막에 작성해주어야 합니다.

• background-size는 background-position 바로 뒤에 /로 구분하여 작성해주어야 합니다. 즉, background-position/background-size 순서로 작성해주어야 합니다.