링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5430 | 13년 전 | 1466 | ||
| 5429 |
phpman
|
13년 전 | 877 | |
| 5428 | 13년 전 | 1263 | ||
| 5427 |
phpman
|
13년 전 | 860 | |
| 5426 |
PHPㅡASP프로그래머
|
13년 전 | 1095 | |
| 5425 | 13년 전 | 803 | ||
| 5424 | 13년 전 | 746 | ||
| 5423 | 13년 전 | 749 | ||
| 5422 | 13년 전 | 1846 | ||
| 5421 |
PHPㅡASP프로그래머
|
13년 전 | 812 | |
| 5420 |
 Jeco7 |
13년 전 | 1641 | |
| 5419 | 13년 전 | 833 | ||
| 5418 | 13년 전 | 718 | ||
| 5417 | 13년 전 | 642 | ||
| 5416 | 13년 전 | 1003 | ||
| 5415 | 13년 전 | 794 | ||
| 5414 | 13년 전 | 741 | ||
| 5413 | 13년 전 | 821 | ||
| 5412 | 13년 전 | 1388 | ||
| 5411 | 13년 전 | 900 | ||
| 5410 | 13년 전 | 1298 | ||
| 5409 | 13년 전 | 4287 | ||
| 5408 | 13년 전 | 1008 | ||
| 5407 |
ckflower
|
13년 전 | 2455 | |
| 5406 |
ddokkani
|
13년 전 | 1407 | |
| 5405 | 13년 전 | 1611 | ||
| 5404 | 13년 전 | 687 | ||
| 5403 | 13년 전 | 722 | ||
| 5402 |
밤거리빵빵
|
13년 전 | 6036 | |
| 5401 |
PHPㅡASP프로그래머
|
13년 전 | 993 | |
| 5400 |
 cshop |
13년 전 | 1227 | |
| 5399 | 13년 전 | 5024 | ||
| 5398 |
부산아무개
|
13년 전 | 1674 | |
| 5397 | 13년 전 | 2472 | ||
| 5396 | 13년 전 | 1861 | ||
| 5395 | 13년 전 | 1070 | ||
| 5394 | 13년 전 | 1155 | ||
| 5393 | 13년 전 | 1060 | ||
| 5392 |
아르toria
|
13년 전 | 782 | |
| 5391 |
 아지야학교가자 |
13년 전 | 1161 | |
| 5390 |
디지털홍익인간
|
13년 전 | 7729 | |
| 5389 | 13년 전 | 3127 | ||
| 5388 | 13년 전 | 886 | ||
| 5387 |
WaaNee
|
13년 전 | 1924 | |
| 5386 | 13년 전 | 2119 | ||
| 5385 | 13년 전 | 4640 | ||
| 5384 | 13년 전 | 959 | ||
| 5383 | 13년 전 | 2150 | ||
| 5382 | 13년 전 | 683 | ||
| 5381 |
JacobJeon
|
13년 전 | 1099 | |
| 5380 | 13년 전 | 1153 | ||
| 5379 | 13년 전 | 692 | ||
| 5378 | 13년 전 | 10487 | ||
| 5377 | 13년 전 | 888 | ||
| 5376 | 13년 전 | 1474 | ||
| 5375 | 13년 전 | 852 | ||
| 5374 | 13년 전 | 858 | ||
| 5373 | 13년 전 | 2073 | ||
| 5372 | 13년 전 | 1703 | ||
| 5371 |
cshop |
13년 전 | 1651 | |
| 5370 | 13년 전 | 2919 | ||
| 5369 |
아자12345
|
13년 전 | 1028 | |
| 5368 | 13년 전 | 722 | ||
| 5367 | 13년 전 | 1100 | ||
| 5366 | 13년 전 | 2162 | ||
| 5365 | 13년 전 | 1577 | ||
| 5364 | 13년 전 | 1108 | ||
| 5363 |
cshop |
13년 전 | 1384 | |
| 5362 | 13년 전 | 845 | ||
| 5361 | 13년 전 | 1415 | ||
| 5360 | 13년 전 | 781 | ||
| 5359 | 13년 전 | 1416 | ||
| 5358 | 13년 전 | 1251 | ||
| 5357 | 13년 전 | 1649 | ||
| 5356 | 13년 전 | 1137 | ||
| 5355 |
techer
|
13년 전 | 1385 | |
| 5354 |
 몽키D팡야 |
13년 전 | 1040 | |
| 5353 | 13년 전 | 763 | ||
| 5352 | 13년 전 | 853 | ||
| 5351 | 13년 전 | 1225 | ||
| 5350 | 13년 전 | 761 | ||
| 5349 |
cshop |
13년 전 | 1450 | |
| 5348 | 13년 전 | 855 | ||
| 5347 | 13년 전 | 760 | ||
| 5346 | 13년 전 | 884 | ||
| 5345 | 13년 전 | 822 | ||
| 5344 |
후라보노보노
|
13년 전 | 1961 | |
| 5343 | 13년 전 | 1166 | ||
| 5342 | 13년 전 | 1134 | ||
| 5341 | 13년 전 | 2078 | ||
| 5340 |
 미운오리스키 |
13년 전 | 1122 | |
| 5339 |
AMDbest
|
13년 전 | 745 | |
| 5338 | 13년 전 | 741 | ||
| 5337 |
프로프리랜서
|
13년 전 | 1490 | |
| 5336 |
프로프리랜서
|
13년 전 | 940 | |
| 5335 | 13년 전 | 736 | ||
| 5334 |
cshop |
13년 전 | 987 | |
| 5333 | 13년 전 | 2849 | ||
| 5332 | 13년 전 | 1536 | ||
| 5331 | 13년 전 | 1334 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기