링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5330 | 13년 전 | 775 | ||
| 5329 | 13년 전 | 711 | ||
| 5328 | 13년 전 | 643 | ||
| 5327 | 13년 전 | 886 | ||
| 5326 |
downmix
|
13년 전 | 1124 | |
| 5325 |
techer
|
13년 전 | 3150 | |
| 5324 |
techer
|
13년 전 | 979 | |
| 5323 | 13년 전 | 1190 | ||
| 5322 |
김준수사랑
|
13년 전 | 899 | |
| 5321 |
다케미카코
|
13년 전 | 760 | |
| 5320 |
 cshop |
13년 전 | 1001 | |
| 5319 |
한번잘해보자
|
13년 전 | 1016 | |
| 5318 |
cshop |
13년 전 | 1276 | |
| 5317 |
techer
|
13년 전 | 2707 | |
| 5316 |
techer
|
13년 전 | 3152 | |
| 5315 | 13년 전 | 1181 | ||
| 5314 |
티즈코리아
|
13년 전 | 1231 | |
| 5313 | 13년 전 | 712 | ||
| 5312 |
cshop |
13년 전 | 1878 | |
| 5311 |
innis
|
13년 전 | 775 | |
| 5310 | 13년 전 | 864 | ||
| 5309 |
changho
|
13년 전 | 663 | |
| 5308 |
 raineye |
13년 전 | 1368 | |
| 5307 |
cshop |
13년 전 | 805 | |
| 5306 | 13년 전 | 1189 | ||
| 5305 |
세상속으로
|
13년 전 | 1169 | |
| 5304 | 13년 전 | 675 | ||
| 5303 | 13년 전 | 2264 | ||
| 5302 | 13년 전 | 1400 | ||
| 5301 | 13년 전 | 1114 | ||
| 5300 |
프로프리랜서
|
13년 전 | 1093 | |
| 5299 | 13년 전 | 877 | ||
| 5298 | 13년 전 | 685 | ||
| 5297 |
나랑사귈래
|
13년 전 | 613 | |
| 5296 | 13년 전 | 1340 | ||
| 5295 | 13년 전 | 1121 | ||
| 5294 | 13년 전 | 733 | ||
| 5293 |
 Terrorboy |
13년 전 | 5826 | |
| 5292 |
cshop |
13년 전 | 794 | |
| 5291 | 13년 전 | 623 | ||
| 5290 | 13년 전 | 560 | ||
| 5289 | 13년 전 | 657 | ||
| 5288 | 13년 전 | 1174 | ||
| 5287 | 13년 전 | 767 | ||
| 5286 | 13년 전 | 980 | ||
| 5285 | 13년 전 | 1327 | ||
| 5284 |
미스홍당무
|
13년 전 | 864 | |
| 5283 |
basketball
|
13년 전 | 1767 | |
| 5282 | 13년 전 | 797 | ||
| 5281 |
 엘남매아빠 |
13년 전 | 812 | |
| 5280 | 13년 전 | 1220 | ||
| 5279 | 13년 전 | 1389 | ||
| 5278 |
크라이스트
|
13년 전 | 2055 | |
| 5277 |
 아지야학교가자 |
13년 전 | 734 | |
| 5276 |
그누보드환자이송
|
13년 전 | 792 | |
| 5275 | 13년 전 | 705 | ||
| 5274 | 13년 전 | 1378 | ||
| 5273 | 13년 전 | 2008 | ||
| 5272 | 13년 전 | 1122 | ||
| 5271 | 13년 전 | 1437 | ||
| 5270 | 13년 전 | 809 | ||
| 5269 | 13년 전 | 534 | ||
| 5268 | 13년 전 | 671 | ||
| 5267 | 13년 전 | 1194 | ||
| 5266 | 13년 전 | 1860 | ||
| 5265 | 13년 전 | 1631 | ||
| 5264 |
크라이스트
|
13년 전 | 1213 | |
| 5263 |
 홈피공장장 |
13년 전 | 1266 | |
| 5262 |
제이티37
|
13년 전 | 588 | |
| 5261 |
 스마트파인드 |
13년 전 | 786 | |
| 5260 |
quenya
|
13년 전 | 2076 | |
| 5259 | 13년 전 | 712 | ||
| 5258 | 13년 전 | 735 | ||
| 5257 |
크라이스트
|
13년 전 | 4600 | |
| 5256 | 13년 전 | 1259 | ||
| 5255 | 13년 전 | 3272 | ||
| 5254 |
 몽키D팡야 |
13년 전 | 714 | |
| 5253 | 13년 전 | 774 | ||
| 5252 | 13년 전 | 774 | ||
| 5251 | 13년 전 | 733 | ||
| 5250 |
dudn1114
|
13년 전 | 1294 | |
| 5249 | 13년 전 | 673 | ||
| 5248 | 13년 전 | 743 | ||
| 5247 | 13년 전 | 2086 | ||
| 5246 | 13년 전 | 512 | ||
| 5245 | 13년 전 | 2201 | ||
| 5244 | 13년 전 | 1464 | ||
| 5243 |
엘남매아빠 |
13년 전 | 976 | |
| 5242 | 13년 전 | 770 | ||
| 5241 | 13년 전 | 1853 | ||
| 5240 |
 TopSchooL |
13년 전 | 510 | |
| 5239 | 13년 전 | 1039 | ||
| 5238 | 13년 전 | 1227 | ||
| 5237 | 13년 전 | 1122 | ||
| 5236 | 13년 전 | 591 | ||
| 5235 |
스마트파인드 |
13년 전 | 771 | |
| 5234 |
뭐먹고살지ㅠ
|
13년 전 | 1033 | |
| 5233 | 13년 전 | 3599 | ||
| 5232 | 13년 전 | 3143 | ||
| 5231 | 13년 전 | 3732 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기