링크
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) 이다' 리고 쿨하게 받아줬네요. ^^
게시글 목록
| 번호 | 제목 |
|---|---|
| 6615 | |
| 6614 | |
| 6606 | |
| 19438 |
JavaScript
audio 음악이 끝났을때 이벤트를 넣을 수 있나요?
1
|
| 6604 | |
| 6592 | |
| 6588 | |
| 6586 | |
| 6583 | |
| 6577 | |
| 19437 |
JavaScript
캔버스 ( html5 ) 그림 그리기3
|
| 6576 | |
| 6575 | |
| 6574 | |
| 19435 | |
| 27715 | |
| 6571 | |
| 6570 | |
| 6562 | |
| 6559 | |
| 6553 | |
| 6552 | |
| 6551 | |
| 6548 | |
| 24572 | |
| 6545 | |
| 6544 | |
| 6543 | |
| 6541 | |
| 6539 | |
| 6527 | |
| 6526 | |
| 6524 | |
| 6519 | |
| 6516 | |
| 27701 | |
| 27699 | |
| 6515 | |
| 19434 |
JavaScript
캔버스 ( html5 ) 그림 그리기2
|
| 6514 | |
| 19433 |
JavaScript
캔버스 ( html5 ) 그림 그리기
|
| 6503 | |
| 19432 |
jQuery
파일 첨부시심플하게 버튼으로만 되게..
|
| 6500 | |
| 6497 | |
| 6496 | |
| 6491 | |
| 6485 | |
| 32041 | |
| 6483 | |
| 6479 | |
| 6478 | |
| 6475 | |
| 6473 | |
| 6467 | |
| 6465 | |
| 6462 | |
| 27697 | |
| 6454 | |
| 6451 | |
| 27695 | |
| 6446 | |
| 6440 | |
| 6437 | |
| 27688 | |
| 6433 | |
| 6430 | |
| 6427 | |
| 6426 | |
| 6422 | |
| 6421 | |
| 6418 | |
| 27686 | |
| 27678 | |
| 6414 | |
| 6410 | |
| 6404 | |
| 6400 | |
| 6398 | |
| 6389 | |
| 6384 | |
| 6383 | |
| 6378 | |
| 6370 | |
| 6363 | |
| 6348 | |
| 6338 | |
| 6329 | |
| 6328 | |
| 6316 | |
| 6309 | |
| 6299 | |
| 6296 | |
| 27674 | |
| 27671 | |
| 6293 | |
| 6282 | |
| 24570 | |
| 6277 | |
| 6264 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기