링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6130 |
gender
|
12년 전 | 1093 | |
| 6129 | 12년 전 | 1322 | ||
| 6128 |
 미스티아이드 |
12년 전 | 3462 | |
| 6127 | 12년 전 | 695 | ||
| 6126 |
미스티아이드 |
12년 전 | 2208 | |
| 6125 |
 라이브러리 |
12년 전 | 4885 | |
| 6124 | 12년 전 | 661 | ||
| 6123 | 12년 전 | 3843 | ||
| 6122 | 12년 전 | 1018 | ||
| 6121 | 12년 전 | 3751 | ||
| 6120 | 12년 전 | 908 | ||
| 6119 | 12년 전 | 1770 | ||
| 6118 | 12년 전 | 929 | ||
| 6117 | 12년 전 | 2149 | ||
| 6116 | 12년 전 | 7942 | ||
| 6115 | 12년 전 | 1920 | ||
| 6114 |
 Faceissue |
12년 전 | 1705 | |
| 6113 | 12년 전 | 1524 | ||
| 6112 | 12년 전 | 594 | ||
| 6111 | 12년 전 | 2111 | ||
| 6110 | 12년 전 | 1850 | ||
| 6109 | 12년 전 | 640 | ||
| 6108 | 12년 전 | 1198 | ||
| 6107 | 12년 전 | 624 | ||
| 6106 | 12년 전 | 906 | ||
| 6105 | 12년 전 | 1192 | ||
| 6104 | 12년 전 | 3595 | ||
| 6103 | 12년 전 | 2122 | ||
| 6102 | 12년 전 | 2315 | ||
| 6101 | 12년 전 | 3677 | ||
| 6100 | 12년 전 | 3483 | ||
| 6099 | 12년 전 | 3154 | ||
| 6098 | 12년 전 | 4025 | ||
| 6097 | 12년 전 | 1016 | ||
| 6096 | 12년 전 | 5983 | ||
| 6095 | 12년 전 | 1370 | ||
| 6094 | 12년 전 | 1225 | ||
| 6093 | 12년 전 | 3407 | ||
| 6092 | 12년 전 | 3053 | ||
| 6091 | 12년 전 | 5195 | ||
| 6090 | 12년 전 | 2704 | ||
| 6089 | 12년 전 | 3326 | ||
| 6088 | 12년 전 | 1016 | ||
| 6087 | 12년 전 | 847 | ||
| 6086 | 12년 전 | 2018 | ||
| 6085 |
 늘푸른등불 |
12년 전 | 806 | |
| 6084 |
웹디자인되고파
|
12년 전 | 2216 | |
| 6083 | 12년 전 | 1508 | ||
| 6082 | 12년 전 | 1111 | ||
| 6081 | 12년 전 | 2099 | ||
| 6080 |
Stiven
|
12년 전 | 2312 | |
| 6079 |
프로프리랜서
|
12년 전 | 1319 | |
| 6078 |
프로프리랜서
|
12년 전 | 787 | |
| 6077 |
프로프리랜서
|
12년 전 | 1344 | |
| 6076 |
프로프리랜서
|
12년 전 | 830 | |
| 6075 |
프로프리랜서
|
12년 전 | 1223 | |
| 6074 | 12년 전 | 3855 | ||
| 6073 | 12년 전 | 3949 | ||
| 6072 | 12년 전 | 1376 | ||
| 6071 | 12년 전 | 6992 | ||
| 6070 | 12년 전 | 7574 | ||
| 6069 | 12년 전 | 2320 | ||
| 6068 | 12년 전 | 3868 | ||
| 6067 |
smwkd
|
12년 전 | 632 | |
| 6066 | 12년 전 | 3656 | ||
| 6065 | 12년 전 | 3486 | ||
| 6064 | 12년 전 | 2720 | ||
| 6063 | 12년 전 | 2840 | ||
| 6062 | 12년 전 | 2372 | ||
| 6061 | 12년 전 | 2278 | ||
| 6060 | 12년 전 | 5184 | ||
| 6059 | 12년 전 | 2815 | ||
| 6058 | 12년 전 | 3135 | ||
| 6057 | 12년 전 | 2262 | ||
| 6056 | 12년 전 | 6842 | ||
| 6055 | 12년 전 | 2581 | ||
| 6054 | 12년 전 | 3435 | ||
| 6053 | 12년 전 | 2328 | ||
| 6052 | 12년 전 | 4820 | ||
| 6051 | 12년 전 | 3712 | ||
| 6050 | 12년 전 | 2555 | ||
| 6049 | 12년 전 | 2245 | ||
| 6048 |
 Rockg |
12년 전 | 1298 | |
| 6047 | 12년 전 | 3441 | ||
| 6046 | 12년 전 | 4095 | ||
| 6045 | 12년 전 | 3456 | ||
| 6044 | 12년 전 | 5331 | ||
| 6043 | 12년 전 | 1651 | ||
| 6042 | 12년 전 | 1282 | ||
| 6041 | 12년 전 | 5165 | ||
| 6040 | 12년 전 | 939 | ||
| 6039 | 12년 전 | 3412 | ||
| 6038 | 12년 전 | 3413 | ||
| 6037 | 12년 전 | 2993 | ||
| 6036 | 12년 전 | 3341 | ||
| 6035 | 12년 전 | 2867 | ||
| 6034 | 12년 전 | 2845 | ||
| 6033 | 12년 전 | 2867 | ||
| 6032 | 12년 전 | 2854 | ||
| 6031 | 12년 전 | 2880 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기