링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 7230 | 11년 전 | 3595 | ||
| 7229 | 11년 전 | 3713 | ||
| 7228 | 11년 전 | 3776 | ||
| 7227 | 11년 전 | 3900 | ||
| 7226 | 11년 전 | 2358 | ||
| 7225 | 11년 전 | 17433 | ||
| 7224 |
AngryDev
|
11년 전 | 1335 | |
| 7223 |
돌아온깡통
|
11년 전 | 1082 | |
| 7222 |
돌아온깡통
|
11년 전 | 1020 | |
| 7221 |
돌아온깡통
|
11년 전 | 861 | |
| 7220 |
돌아온깡통
|
11년 전 | 982 | |
| 7219 |
돌아온깡통
|
11년 전 | 806 | |
| 7218 |
돌아온깡통
|
11년 전 | 651 | |
| 7217 |
돌아온깡통
|
11년 전 | 1039 | |
| 7216 |
돌아온깡통
|
11년 전 | 777 | |
| 7215 |
돌아온깡통
|
11년 전 | 695 | |
| 7214 |
돌아온깡통
|
11년 전 | 1034 | |
| 7213 |
돌아온깡통
|
11년 전 | 904 | |
| 7212 |
돌아온깡통
|
11년 전 | 693 | |
| 7211 |
돌아온깡통
|
11년 전 | 844 | |
| 7210 |
돌아온깡통
|
11년 전 | 867 | |
| 7209 |
돌아온깡통
|
11년 전 | 878 | |
| 7208 |
돌아온깡통
|
11년 전 | 976 | |
| 7207 |
돌아온깡통
|
11년 전 | 617 | |
| 7206 |
돌아온깡통
|
11년 전 | 664 | |
| 7205 |
돌아온깡통
|
11년 전 | 852 | |
| 7204 |
돌아온깡통
|
11년 전 | 706 | |
| 7203 |
돌아온깡통
|
11년 전 | 735 | |
| 7202 |
돌아온깡통
|
11년 전 | 697 | |
| 7201 |
돌아온깡통
|
11년 전 | 630 | |
| 7200 |
돌아온깡통
|
11년 전 | 692 | |
| 7199 |
돌아온깡통
|
11년 전 | 1305 | |
| 7198 |
돌아온깡통
|
11년 전 | 638 | |
| 7197 |
돌아온깡통
|
11년 전 | 951 | |
| 7196 |
돌아온깡통
|
11년 전 | 839 | |
| 7195 |
돌아온깡통
|
11년 전 | 585 | |
| 7194 |
돌아온깡통
|
11년 전 | 613 | |
| 7193 |
돌아온깡통
|
11년 전 | 688 | |
| 7192 |
돌아온깡통
|
11년 전 | 703 | |
| 7191 |
joe031
|
11년 전 | 1240 | |
| 7190 | 11년 전 | 4122 | ||
| 7189 | 11년 전 | 1194 | ||
| 7188 |
잘살아보자
|
11년 전 | 923 | |
| 7187 | 11년 전 | 1398 | ||
| 7186 |
kiplayer
|
11년 전 | 7521 | |
| 7185 | 11년 전 | 1108 | ||
| 7184 |
잘살아보자
|
11년 전 | 2320 | |
| 7183 |
잘살아보자
|
11년 전 | 1135 | |
| 7182 |
잘살아보자
|
11년 전 | 1187 | |
| 7181 | 11년 전 | 1468 | ||
| 7180 |
하얀비요일
|
11년 전 | 971 | |
| 7179 |
잘살아보자
|
11년 전 | 969 | |
| 7178 | 11년 전 | 974 | ||
| 7177 | 11년 전 | 983 | ||
| 7176 | 11년 전 | 1648 | ||
| 7175 |
 Terrorboy |
11년 전 | 1026 | |
| 7174 |
kiplayer
|
11년 전 | 1165 | |
| 7173 | 11년 전 | 950 | ||
| 7172 |
잘살아보자
|
11년 전 | 4627 | |
| 7171 |
잘살아보자
|
11년 전 | 681 | |
| 7170 | 11년 전 | 1060 | ||
| 7169 |
초심의설렘
|
11년 전 | 1458 | |
| 7168 | 11년 전 | 993 | ||
| 7167 |
잘살아보자
|
11년 전 | 5273 | |
| 7166 |
잘살아보자
|
11년 전 | 3396 | |
| 7165 | 11년 전 | 4943 | ||
| 7164 | 11년 전 | 816 | ||
| 7163 | 11년 전 | 1172 | ||
| 7162 |
울라라라우
|
11년 전 | 1358 | |
| 7161 | 11년 전 | 1239 | ||
| 7160 |
skyler
|
11년 전 | 1175 | |
| 7159 |
Terrorboy |
11년 전 | 665 | |
| 7158 |
 돼지코구뇽 |
11년 전 | 3328 | |
| 7157 |
잘살아보자
|
11년 전 | 2871 | |
| 7156 |
잘살아보자
|
11년 전 | 2211 | |
| 7155 |
잘살아보자
|
11년 전 | 1441 | |
| 7154 |
잘살아보자
|
11년 전 | 1443 | |
| 7153 | 11년 전 | 2865 | ||
| 7152 |
울라라라우
|
11년 전 | 813 | |
| 7151 | 11년 전 | 1038 | ||
| 7150 |
잘살아보자
|
11년 전 | 2375 | |
| 7149 |
잘살아보자
|
11년 전 | 3279 | |
| 7148 |
잘살아보자
|
11년 전 | 1175 | |
| 7147 |
잘살아보자
|
11년 전 | 746 | |
| 7146 |
잘살아보자
|
11년 전 | 1378 | |
| 7145 |
잘살아보자
|
11년 전 | 686 | |
| 7144 |
잘살아보자
|
11년 전 | 1265 | |
| 7143 |
잘살아보자
|
11년 전 | 734 | |
| 7142 |
잘살아보자
|
11년 전 | 1436 | |
| 7141 |
잘살아보자
|
11년 전 | 1185 | |
| 7140 |
잘살아보자
|
11년 전 | 1983 | |
| 7139 |
잘살아보자
|
11년 전 | 3649 | |
| 7138 |
잘살아보자
|
11년 전 | 3145 | |
| 7137 |
잘살아보자
|
11년 전 | 3616 | |
| 7136 |
잘살아보자
|
11년 전 | 1370 | |
| 7135 |
gooroo
|
11년 전 | 1598 | |
| 7134 |
열라뽕똬이
|
11년 전 | 2302 | |
| 7133 |
 카카오툴즈 |
11년 전 | 1009 | |
| 7132 | 11년 전 | 1423 | ||
| 7131 | 11년 전 | 3557 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기