모바일 해상도 맞추기

평균 픽셀 밀도 → 2.0 ~ 2.625 ~ 3.0

@media screen and (-webkit-min-device-pixel-ratio: 2){ // min 을 제외하면 픽셀밀도 2만 적용, min 포함시 픽셀밀도 최소 2
	선택자 {
    background : 고해상도URL // 모바일은 .png 선호
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 3){
	선택자 {
    background : 고해상도URL // 모바일은 .png 선호
    }
}

1. 배경이미지로 처리( IR기법 ) 할 경우 : 고정 사이즈
   1. 각 서비스 할 해상도 별 이미지가 각각 저장되어 있어야 한다.
   2. ex) logo.png( 320 ) , logox2.png( 640 )
   3. media query 를 사용해 해상도 감지 => 배경이미지를 고해상도 이미지로 교체한다.
2. 배경이미지 처리 => 유동( 너비만 유동, 높이는 고정 )
   1. 고해상도의 이미지를 준비
   2. 선택자 { background : ( 고해상도URL) center no-repeat background-size : cover } 
3. <img> 태그 사용 => 크기가 고정일 때
   1. 고해상도의 이미지를 준비
   2. img 태그의 속성에 직접 width 와 height 값 설정
   3. ex) <img src="고해상도 이미지.png" alt="" width="320해상도 이미지너비" height="320해상도 이미지 높이">
4. <img> 태그 사용 => 크기가 유동( 너비/높이 )일 때
   1. 고해상도의 이미지를 준비
   2. ex) <img src="고해상도 이미지.png" alt="" width="100%">