배경 스타일

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1) 배경 색 지정 - background-color

background-color는 웹 문서 전체에 배경색을 넣을 때 사용하는 속성이다.
<body>태그 선택자에서 지정해도 background-color값은 상속되지 않는다. 따라서 표나 목록 등에서 배경 색을 지정하고 싶다면 각 요소에서 직접 background-color속성을 이용해 배경 색 값을 지정해야 한다.

style{
  body { 
    background-color: <색상> 
  }
</style>

2) 배경 적용 범위 조절 - background-clip

선택자 { background-clip: 속성 값 }

속성 값	설명
border-box	박스 모델의 가장 외곽인 테두리(border)까지 적용한다.
padding-box	박스 모델에서 테두리를 뺀 패딩(padding) 범위까지 적용한다.
content-box	박스 모델에서 내용 부분에만 적용한다.

3) 웹 요소에 배경 이미지 넣기 - background-image

background-image는 배경에 jpg나 gif, png파일을 넣어 이미지가 나타나도록 하는 속성이다.
배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우, 기본적으로 반복해서 표시된다.
문서 전체에 배경 이미지를 지정하려면 <body>태그에 지정하고 특정 영역에 배경 이미지를 만들고 싶다면 클래스 선택자나 id선택자를 이용해 태그에 배경 이미지를 지정하면 된다.
이미지 파일의 경로는 현재 웹 문서를 기준으로 상대 경로를 지정하거나 'https//'로 절대 경로를 사용할 수 있다.

//웹 문서 전체에 배경 이미지 지정
body {
  background-image: url('bg1.png');
}

//특정 영역에 배경 이미지 지정
#area {
  background-image: url('bg2.png');
}

4) 배경 이미지 반복 방법 지정 - background-repeat

배경 이미지의 크기가 배경을 채우려는 요소보다 작을 경우 이미지가 반복해서 나타나는데, background-reapeat속성을 사용하면 배경 이미지 반복하는 방법을 지정할 수 있다.

선택자 { background-reapeat: 속성 값 }

속성 값	설명
repeat	브라우저 화면에 가득 찰 때까지 배경 이미지를 가로와 세로로 반복한다.
repeat-x	브라우저 창 너비와 같아질 때까지 배경 이미지를 가로로 반복한다.
repeat-y	브라우저 창 너비와 같아질 때까지 배경 이미지를 세로로 반복한다.
no-repeat	배경 이미지를 반복하지 않는다.

5) 배경 이미지 크기 조절 - background-size

배경 이미지의 크기가 배경을 채우려는 요소보다 큰 경우 background-size속성을 사용해 조절할 수 있다.

선택자 { background-size: 속성 값 }

속성 값	설명
auto	원래 배경 이미지 크기만큼 표시된다.
contain	요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소한다.
cover	배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.
크기 값	- 너비 값, 높이 값을 지정한다. - 너비 값만 지정할 경우, 자동으로 비율을 이용해 높이를 계산한다.
백분율	요소의 너비와 높이에 맞도록 배경 이미지를 확대/축소한다.

6) 배경 이미지 위치 조절 - background-position

요소의 한 쪽에 배경 이미지를 표시할 경우 background-position속성을 이용해 배경 이미지가 표시되는 위치를 조절할 수 있다.

선택자 { background-position: 수평위치 수직위치 }

- 위치 표시법

표시법	속성 값	설명
키워드 표시법	수평위치 : left, center, right 수직위치 : top, bottom, center	배경 이미지의 위치를 지정할 떄 가장 많이 사용되는 표시법이다.
백분율 표시법	30% 60%	배경 이미지를 넣으려는 요소의 왼쪽 모서리부터 가로30% 세로 60%에 배경 이미지의 가로,세로가 30%, 60%인 위치를 맞춘다.
길이 표시법	30px 20px	가로 30px, 세로 20px의 위치에 배경 이미지의 왼쪽 상단 모서리를 맞춘다.

7) 배경 이미지 배치할 기준 조절 - background-origin

선택자 { background-origin: 속성 값 }

8) 배경 이미지 고정 - background-attachment

background-attachment속성을 사용해 스크롤을 내려도 배경 이미지는 고정할 수 있다.

body { 
  background-image: url('이미지 파일'); 
  background-attachment: scroll 또는 fixed;
}

9) 속성 하나로 배경 이미지 제어 - background

body {
  background: url('이미지 파일') repeat fixed right bottom
}

winnih_B