링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 5030 | 13년 전 | 784 | ||
| 5029 | 13년 전 | 465 | ||
| 5028 | 13년 전 | 728 | ||
| 5027 | 13년 전 | 1317 | ||
| 5026 | 13년 전 | 548 | ||
| 5025 | 13년 전 | 1369 | ||
| 5024 | 13년 전 | 422 | ||
| 5023 | 13년 전 | 662 | ||
| 5022 | 13년 전 | 425 | ||
| 5021 | 13년 전 | 664 | ||
| 5020 | 13년 전 | 514 | ||
| 5019 | 13년 전 | 857 | ||
| 5018 | 13년 전 | 906 | ||
| 5017 | 13년 전 | 781 | ||
| 5016 | 13년 전 | 2625 | ||
| 5015 | 13년 전 | 413 | ||
| 5014 | 13년 전 | 672 | ||
| 5013 | 13년 전 | 587 | ||
| 5012 |
JacobJeon
|
13년 전 | 1073 | |
| 5011 | 13년 전 | 805 | ||
| 5010 | 13년 전 | 1441 | ||
| 5009 |
JacobJeon
|
13년 전 | 1801 | |
| 5008 | 13년 전 | 1151 | ||
| 5007 | 13년 전 | 3012 | ||
| 5006 |
 몽키D팡야 |
13년 전 | 1307 | |
| 5005 | 13년 전 | 698 | ||
| 5004 | 13년 전 | 2105 | ||
| 5003 | 13년 전 | 2528 | ||
| 5002 | 13년 전 | 384 | ||
| 5001 | 13년 전 | 519 | ||
| 5000 | 13년 전 | 427 | ||
| 4999 | 13년 전 | 526 | ||
| 4998 | 13년 전 | 473 | ||
| 4997 | 13년 전 | 661 | ||
| 4996 | 13년 전 | 1919 | ||
| 4995 | 13년 전 | 393 | ||
| 4994 | 13년 전 | 382 | ||
| 4993 | 13년 전 | 528 | ||
| 4992 | 13년 전 | 503 | ||
| 4991 | 13년 전 | 388 | ||
| 4990 | 13년 전 | 710 | ||
| 4989 | 13년 전 | 653 | ||
| 4988 | 13년 전 | 400 | ||
| 4987 | 13년 전 | 422 | ||
| 4986 | 13년 전 | 1380 | ||
| 4985 | 13년 전 | 664 | ||
| 4984 | 13년 전 | 1046 | ||
| 4983 | 13년 전 | 413 | ||
| 4982 |
쥬드125
|
13년 전 | 1018 | |
| 4981 | 13년 전 | 548 | ||
| 4980 | 13년 전 | 418 | ||
| 4979 | 13년 전 | 694 | ||
| 4978 | 13년 전 | 2180 | ||
| 4977 |
atria
|
13년 전 | 863 | |
| 4976 | 13년 전 | 1531 | ||
| 4975 | 13년 전 | 439 | ||
| 4974 | 13년 전 | 467 | ||
| 4973 | 13년 전 | 703 | ||
| 4972 | 13년 전 | 461 | ||
| 4971 | 13년 전 | 1392 | ||
| 4970 | 13년 전 | 370 | ||
| 4969 | 13년 전 | 423 | ||
| 4968 | 13년 전 | 732 | ||
| 4967 | 13년 전 | 532 | ||
| 4966 | 13년 전 | 445 | ||
| 4965 | 13년 전 | 587 | ||
| 4964 | 13년 전 | 590 | ||
| 4963 | 13년 전 | 424 | ||
| 4962 | 13년 전 | 2249 | ||
| 4961 | 13년 전 | 1350 | ||
| 4960 | 13년 전 | 1231 | ||
| 4959 | 13년 전 | 427 | ||
| 4958 | 13년 전 | 382 | ||
| 4957 | 13년 전 | 472 | ||
| 4956 | 13년 전 | 702 | ||
| 4955 | 13년 전 | 494 | ||
| 4954 | 13년 전 | 1063 | ||
| 4953 | 13년 전 | 1158 | ||
| 4952 | 13년 전 | 750 | ||
| 4951 |
sjsmsrjfflauswnrsmse
|
13년 전 | 879 | |
| 4950 | 13년 전 | 1910 | ||
| 4949 | 13년 전 | 2220 | ||
| 4948 | 13년 전 | 5528 | ||
| 4947 | 13년 전 | 413 | ||
| 4946 | 13년 전 | 851 | ||
| 4945 | 13년 전 | 406 | ||
| 4944 | 13년 전 | 608 | ||
| 4943 |
마당쇠2000
|
13년 전 | 1256 | |
| 4942 |
cula100jak
|
13년 전 | 828 | |
| 4941 | 13년 전 | 474 | ||
| 4940 | 13년 전 | 573 | ||
| 4939 | 13년 전 | 416 | ||
| 4938 | 13년 전 | 567 | ||
| 4937 | 13년 전 | 1499 | ||
| 4936 |
techer
|
13년 전 | 1852 | |
| 4935 | 13년 전 | 723 | ||
| 4934 | 13년 전 | 959 | ||
| 4933 | 13년 전 | 2047 | ||
| 4932 |
kajama78
|
13년 전 | 962 | |
| 4931 | 13년 전 | 984 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기