링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 4930 | 13년 전 | 669 | ||
| 4929 | 13년 전 | 2025 | ||
| 4928 | 13년 전 | 638 | ||
| 4927 |
 캐네스제롬 |
13년 전 | 795 | |
| 4926 | 13년 전 | 1119 | ||
| 4925 |
techer
|
13년 전 | 1279 | |
| 4924 |
techer
|
13년 전 | 2891 | |
| 4923 |
techer
|
13년 전 | 3111 | |
| 4922 | 13년 전 | 604 | ||
| 4921 | 13년 전 | 1104 | ||
| 4920 |
StyleRoot
|
13년 전 | 585 | |
| 4919 | 13년 전 | 1164 | ||
| 4918 |
onlymilk74
|
13년 전 | 944 | |
| 4917 |
하나데이타
|
13년 전 | 831 | |
| 4916 |
하나데이타
|
13년 전 | 1158 | |
| 4915 | 13년 전 | 435 | ||
| 4914 | 13년 전 | 1831 | ||
| 4913 | 13년 전 | 1567 | ||
| 4912 | 13년 전 | 1301 | ||
| 4911 | 13년 전 | 747 | ||
| 4910 | 13년 전 | 1221 | ||
| 4909 |
성민꼬르꼬
|
13년 전 | 1450 | |
| 4908 | 13년 전 | 1045 | ||
| 4907 | 13년 전 | 2231 | ||
| 4906 | 13년 전 | 891 | ||
| 4905 |
kinyenug1
|
13년 전 | 610 | |
| 4904 |
kinyenug1
|
13년 전 | 786 | |
| 4903 | 13년 전 | 3593 | ||
| 4902 | 13년 전 | 2468 | ||
| 4901 | 13년 전 | 1025 | ||
| 4900 | 13년 전 | 1195 | ||
| 4899 | 13년 전 | 2595 | ||
| 4898 | 13년 전 | 1590 | ||
| 4897 |
다케미카코
|
13년 전 | 756 | |
| 4896 |
안뇽하어영
|
13년 전 | 816 | |
| 4895 |
baek83
|
13년 전 | 2212 | |
| 4894 | 13년 전 | 697 | ||
| 4893 | 13년 전 | 945 | ||
| 4892 | 13년 전 | 444 | ||
| 4891 | 13년 전 | 598 | ||
| 4890 | 13년 전 | 1342 | ||
| 4889 |
Black
|
13년 전 | 2883 | |
| 4888 |
techer
|
13년 전 | 639 | |
| 4887 |
techer
|
13년 전 | 906 | |
| 4886 |
visualp
|
13년 전 | 1300 | |
| 4885 | 13년 전 | 704 | ||
| 4884 |
너는나의봄이다
|
13년 전 | 2321 | |
| 4883 | 13년 전 | 923 | ||
| 4882 | 13년 전 | 1602 | ||
| 4881 | 13년 전 | 1847 | ||
| 4880 | 13년 전 | 1655 | ||
| 4879 | 13년 전 | 966 | ||
| 4878 |
 iwebstory |
13년 전 | 1265 | |
| 4877 | 13년 전 | 770 | ||
| 4876 |
꿈을꾸는너구리
|
13년 전 | 633 | |
| 4875 |
성민꼬르꼬
|
13년 전 | 1291 | |
| 4874 | 13년 전 | 981 | ||
| 4873 | 13년 전 | 835 | ||
| 4872 | 13년 전 | 755 | ||
| 4871 | 13년 전 | 918 | ||
| 4870 | 13년 전 | 707 | ||
| 4869 | 13년 전 | 1226 | ||
| 4868 | 13년 전 | 934 | ||
| 4867 | 13년 전 | 629 | ||
| 4866 | 13년 전 | 1239 | ||
| 4865 | 13년 전 | 876 | ||
| 4864 |
기획자정군
|
13년 전 | 1616 | |
| 4863 |
꼬꼬아부지
|
13년 전 | 1040 | |
| 4862 | 13년 전 | 3513 | ||
| 4861 |
 와우맨OLD |
13년 전 | 1573 | |
| 4860 |
 cshop |
13년 전 | 2167 | |
| 4859 | 13년 전 | 790 | ||
| 4858 | 13년 전 | 443 | ||
| 4857 | 13년 전 | 1122 | ||
| 4856 |
크라운엠버서더
|
13년 전 | 1923 | |
| 4855 | 13년 전 | 831 | ||
| 4854 | 13년 전 | 2048 | ||
| 4853 | 13년 전 | 745 | ||
| 4852 | 13년 전 | 1092 | ||
| 4851 |
꼬꼬아부지
|
13년 전 | 1801 | |
| 4850 | 13년 전 | 1114 | ||
| 4849 |
 아지야학교가자 |
13년 전 | 780 | |
| 4848 | 13년 전 | 1474 | ||
| 4847 |
 똥싼너구리 |
13년 전 | 3792 | |
| 4846 | 13년 전 | 518 | ||
| 4845 | 13년 전 | 586 | ||
| 4844 | 13년 전 | 768 | ||
| 4843 | 13년 전 | 3914 | ||
| 4842 | 13년 전 | 1256 | ||
| 4841 | 13년 전 | 1428 | ||
| 4840 | 13년 전 | 1437 | ||
| 4839 | 13년 전 | 744 | ||
| 4838 | 13년 전 | 621 | ||
| 4837 | 13년 전 | 769 | ||
| 4836 |
TIAMO
|
13년 전 | 1582 | |
| 4835 | 13년 전 | 949 | ||
| 4834 | 13년 전 | 1283 | ||
| 4833 | 13년 전 | 2482 | ||
| 4832 |
cshop |
13년 전 | 945 | |
| 4831 | 13년 전 | 1260 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기