[ 번역 ] 미디어 쿼리 & 에 셋 다운로드 결과 : : 잡다 한 개발 블로그 
 조금 전 , 미디어 쿼리 를 포함 할 때 이미지 가 다운로드 되 는 방법 에 대한 책 에 대해 조사 중 이 라고 말 했었 습니다 . 조사 를 돕 기 위해 JavaScript 가 이미지 요청 여부 를 결정 할 수 있 는 자동 화 된 테스트 를 작성 했 고 , 테스트 검토 를 위해 Browserscope 에서 결과 를 수집 할 수 있 었 습니다 . 최초 발견 한 내용 을 포스팅 했었 지만 , 이제 는 더 자세히 말 할 수 있 을 만큼 충분 한 데이터 를 가지 고 있 다고 생각 합니다 . 
 먼저 , 모든 공로 는 Cloud Four 에 있 는 멋진 팀 에게 돌아가 야 합니다 . 대부분 의 테스트 는 그 들 이 자신 의 업무 를 테스트 하 기 위해 만들 었 습니다 . 저 는 단지 테스트 를 자동 화 하 기 위해 자바 스크립트 를 추가 했 습니다 . 
 결과 를 봅시다 ! 
 테스트 1 : 이미지 태그 
 이 페이지 는 display : none 을 사용 하 여 div 에 포함 된 이미지 를 숨기 려고 했 습니다 . HTML 과 CSS 는 다음 과 같 습니다 : 
 이미지 를 가리 는 방법 중 에 100 % 확실 하 게 피해야 하 는 방법 이 있 다고 하 면 , display : none 을 사용 하 는 방법 입니다 . 이것 은 완전 쓸모없 습니다 . 오페라 모바일 과 오페라 미니 는 이미지 를 다운로드 하 지 않 는 것 같 습니다 ( 그 이유 는 이전 글 참조 ) . 하지만 다른 모든 것 은 이미지 를 요청 합니다 . 
 테스트 대상 이미지 요청 
 Android 2 . 1 + O 
 Blackberry ( 6 . 0 +) O 
 Chrome ( 4 . 1 ) + O 
 Chrome Mobile O 
 Kindle ( 3 . 0 ) O 
 간단 합니다 . 쓰 지 마세요 . 
 테스트 2 : 배경 이미지 display : none 
 이 테스트 에서 div 에 배경 이미지 를 주 었 습니다 . 화면 의 너비 가 600 px 미만 인 경우 에 는 , div 가 display : none 으로 설정 됩니다 . HTML 과 CSS 는 다음 과 같 습니다 : 
 첫 번 째 테스트 와 동일 합니다 . 오페라 모바일 , 오페라 미니 를 제외 한 테스트 한 모든 브라우저 가 이미지 를 다운로드 합니다 . 
 Silk O 
 다시 말 합니다 . 쓰 지 마세요 . 다행히 도 다른 테스트 에서 보여 주 듯이 , 이미지 요청 없이 배경 이미지 를 숨기 는 몇 가지 쉬운 방법 이 있 습니다 . 
 테스트 3 : 배경 이미지 , 부모 오브젝트 를 display : none 
 이 테스트 에서 div 에 배경 이미지 를 주 었 습니다 . 화면 의 너비 가 600 px 미만 인 경우 에 는 , div 의 부모 ( 또 다른 div ) 가 diplay : none 으로 설정 됩니다 . HTML 과 CSS 는 다음 과 같 습니다 . 
 이것 을 발견 한 제이슨 그 릭스비 ( Jason Grigsby ) 에게 영광 을 돌립니다 . 표면 적 으로 는 이것 이 왜 테스트 2 와 다른지 명백 하 지 않 습니다 . 하지만 연구 초기 에 제이슨 그 릭스비 는 이것 이 차이 가 있 는 것 처럼 보였 으므로 테스트 했 습니다 . 이 방법 은 실제로 꽤 신뢰 할 만 하 기 때문 에 우리 로서 는 다행 입니다 . 
 Android 2 . 1 + X 
 Blackberry ( 6 . 0 +) X 
 Chrome ( 4 . 1 ) + X 
 Chrome Mobile X 
 Kindle ( 3 . 0 ) X 
 이 방법 은 잘 동작 합니다 . 테스트 를 거친 모든 브라우저 는 필요 한 경우 에 만 이미지 를 다운로드 합니다 . 너무 열심히 다운 받 는 Fennec 를 제외 하 고요 . 이 방법 의 문제점 은 포함 하 고 있 는 요소 도 숨겨야 한다는 점 입니다 . 만약 숨겨 도 된다면 자유 롭 게 이 방식 을 사용 하 세요 . 
 테스트 4 : 배경 이미지 를 캐스케이드 로 오버 라이드 ( Cascade Overide ) 
 이 테스트 에서 div 에 배경 이미지 를 주 었 습니다 . 화면 의 너비 가 600 px 미만 인 경우 에 는 , div 에 다른 이미지 를 주 었 습니다 . 이 테스트 에서 는 두 개 다 요청 했 는지 , 필요 한 한 개 만 요청 했 는지 확인 합니다 . HTML 과 CSS 는 다음 과 같 습니다 . 
 확실히 display : none 을 사용 하 는 것 보단 낫 지만 , 이 방법 은 약간 흠 이 있 습니다 . 
 Android 2 . 1 - 3 . 0 ? O 
 Android 4 . 0 X 
 Blackberry 6 . 0 O 
 Blackberry 7 . 0 X 
 Chrome ( 16 ) + X 
 저 는 피할 것 입니다 . 상황 은 나아지 고 있 지만 , 안드로이드 시장 점유 율 을 지배 하 고 있 는 안드로이드 2 . x 는 ( 역주 : 2012 년 글 입니다 ) Fennec 와 Kindle 처럼 두 이미지 를 다운로드 합니다 . 세 가지 , 특히 안드로이드 때문 에 다른 방법 을 보 는 것 을 권합니다 . 
 테스트 5 : 배경 이미지 의 데스크 탑용 이미지 를 min - width 로 셋 팅 
 이 테스트 에서 div 에 미디어 쿼리 ( min - width : 601 px ) 가 일치 하 면 어떤 배경 이미지 를 주 고 , ( max - width : 500 px ) 가 일치 하 면 다른 이미지 를 주 었 습니다 . HTML 과 CSS 는 다음 과 같 습니다 . 
 상황 이 조금 더 나아졌 습니다 . 
 Chrome ( 16 +) X 
 이제 더 많 은 브라우저 가 실행 됩니다 . Fennec 는 여전히 제 어 불가 합니다 . 
 이 방법 을 사용 하 면 Internet Explorer 이하 의 대체 옵션 을 생각 해야 합니다 . 그 버전 의 브라우저 는 미디어 쿼리 를 지원 하 지 않 으므로 이미지 가 적용 되 지 않 습니다 . 물론 조건부 주석 이나 IE 특정 스타일 시트 로 해결 할 수 있 는 간단 한 문제 입니다 . 
 테스트 6 : 배경 이미지 display : none ( max - device - width ) 
 이 테스트 는 테스트 2 와 동일 하 지만 미디어 쿼리 를 max - width 대신 max - device - width 를 사용 했 습니다 . HTML 과 CSS 는 다음 과 같 습니다 . 
 이것 에 많 은 시간 을 할애 하 지 않 겠 습니다 . 왜냐하면 결국 이 시험 은 버려 지 는 시험 이 였 기 때문 입니다 . 이것 은 테스트 2 와 차이 가 없 었 습니다 . 이 테스트 는 누군가 가 Cloud Four 의 원래 테스트 와 는 다른 결과 를 얻 었 다고 언급 한 트윗 때문 에 추가 되 었 지만 , 그 다른 부분 은 완전히 다른 것 때문 에 발생 했 습니다 . ( 기억 이 맞 다면 오타 때문 이 였 습니다 ) 
 테스트 7 : 고해상도 대응 을 위한 캐스케이드 로 오버 라이드 
 마지막 테스트 는 좀 늦 게 추가 되 었 습니다 . 레티 나 iPad 를 코앞 에 두 고 , 고해상도 디스플레이 에 이미지 를 제공 하 는 방법 에 대한 많 은 게 시물 이 있 었 습니다 . 한 게시물 에서 Brad Frost 는 이 테스트 의 결과 를 보 는 것 이 흥미 로울 거 라고 언급 해서 추가 했 습니다 . 
 이 테스트 에서 div 에 배경 이미지 를 주 었 습니다 . 그런 다음 , min - device - pixel - ratio 미디어 쿼리 를 사용 하 여 최소 비율 이 1 . 5 인 경우 새로운 배경 이미지 를 적용 했 습니다 . 
 HTML 과 CSS 는 다음 과 같 습니다 . 
 모든 테스트 중 에서 이 테스트 가 많 은 사람 들 이 테스트 를 해 주 는 게 가장 도움 이 됩니다 . 말 하 자면 , 다음 과 같 은 결과 가 정확 해 보 입니다 . 
 Blackberry 6 . 0 X 
 다시 한 번 말 하 지만 , 이 테스트 는 안정 성 을 위해 조금 더 실행 되 는 것 이 좋 습니다 . 이 방법 은 대부분 은 작동 하 는 것 으로 보입니다 . 안타깝 게 도 , Android 2 . x 에서 디바이스 비율 픽셀 이 1 . 5 이상 이 면 ( 혹은 미디어 쿼리 에서 설정 한 값 이상 ) 이미지 를 모두 다운로드 합니다 . 따라서 위 테스트 의 경우 Android 2 . x 를 실행 하 는 고해상도 장치 가 있 다면 안타까운 일 입니다 . 
 좋 은 소식 은 , 지금 1 . 5 이상 의 디바이스 픽셀 비율 이 1 . 5 가 넘 는 안드로이드 디바이스 를 모른다는 점 입니다 . 따라서 레티 나 디스플레이 iOS 디바이스 를 타 겟 으로 한다면 , min - device - pixel - ratio 를 2 로 설정 하 면 안 전할 것 입니다 . 그리고 이제 이렇게 말 했으니 , 이 글 의 첫 세 개 의 댓글 이 글 을 바로잡 고 , 내 가 증명 한 것 이 틀렸 다는 것 을 지적 하 는 안드로이드 기기 가 나오 는 것 을 기대 하 고 있 습니다 . 
 이 테스트 실행 초반 에 는 Android 가 잘 동작 하 는 것 처럼 보였 기 때문 에 , 좀 실망 스럽 습니다 . 안드로이드 는 테스트 를 엉망 으로 만드 는 것 처럼 보이 는 유일 한 브라우저 지만 , 또한 가장 많이 사용 되 기 도 합니다 . 
 display : none 을 설정 해서 콘텐츠 이미지 를 숨길 수 는 없 습니다 . JavaScript 또는 서버 기반 방식 을 사용 하 는 것 이 좋 습니다 . 
 배경 이미지 를 숨 기 는 가장 좋 은 방법 은 부모 요소 를 숨기 는 것 입니다 . 그렇게 할 수 없 다면 , 캐스케이드 로 오버 라이드 ( 테스트 5 와 같 음 ) 해서 background - image 를 none 으로 설정 하 세요 . 
 배경 이미지 를 바꾸 려면 , 미디어 쿼리 내부 에서 정의 하 세요 . 
 테스트 를 실행 해서 위 의 내용 이 잘못 되 었 다고 생각 하 면 , 나 에게 메일 을 보내 거나 GitHub 에 잘못 되 었 다고 리포트 를 보내 주 세요 . 제 가 파헤쳐 보 겠 습니다 . 테스트 를 추가 하 는 것 도 마찬가지 입니다 . 
 Media Query & Asset Downloading Results 을 번역 했 습니다 . 해당 글 은 퍼포먼스 향상 을 위해 불 필요 한 상황 에서 이미지 를 로드 하 지 않 도록 하 는 게 주 목적 인 것 같 습니다 . 저 는 반대 로 스프 라이트 이미지 를 먼저 다운로드 받 아야 하 는데 , 뒤늦 게 받 아서 렌 더 가 늦 어 지 는 이슈 때문 에 해당 글 을 참고 하 였 습니다 . 
 테스트 돌리 는 링크 가 사라져서 글 에서 삭제 하 였 습니다 . 
 모바일 , 미디어 쿼리 , 반응 형 , 번역 , 성능 
 [ 번역 ] 인터넷 익스플로러 의 opacity 상속 문제 해결 하 기 2018 . 01 . 24