링크
http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (229) https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/ (73)
반응형 이미지 표준으로 제안된 안 중 하나인, srcset이 WebKit에서 구현되었다는 소식입니다.
(참고로 크롬은 버전27까지 WebKit이었고, 지금은 Blink 기반입니다. 고로 이번 구현은 사파리에만 적용됩니다. ^^;)
<img src="low-res.jpg" srcset="high-res.jpg 2x">위와 같이 사용할 수 있으며,
위의 경우 2x 디스플레이의 경우 hight-res.jpg가 대신 보여지게 되고,
low-res.jpg는, 보통 해상도 이거나 srcset이 작동하지 않는 브라우져에서 보여집니다.
원래 제안된 srcset 문법은, (아래처럼) 가로폭 등에 대응할 수 있으나 현재는 1x, 2x 등 해상도 부분만 구현되었다고 합니다.
<img src="fallback.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, large-hd.jpg 2x" alt="…">다른 표준인 picture에 비하면, 문법이 조금은 편법같아 보이긴 하죠? ^^;
<picture>
<source src="med.jpg" media="(min-width: 40em)" />
<source src="sm.jpg" />
<img src="fallback.jpg" alt="" />
<picture>게다가 picture 표준은, srcset도 포함하고 있고요..
<picture>
<source srcset="med.jpg 1x, med-hd.jpg 2x" media="(min-width: 40em)" />
<source srcset="sm.jpg 1x, sm-hd.jpg 2x" />
<img src="fallback.jpg" alt="" />
<picture>자세한 내용은 링크들 (영문 글) 을 참조하시길..
뒷이야기>
picture를 제안한 사람 (첫번째 링크 글 작성자)이, 대기업이 아니라는 이유때문에? w3c 로부터
'커뮤니티그룹이나 만들어' 라는 퇴짜를 맞고 ( http://timkadlec.com/2012/05/wtfwg/ )
곧바로 저 이상한 표준을 애플로부터 받았을때는 곧바로 표준을 받아줬다는...
근데, 첫번째 글 작성자는, '그래도 어떻게든 반응형 이미지 구현이 되었으니 좋은일 (good thing) 이다' 리고 쿨하게 받아줬네요. ^^
게시글 목록
| 번호 | 제목 |
|---|---|
| 6256 | |
| 6255 | |
| 6254 | |
| 19430 | |
| 6253 | |
| 6252 | |
| 27670 | |
| 6249 | |
| 6246 | |
| 6242 | |
| 6241 | |
| 19429 |
JavaScript
자바스크립트로 이미지 롤링 관련 문의드립니다.
|
| 6238 | |
| 6237 | |
| 19426 | |
| 19413 | |
| 19411 | |
| 6232 | |
| 6227 | |
| 6226 | |
| 6224 | |
| 19408 | |
| 6223 | |
| 6221 | |
| 6220 | |
| 27663 | |
| 6213 | |
| 6212 | |
| 27661 | |
| 27659 | |
| 6209 | |
| 6203 | |
| 6200 | |
| 27654 | |
| 6194 | |
| 6188 | |
| 6180 | |
| 6173 | |
| 6150 | |
| 19407 | |
| 6145 | |
| 6141 | |
| 6138 | |
| 6131 | |
| 27650 | |
| 6128 | |
| 6125 | |
| 6122 | |
| 27648 | |
| 6119 | |
| 6114 | |
| 6109 | |
| 19402 |
JavaScript
위지윅 에디터 만들때 선택영역 풀리는 문제
4
|
| 6108 | |
| 27647 | |
| 6106 | |
| 27642 | |
| 27637 | |
| 6105 | |
| 6101 | |
| 6095 | |
| 6093 | |
| 6091 | |
| 6088 | |
| 27635 | |
| 27634 | |
| 6087 | |
| 27628 | |
| 6083 | |
| 6077 | |
| 24562 | |
| 27614 | |
| 6072 | |
| 6067 | |
| 6065 | |
| 19400 | |
| 19399 |
기타
IE 구분하기
|
| 19398 |
기타
js, css 캐싱 팁
|
| 19397 | |
| 6062 | |
| 27608 | |
| 6057 | |
| 27606 | |
| 19396 |
JavaScript
롤링 배너 이해하는데 도움이 될것 같아 올립니다
|
| 6054 | |
| 27600 | |
| 6048 | |
| 6040 | |
| 6031 | |
| 6028 | |
| 6024 | |
| 27594 | |
| 27593 | |
| 6023 | |
| 6018 | |
| 19395 | |
| 19394 |
PHP
게시판 페이지 관련 글입니다.
|
| 19390 | |
| 19388 |
JavaScript
멀티 체크박스입니다.
1
|
| 19386 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기