링크
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 | 13년 전 | 4643 | ||
| 5929 | 13년 전 | 7840 | ||
| 5928 | 13년 전 | 791 | ||
| 5927 | 13년 전 | 1418 | ||
| 5926 | 13년 전 | 1836 | ||
| 5925 |
김준수사랑
|
13년 전 | 1250 | |
| 5924 |
 darllim |
13년 전 | 2761 | |
| 5923 | 13년 전 | 961 | ||
| 5922 | 13년 전 | 1169 | ||
| 5921 | 13년 전 | 659 | ||
| 5920 | 13년 전 | 1181 | ||
| 5919 |
 슬픈외로움 |
13년 전 | 1376 | |
| 5918 | 13년 전 | 12591 | ||
| 5917 |
프로프리랜서
|
13년 전 | 1100 | |
| 5916 |
프로프리랜서
|
13년 전 | 4631 | |
| 5915 |
프로프리랜서
|
13년 전 | 1609 | |
| 5914 |
프로프리랜서
|
13년 전 | 654 | |
| 5913 |
프로프리랜서
|
13년 전 | 938 | |
| 5912 |
프로프리랜서
|
13년 전 | 3747 | |
| 5911 |
프로프리랜서
|
13년 전 | 927 | |
| 5910 |
 돼지코구뇽 |
13년 전 | 4584 | |
| 5909 |
수야3019
|
13년 전 | 675 | |
| 5908 | 13년 전 | 835 | ||
| 5907 | 13년 전 | 1233 | ||
| 5906 | 13년 전 | 8757 | ||
| 5905 |
프로프리랜서
|
13년 전 | 1474 | |
| 5904 | 13년 전 | 2498 | ||
| 5903 | 13년 전 | 1652 | ||
| 5902 | 13년 전 | 1929 | ||
| 5901 | 13년 전 | 2018 | ||
| 5900 |
프로프리랜서
|
13년 전 | 1092 | |
| 5899 |
프로프리랜서
|
13년 전 | 1281 | |
| 5898 | 13년 전 | 17678 | ||
| 5897 | 13년 전 | 2337 | ||
| 5896 | 13년 전 | 4363 | ||
| 5895 | 13년 전 | 1692 | ||
| 5894 | 13년 전 | 2103 | ||
| 5893 |
프로프리랜서
|
13년 전 | 2162 | |
| 5892 | 13년 전 | 16041 | ||
| 5891 |
bitmaster
|
13년 전 | 1081 | |
| 5890 |
프로프리랜서
|
13년 전 | 946 | |
| 5889 |
 AKASIA |
13년 전 | 725 | |
| 5888 | 13년 전 | 1618 | ||
| 5887 |
 ppogul |
13년 전 | 3199 | |
| 5886 | 13년 전 | 3449 | ||
| 5885 | 13년 전 | 2110 | ||
| 5884 | 13년 전 | 5653 | ||
| 5883 | 13년 전 | 2822 | ||
| 5882 | 13년 전 | 6030 | ||
| 5881 | 13년 전 | 1638 | ||
| 5880 | 13년 전 | 20719 | ||
| 5879 | 13년 전 | 911 | ||
| 5878 |
나의라임토마토
|
13년 전 | 1410 | |
| 5877 | 13년 전 | 16778 | ||
| 5876 |
maniAc
|
13년 전 | 2806 | |
| 5875 | 13년 전 | 1039 | ||
| 5874 | 13년 전 | 3735 | ||
| 5873 |
lainfox
|
13년 전 | 1185 | |
| 5872 | 13년 전 | 1348 | ||
| 5871 | 13년 전 | 798 | ||
| 5870 | 13년 전 | 2529 | ||
| 5869 |
AMDbest
|
13년 전 | 1514 | |
| 5868 |
한번잘해보자
|
13년 전 | 662 | |
| 5867 |
 byfun |
13년 전 | 920 | |
| 5866 | 13년 전 | 7494 | ||
| 5865 | 13년 전 | 2408 | ||
| 5864 | 13년 전 | 939 | ||
| 5863 | 13년 전 | 1311 | ||
| 5862 | 13년 전 | 2877 | ||
| 5861 | 13년 전 | 1030 | ||
| 5860 | 13년 전 | 19331 | ||
| 5859 | 13년 전 | 2945 | ||
| 5858 | 13년 전 | 2653 | ||
| 5857 | 13년 전 | 4828 | ||
| 5856 |
ppogul |
13년 전 | 1953 | |
| 5855 | 13년 전 | 819 | ||
| 5854 | 13년 전 | 1010 | ||
| 5853 | 13년 전 | 16110 | ||
| 5852 | 13년 전 | 826 | ||
| 5851 | 13년 전 | 2223 | ||
| 5850 | 13년 전 | 1775 | ||
| 5849 |
AMDbest
|
13년 전 | 1309 | |
| 5848 |
 직화오리팡야 |
13년 전 | 1166 | |
| 5847 |
SeanLee
|
13년 전 | 1306 | |
| 5846 | 13년 전 | 23468 | ||
| 5845 | 13년 전 | 2656 | ||
| 5844 | 13년 전 | 28811 | ||
| 5843 |
 카카오툴즈 |
13년 전 | 2209 | |
| 5842 | 13년 전 | 22526 | ||
| 5841 | 13년 전 | 5746 | ||
| 5840 |
Quincy
|
13년 전 | 937 | |
| 5839 | 13년 전 | 968 | ||
| 5838 | 13년 전 | 2822 | ||
| 5837 | 13년 전 | 1099 | ||
| 5836 | 13년 전 | 2319 | ||
| 5835 | 13년 전 | 1522 | ||
| 5834 | 13년 전 | 1507 | ||
| 5833 | 13년 전 | 6678 | ||
| 5832 | 13년 전 | 5214 | ||
| 5831 | 13년 전 | 1071 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기