링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5930 | 12년 전 | 4640 | ||
| 5929 | 12년 전 | 7839 | ||
| 5928 | 12년 전 | 787 | ||
| 5927 | 12년 전 | 1415 | ||
| 5926 | 12년 전 | 1831 | ||
| 5925 |
김준수사랑
|
13년 전 | 1250 | |
| 5924 |
 darllim |
13년 전 | 2760 | |
| 5923 | 13년 전 | 959 | ||
| 5922 | 13년 전 | 1166 | ||
| 5921 | 13년 전 | 658 | ||
| 5920 | 13년 전 | 1180 | ||
| 5919 |
 슬픈외로움 |
13년 전 | 1374 | |
| 5918 | 13년 전 | 12588 | ||
| 5917 |
프로프리랜서
|
13년 전 | 1099 | |
| 5916 |
프로프리랜서
|
13년 전 | 4624 | |
| 5915 |
프로프리랜서
|
13년 전 | 1604 | |
| 5914 |
프로프리랜서
|
13년 전 | 653 | |
| 5913 |
프로프리랜서
|
13년 전 | 932 | |
| 5912 |
프로프리랜서
|
13년 전 | 3746 | |
| 5911 |
프로프리랜서
|
13년 전 | 925 | |
| 5910 |
 돼지코구뇽 |
13년 전 | 4583 | |
| 5909 |
수야3019
|
13년 전 | 671 | |
| 5908 | 13년 전 | 834 | ||
| 5907 | 13년 전 | 1233 | ||
| 5906 | 13년 전 | 8757 | ||
| 5905 |
프로프리랜서
|
13년 전 | 1473 | |
| 5904 | 13년 전 | 2496 | ||
| 5903 | 13년 전 | 1652 | ||
| 5902 | 13년 전 | 1927 | ||
| 5901 | 13년 전 | 2013 | ||
| 5900 |
프로프리랜서
|
13년 전 | 1090 | |
| 5899 |
프로프리랜서
|
13년 전 | 1278 | |
| 5898 | 13년 전 | 17672 | ||
| 5897 | 13년 전 | 2333 | ||
| 5896 | 13년 전 | 4356 | ||
| 5895 | 13년 전 | 1691 | ||
| 5894 | 13년 전 | 2100 | ||
| 5893 |
프로프리랜서
|
13년 전 | 2158 | |
| 5892 | 13년 전 | 16039 | ||
| 5891 |
bitmaster
|
13년 전 | 1080 | |
| 5890 |
프로프리랜서
|
13년 전 | 946 | |
| 5889 |
 AKASIA |
13년 전 | 723 | |
| 5888 | 13년 전 | 1618 | ||
| 5887 |
 ppogul |
13년 전 | 3199 | |
| 5886 | 13년 전 | 3448 | ||
| 5885 | 13년 전 | 2109 | ||
| 5884 | 13년 전 | 5651 | ||
| 5883 | 13년 전 | 2821 | ||
| 5882 | 13년 전 | 6029 | ||
| 5881 | 13년 전 | 1636 | ||
| 5880 | 13년 전 | 20716 | ||
| 5879 | 13년 전 | 903 | ||
| 5878 |
나의라임토마토
|
13년 전 | 1407 | |
| 5877 | 13년 전 | 16769 | ||
| 5876 |
maniAc
|
13년 전 | 2804 | |
| 5875 | 13년 전 | 1039 | ||
| 5874 | 13년 전 | 3735 | ||
| 5873 |
lainfox
|
13년 전 | 1182 | |
| 5872 | 13년 전 | 1345 | ||
| 5871 | 13년 전 | 795 | ||
| 5870 | 13년 전 | 2529 | ||
| 5869 |
AMDbest
|
13년 전 | 1512 | |
| 5868 |
한번잘해보자
|
13년 전 | 657 | |
| 5867 |
 byfun |
13년 전 | 916 | |
| 5866 | 13년 전 | 7492 | ||
| 5865 | 13년 전 | 2408 | ||
| 5864 | 13년 전 | 937 | ||
| 5863 | 13년 전 | 1308 | ||
| 5862 | 13년 전 | 2876 | ||
| 5861 | 13년 전 | 1028 | ||
| 5860 | 13년 전 | 19330 | ||
| 5859 | 13년 전 | 2943 | ||
| 5858 | 13년 전 | 2651 | ||
| 5857 | 13년 전 | 4823 | ||
| 5856 |
ppogul |
13년 전 | 1951 | |
| 5855 | 13년 전 | 816 | ||
| 5854 | 13년 전 | 1007 | ||
| 5853 | 13년 전 | 16106 | ||
| 5852 | 13년 전 | 824 | ||
| 5851 | 13년 전 | 2222 | ||
| 5850 | 13년 전 | 1773 | ||
| 5849 |
AMDbest
|
13년 전 | 1305 | |
| 5848 |
 직화오리팡야 |
13년 전 | 1164 | |
| 5847 |
SeanLee
|
13년 전 | 1304 | |
| 5846 | 13년 전 | 23465 | ||
| 5845 | 13년 전 | 2651 | ||
| 5844 | 13년 전 | 28806 | ||
| 5843 |
 카카오툴즈 |
13년 전 | 2207 | |
| 5842 | 13년 전 | 22518 | ||
| 5841 | 13년 전 | 5743 | ||
| 5840 |
Quincy
|
13년 전 | 933 | |
| 5839 | 13년 전 | 963 | ||
| 5838 | 13년 전 | 2820 | ||
| 5837 | 13년 전 | 1094 | ||
| 5836 | 13년 전 | 2313 | ||
| 5835 | 13년 전 | 1519 | ||
| 5834 | 13년 전 | 1501 | ||
| 5833 | 13년 전 | 6676 | ||
| 5832 | 13년 전 | 5213 | ||
| 5831 | 13년 전 | 1071 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기