링크
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년 전
좋은 정보 감사합니다.^^
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 330 |
prosper
|
20년 전 | 2285 | |
| 329 |
prosper
|
20년 전 | 1914 | |
| 328 |
prosper
|
20년 전 | 1708 | |
| 327 | 20년 전 | 3775 | ||
| 326 | 20년 전 | 4860 | ||
| 325 |
hwatta
|
20년 전 | 2491 | |
| 324 |
 hanpedro |
20년 전 | 3148 | |
| 323 | 20년 전 | 5871 | ||
| 322 |
hwatta
|
20년 전 | 2855 | |
| 321 |
hwatta
|
20년 전 | 2326 | |
| 320 |
yesmoa
|
20년 전 | 4578 | |
| 319 | 20년 전 | 2692 | ||
| 318 | 20년 전 | 2243 | ||
| 317 |
kyodon
|
20년 전 | 2765 | |
| 316 | 20년 전 | 2587 | ||
| 315 |
hanpedro |
20년 전 | 2889 | |
| 314 |
hanpedro |
20년 전 | 3346 | |
| 313 |
 damoa.biz |
20년 전 | 2652 | |
| 312 |
yesmoa
|
20년 전 | 4726 | |
| 311 | 20년 전 | 3284 | ||
| 310 |
홀로남은자
|
20년 전 | 4572 | |
| 309 | 20년 전 | 3010 | ||
| 308 | 20년 전 | 4142 | ||
| 307 | 20년 전 | 4377 | ||
| 306 | 20년 전 | 7040 | ||
| 305 | 20년 전 | 3873 | ||
| 304 | 20년 전 | 2775 | ||
| 303 |
크리스탈처럼
|
20년 전 | 4412 | |
| 302 | 20년 전 | 2211 | ||
| 301 |
 수다쟁이오도리씨 |
20년 전 | 4328 | |
| 300 | 20년 전 | 3814 | ||
| 299 | 20년 전 | 2629 | ||
| 298 | 20년 전 | 4840 | ||
| 297 |
 bbking |
20년 전 | 2532 | |
| 296 | 20년 전 | 4537 | ||
| 295 | 20년 전 | 3573 | ||
| 294 | 20년 전 | 3596 | ||
| 293 | 20년 전 | 3822 | ||
| 292 | 20년 전 | 3216 | ||
| 291 |
yesmoa
|
20년 전 | 5957 | |
| 290 | 20년 전 | 2942 | ||
| 289 | 20년 전 | 5866 | ||
| 288 |
bbking |
20년 전 | 2384 | |
| 287 |
bbking |
20년 전 | 1815 | |
| 286 |
bbking |
20년 전 | 2153 | |
| 285 |
bbking |
20년 전 | 3545 | |
| 284 |
bbking |
20년 전 | 2040 | |
| 283 |
bbking |
20년 전 | 4405 | |
| 282 | 20년 전 | 3383 | ||
| 281 |
bbking |
20년 전 | 2216 | |
| 280 |
bbking |
20년 전 | 7812 | |
| 279 | 20년 전 | 5562 | ||
| 278 | 20년 전 | 2999 | ||
| 277 |
hanpedro |
20년 전 | 5575 | |
| 276 | 20년 전 | 2363 | ||
| 275 | 20년 전 | 2618 | ||
| 274 | 20년 전 | 2402 | ||
| 273 | 20년 전 | 2230 | ||
| 272 | 20년 전 | 2158 | ||
| 271 | 20년 전 | 2617 | ||
| 270 | 20년 전 | 2670 | ||
| 269 | 20년 전 | 2497 | ||
| 268 | 20년 전 | 2695 | ||
| 267 | 20년 전 | 2382 | ||
| 266 | 20년 전 | 2572 | ||
| 265 | 20년 전 | 3516 | ||
| 264 |
bbking |
20년 전 | 5376 | |
| 263 |
hanpedro |
20년 전 | 3738 | |
| 262 | 20년 전 | 3198 | ||
| 261 |
허저비
|
20년 전 | 5944 | |
| 260 |
bbking |
20년 전 | 5722 | |
| 259 | 20년 전 | 4147 | ||
| 258 | 20년 전 | 2381 | ||
| 257 | 20년 전 | 3201 | ||
| 256 | 20년 전 | 1915 | ||
| 255 | 20년 전 | 1587 | ||
| 254 | 20년 전 | 3157 | ||
| 253 | 20년 전 | 3550 | ||
| 252 | 20년 전 | 5131 | ||
| 251 | 20년 전 | 5825 | ||
| 250 | 20년 전 | 3685 | ||
| 249 | 20년 전 | 5030 | ||
| 248 | 20년 전 | 3297 | ||
| 247 | 20년 전 | 3655 | ||
| 246 |
bbking |
20년 전 | 7965 | |
| 245 |
bbking |
20년 전 | 5925 | |
| 244 | 20년 전 | 4498 | ||
| 243 |
hanpedro |
20년 전 | 4073 | |
| 242 | 20년 전 | 2800 | ||
| 241 | 20년 전 | 2747 | ||
| 240 | 20년 전 | 2386 | ||
| 239 | 20년 전 | 1675 | ||
| 238 |
아우겐나이스
|
20년 전 | 2283 | |
| 237 |
email
|
20년 전 | 3696 | |
| 236 | 20년 전 | 4174 | ||
| 235 | 20년 전 | 10474 | ||
| 234 | 20년 전 | 5083 | ||
| 233 | 20년 전 | 3385 | ||
| 232 | 20년 전 | 3226 | ||
| 231 | 20년 전 | 3863 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기