Background-size 크기 조절

Background-size :

auto : 기존 이미지 크기만큼 차지
contain : 지정 요소 안에 다 들어오게 차지
cover: 지정한 요소를 다 덮도록 배경이미지를 확대/축소

언제 img ? 언제 background?

1번 HTML <img /> 태그 활용

- 검색 시 노출이 되도록 만들고 싶을 때
- 콘텐츠에 관련이 있는 이미지일 때
- 웹페이지 성능을 높이고 싶을 때

2번 CSS background-image 속성 활용

- 디자인 적인 요소로만 이미지를 활용하고 싶을 때
- 콘텐츠와 관련이 없어 이미지를 불러오지 못해도 상관 없을 때

### **결론**

검색 노출과 성능, 디자인을 고려하여 두 가지 방법을 적절히 혼용하는 것이 바람직하다.

BACKGROUND 가장 중요

/* 기본적인 개념! 버튼 제작할 때 중요하다.*/

마진 공간에는 배경이 안 들어간다.
padding 공간에는 배경이 들어간다!

background: 20px 12px no-repeat url(images/arrow.gif)
20px == 수직 , 12px == 수평

메뉴 사이사이 line 넣는 경우가 있는데, 첫 번째 li 에 클래스 지정하여 background images를 삭제해줌

/* CSS 우선 순위가 중요하다. */
id (100점) > class (10점) > tag (1점)

ex) gnb li {background-color : #fff}
		gnb { // } 적용되는 것은 gnb li 
		
ex) gnb li:first-child { background-color : red} // 가상 요소 또한 점수가 10점
		
		
		
/*		백 그라운드 속성 한번에 적기 (공백으로만 구분) */
background : url(images/pattern.gif) no-repeat center top fixed;