링크
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) 이다' 리고 쿨하게 받아줬네요. ^^
댓글 1개
은빛달그림자
12년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7830 | 10년 전 | 460 | ||
| 7829 |
 gilynh |
10년 전 | 642 | |
| 7828 | 10년 전 | 570 | ||
| 7827 | 10년 전 | 468 | ||
| 7826 | 10년 전 | 494 | ||
| 7825 | 10년 전 | 522 | ||
| 7824 | 10년 전 | 485 | ||
| 7823 | 10년 전 | 426 | ||
| 7822 | 10년 전 | 400 | ||
| 7821 | 10년 전 | 346 | ||
| 7820 | 10년 전 | 368 | ||
| 7819 |
 ABC디자인 |
10년 전 | 767 | |
| 7818 | 10년 전 | 425 | ||
| 7817 | 10년 전 | 604 | ||
| 7816 | 10년 전 | 441 | ||
| 7815 | 10년 전 | 636 | ||
| 7814 | 10년 전 | 476 | ||
| 7813 | 10년 전 | 433 | ||
| 7812 | 10년 전 | 440 | ||
| 7811 | 10년 전 | 419 | ||
| 7810 | 10년 전 | 615 | ||
| 7809 | 10년 전 | 551 | ||
| 7808 | 10년 전 | 430 | ||
| 7807 | 10년 전 | 441 | ||
| 7806 |
프로그래머7
|
10년 전 | 1363 | |
| 7805 | 10년 전 | 1304 | ||
| 7804 |
zahir1312
|
10년 전 | 805 | |
| 7803 |
ABC디자인 |
10년 전 | 1405 | |
| 7802 | 10년 전 | 505 | ||
| 7801 | 10년 전 | 883 | ||
| 7800 | 10년 전 | 1109 | ||
| 7799 | 10년 전 | 594 | ||
| 7798 | 10년 전 | 541 | ||
| 7797 | 10년 전 | 561 | ||
| 7796 | 10년 전 | 395 | ||
| 7795 | 10년 전 | 547 | ||
| 7794 | 10년 전 | 589 | ||
| 7793 | 10년 전 | 1088 | ||
| 7792 | 10년 전 | 510 | ||
| 7791 | 10년 전 | 606 | ||
| 7790 | 10년 전 | 530 | ||
| 7789 |
fbastore
|
10년 전 | 1481 | |
| 7788 | 10년 전 | 586 | ||
| 7787 | 10년 전 | 445 | ||
| 7786 | 10년 전 | 653 | ||
| 7785 | 10년 전 | 624 | ||
| 7784 | 10년 전 | 688 | ||
| 7783 | 10년 전 | 508 | ||
| 7782 | 10년 전 | 532 | ||
| 7781 | 10년 전 | 936 | ||
| 7780 | 10년 전 | 846 | ||
| 7779 | 10년 전 | 799 | ||
| 7778 | 10년 전 | 390 | ||
| 7777 | 10년 전 | 501 | ||
| 7776 | 10년 전 | 498 | ||
| 7775 | 10년 전 | 435 | ||
| 7774 | 10년 전 | 647 | ||
| 7773 | 10년 전 | 401 | ||
| 7772 | 10년 전 | 774 | ||
| 7771 | 10년 전 | 430 | ||
| 7770 | 10년 전 | 672 | ||
| 7769 | 10년 전 | 434 | ||
| 7768 | 10년 전 | 652 | ||
| 7767 | 10년 전 | 1206 | ||
| 7766 | 10년 전 | 534 | ||
| 7765 | 10년 전 | 593 | ||
| 7764 |
잘살아보자
|
10년 전 | 450 | |
| 7763 |
 foxrain |
10년 전 | 1500 | |
| 7762 |
Tosea
|
10년 전 | 1087 | |
| 7761 | 10년 전 | 692 | ||
| 7760 |
잘살아보자
|
10년 전 | 759 | |
| 7759 |
잘살아보자
|
10년 전 | 598 | |
| 7758 |
잘살아보자
|
10년 전 | 658 | |
| 7757 | 10년 전 | 1279 | ||
| 7756 |
ITBANK
|
10년 전 | 1290 | |
| 7755 | 10년 전 | 1945 | ||
| 7754 | 10년 전 | 1102 | ||
| 7753 | 10년 전 | 922 | ||
| 7752 | 10년 전 | 1421 | ||
| 7751 |
잘살아보자
|
10년 전 | 580 | |
| 7750 |
잘살아보자
|
10년 전 | 508 | |
| 7749 |
잘살아보자
|
10년 전 | 529 | |
| 7748 |
잘살아보자
|
10년 전 | 559 | |
| 7747 |
잘살아보자
|
10년 전 | 636 | |
| 7746 |
잘살아보자
|
10년 전 | 699 | |
| 7745 |
잘살아보자
|
10년 전 | 947 | |
| 7744 |
잘살아보자
|
10년 전 | 441 | |
| 7743 | 10년 전 | 970 | ||
| 7742 |
starbros
|
10년 전 | 865 | |
| 7741 |
잘살아보자
|
10년 전 | 707 | |
| 7740 |
잘살아보자
|
10년 전 | 594 | |
| 7739 |
잘살아보자
|
10년 전 | 487 | |
| 7738 |
잘살아보자
|
10년 전 | 562 | |
| 7737 |
잘살아보자
|
10년 전 | 541 | |
| 7736 |
잘살아보자
|
10년 전 | 561 | |
| 7735 |
잘살아보자
|
10년 전 | 897 | |
| 7734 |
잘살아보자
|
10년 전 | 454 | |
| 7733 |
잘살아보자
|
10년 전 | 564 | |
| 7732 |
잘살아보자
|
10년 전 | 731 | |
| 7731 |
잘살아보자
|
10년 전 | 653 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기