링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6530 |
퍼블리셔강
|
12년 전 | 646 | |
| 6529 | 12년 전 | 1300 | ||
| 6528 | 12년 전 | 620 | ||
| 6527 | 12년 전 | 789 | ||
| 6526 | 12년 전 | 6579 | ||
| 6525 | 12년 전 | 548 | ||
| 6524 | 12년 전 | 837 | ||
| 6523 | 12년 전 | 486 | ||
| 6522 | 12년 전 | 534 | ||
| 6521 | 12년 전 | 797 | ||
| 6520 | 12년 전 | 738 | ||
| 6519 | 12년 전 | 1742 | ||
| 6518 |
가슴시린하늘
|
12년 전 | 1723 | |
| 6517 | 12년 전 | 1362 | ||
| 6516 | 12년 전 | 5225 | ||
| 6515 | 12년 전 | 1494 | ||
| 6514 | 12년 전 | 1596 | ||
| 6513 | 12년 전 | 953 | ||
| 6512 | 12년 전 | 1978 | ||
| 6511 | 12년 전 | 1368 | ||
| 6510 | 12년 전 | 3058 | ||
| 6509 |
프로프리랜서
|
12년 전 | 2547 | |
| 6508 |
프로프리랜서
|
12년 전 | 1897 | |
| 6507 |
프로프리랜서
|
12년 전 | 2373 | |
| 6506 |
프로프리랜서
|
12년 전 | 1854 | |
| 6505 |
프로프리랜서
|
12년 전 | 1631 | |
| 6504 | 12년 전 | 1025 | ||
| 6503 | 12년 전 | 1127 | ||
| 6502 |
프로프리랜서
|
12년 전 | 5554 | |
| 6501 |
프로프리랜서
|
12년 전 | 2599 | |
| 6500 |
프로프리랜서
|
12년 전 | 3082 | |
| 6499 |
프로프리랜서
|
12년 전 | 1750 | |
| 6498 |
프로프리랜서
|
12년 전 | 1462 | |
| 6497 | 12년 전 | 806 | ||
| 6496 |
yunkiri486
|
12년 전 | 1807 | |
| 6495 | 12년 전 | 917 | ||
| 6494 | 12년 전 | 1491 | ||
| 6493 | 12년 전 | 2762 | ||
| 6492 |
오늘도망했다
|
12년 전 | 2337 | |
| 6491 |
오늘도망했다
|
12년 전 | 1677 | |
| 6490 |
오늘도망했다
|
12년 전 | 6658 | |
| 6489 |
오늘도망했다
|
12년 전 | 2494 | |
| 6488 |
홈피119
|
12년 전 | 697 | |
| 6487 | 12년 전 | 669 | ||
| 6486 | 12년 전 | 1407 | ||
| 6485 | 12년 전 | 2049 | ||
| 6484 | 12년 전 | 896 | ||
| 6483 | 12년 전 | 715 | ||
| 6482 | 12년 전 | 1339 | ||
| 6481 | 12년 전 | 1468 | ||
| 6480 |
Header
|
12년 전 | 688 | |
| 6479 |
 grapedw |
12년 전 | 1124 | |
| 6478 |
개초보제이
|
12년 전 | 1393 | |
| 6477 | 12년 전 | 791 | ||
| 6476 | 12년 전 | 1073 | ||
| 6475 | 12년 전 | 3678 | ||
| 6474 | 12년 전 | 1420 | ||
| 6473 | 12년 전 | 961 | ||
| 6472 | 12년 전 | 848 | ||
| 6471 |
AMDbest
|
12년 전 | 1203 | |
| 6470 |
jinmuk
|
12년 전 | 1443 | |
| 6469 |
jinmuk
|
12년 전 | 4249 | |
| 6468 |
jinmuk
|
12년 전 | 5574 | |
| 6467 | 12년 전 | 695 | ||
| 6466 |
jinmuk
|
12년 전 | 2269 | |
| 6465 |
jinmuk
|
12년 전 | 6732 | |
| 6464 |
jinmuk
|
12년 전 | 2407 | |
| 6463 |
jinmuk
|
12년 전 | 9330 | |
| 6462 |
희망과열정
|
12년 전 | 531 | |
| 6461 |
Header
|
12년 전 | 722 | |
| 6460 |
희망과열정
|
12년 전 | 1350 | |
| 6459 |
프리랜서개발자
|
12년 전 | 1675 | |
| 6458 | 12년 전 | 1334 | ||
| 6457 |
jinmuk
|
12년 전 | 1939 | |
| 6456 |
jinmuk
|
12년 전 | 2346 | |
| 6455 |
jinmuk
|
12년 전 | 3202 | |
| 6454 |
jinmuk
|
12년 전 | 2172 | |
| 6453 |
jinmuk
|
12년 전 | 2349 | |
| 6452 |
jinmuk
|
12년 전 | 2314 | |
| 6451 |
jinmuk
|
12년 전 | 1597 | |
| 6450 |
jinmuk
|
12년 전 | 1396 | |
| 6449 |
jinmuk
|
12년 전 | 1038 | |
| 6448 |
jinmuk
|
12년 전 | 1238 | |
| 6447 |
jinmuk
|
12년 전 | 2006 | |
| 6446 |
jinmuk
|
12년 전 | 1563 | |
| 6445 |
jinmuk
|
12년 전 | 1263 | |
| 6444 |
jinmuk
|
12년 전 | 2305 | |
| 6443 |
jinmuk
|
12년 전 | 2044 | |
| 6442 |
jinmuk
|
12년 전 | 1883 | |
| 6441 |
jinmuk
|
12년 전 | 1616 | |
| 6440 |
jinmuk
|
12년 전 | 2315 | |
| 6439 |
jinmuk
|
12년 전 | 1134 | |
| 6438 |
wndProc
|
12년 전 | 775 | |
| 6437 | 12년 전 | 393 | ||
| 6436 |
senseme
|
12년 전 | 542 | |
| 6435 | 12년 전 | 1045 | ||
| 6434 | 12년 전 | 2474 | ||
| 6433 | 12년 전 | 2480 | ||
| 6432 | 12년 전 | 1557 | ||
| 6431 |
밥먹고합시다
|
12년 전 | 1190 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기