링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6230 |
senseme
|
12년 전 | 1058 | |
| 6229 |
senseme
|
12년 전 | 1078 | |
| 6228 | 12년 전 | 4441 | ||
| 6227 |
senseme
|
12년 전 | 1496 | |
| 6226 |
senseme
|
12년 전 | 1644 | |
| 6225 | 12년 전 | 5500 | ||
| 6224 | 12년 전 | 3271 | ||
| 6223 |
kiplayer
|
12년 전 | 2141 | |
| 6222 | 12년 전 | 1302 | ||
| 6221 | 12년 전 | 3492 | ||
| 6220 | 12년 전 | 2517 | ||
| 6219 | 12년 전 | 2230 | ||
| 6218 |
senseme
|
12년 전 | 1843 | |
| 6217 |
senseme
|
12년 전 | 1533 | |
| 6216 |
senseme
|
12년 전 | 1529 | |
| 6215 |
senseme
|
12년 전 | 1283 | |
| 6214 | 12년 전 | 2398 | ||
| 6213 |
senseme
|
12년 전 | 1671 | |
| 6212 |
senseme
|
12년 전 | 1347 | |
| 6211 |
senseme
|
12년 전 | 2435 | |
| 6210 |
senseme
|
12년 전 | 1617 | |
| 6209 | 12년 전 | 2220 | ||
| 6208 | 12년 전 | 3446 | ||
| 6207 | 12년 전 | 1227 | ||
| 6206 |
senseme
|
12년 전 | 2197 | |
| 6205 | 12년 전 | 1041 | ||
| 6204 |
kiplayer
|
12년 전 | 1528 | |
| 6203 |
senseme
|
12년 전 | 2129 | |
| 6202 |
senseme
|
12년 전 | 1755 | |
| 6201 |
senseme
|
12년 전 | 4570 | |
| 6200 |
senseme
|
12년 전 | 2670 | |
| 6199 |
senseme
|
12년 전 | 2833 | |
| 6198 |
senseme
|
12년 전 | 1240 | |
| 6197 |
senseme
|
12년 전 | 8557 | |
| 6196 |
senseme
|
12년 전 | 3346 | |
| 6195 | 12년 전 | 1435 | ||
| 6194 |
 스위치79 |
12년 전 | 1291 | |
| 6193 |
senseme
|
12년 전 | 2694 | |
| 6192 |
senseme
|
12년 전 | 5366 | |
| 6191 |
senseme
|
12년 전 | 3417 | |
| 6190 | 12년 전 | 1344 | ||
| 6189 | 12년 전 | 13501 | ||
| 6188 |
웹디자인되고파
|
12년 전 | 1208 | |
| 6187 | 12년 전 | 627 | ||
| 6186 | 12년 전 | 3936 | ||
| 6185 | 12년 전 | 1473 | ||
| 6184 | 12년 전 | 9384 | ||
| 6183 | 12년 전 | 796 | ||
| 6182 |
senseme
|
12년 전 | 1240 | |
| 6181 |
senseme
|
12년 전 | 3227 | |
| 6180 |
senseme
|
12년 전 | 855 | |
| 6179 |
senseme
|
12년 전 | 1767 | |
| 6178 | 12년 전 | 3632 | ||
| 6177 | 12년 전 | 1064 | ||
| 6176 | 12년 전 | 956 | ||
| 6175 |
senseme
|
12년 전 | 5303 | |
| 6174 |
senseme
|
12년 전 | 1429 | |
| 6173 |
senseme
|
12년 전 | 752 | |
| 6172 |
senseme
|
12년 전 | 2742 | |
| 6171 |
senseme
|
12년 전 | 2490 | |
| 6170 |
senseme
|
12년 전 | 1506 | |
| 6169 |
senseme
|
12년 전 | 2931 | |
| 6168 |
senseme
|
12년 전 | 6536 | |
| 6167 | 12년 전 | 2140 | ||
| 6166 | 12년 전 | 747 | ||
| 6165 |
페이지팩트
|
12년 전 | 1908 | |
| 6164 |
네오soft
|
12년 전 | 1859 | |
| 6163 |
 엘남매아빠 |
12년 전 | 2606 | |
| 6162 | 12년 전 | 592 | ||
| 6161 |
엘남매아빠 |
12년 전 | 1694 | |
| 6160 | 12년 전 | 770 | ||
| 6159 | 12년 전 | 1777 | ||
| 6158 |
스위치79 |
12년 전 | 2682 | |
| 6157 |
sa2pan
|
12년 전 | 1246 | |
| 6156 | 12년 전 | 3893 | ||
| 6155 | 12년 전 | 9968 | ||
| 6154 | 12년 전 | 1126 | ||
| 6153 | 12년 전 | 2454 | ||
| 6152 |
생각보다몸이앞서다
|
12년 전 | 2126 | |
| 6151 | 12년 전 | 2977 | ||
| 6150 |
kiplayer
|
12년 전 | 6008 | |
| 6149 |
스위치79 |
12년 전 | 2648 | |
| 6148 | 12년 전 | 2972 | ||
| 6147 |
hwang007
|
12년 전 | 953 | |
| 6146 |
aqqasdf
|
12년 전 | 770 | |
| 6145 | 12년 전 | 1863 | ||
| 6144 | 12년 전 | 5879 | ||
| 6143 |
smwkd
|
12년 전 | 1464 | |
| 6142 | 12년 전 | 4703 | ||
| 6141 | 12년 전 | 930 | ||
| 6140 | 12년 전 | 4098 | ||
| 6139 | 12년 전 | 1242 | ||
| 6138 | 12년 전 | 1097 | ||
| 6137 |
SugarSkull
|
12년 전 | 1681 | |
| 6136 | 12년 전 | 1310 | ||
| 6135 |
한번잘해보자
|
12년 전 | 562 | |
| 6134 |
프리랜서개발자
|
12년 전 | 539 | |
| 6133 |
basaria
|
12년 전 | 20444 | |
| 6132 | 12년 전 | 508 | ||
| 6131 | 12년 전 | 1086 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기