AWS AWS 디딤 클라우드

알림톡 통합메시징(알림톡)

이니톡 결제 이니톡(알림톡) 결제!

일본결제지원 일본결제지원!

이전
목록
다음
전

WebKit (사파리)에서 srcset 구현

전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 2013-08-23 (금) 16:48:16 · 4032 · 1

링크

http://mobile.smashingmagazine.com/2013/08/21/webkit-implements-srcset-and-why-its-a-good-thing/ (259) https://www.webkit.org/blog/2910/improved-support-for-high-resolution-displays-with-the-srcset-image-attribute/ (104)
반응형 이미지 표준으로 제안된 안 중 하나인, 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개

은빛달그림자
프로필 보기이 회원 글보기이 회원의 댓글보기
 2013-10-04 (금) 10:26:20
좋은 정보 감사합니다.^^
댓글을 작성하시려면 로그인이 필요합니다.

프로그램

8,188건
태그 필터 (최대 3개) 전체 개발자 소스 기타 mysql 팁자료실 javascript php linux flash 정규표현식 jquery node.js mobile 웹서버 os 프로그램 강좌 썸네일 이미지관련 도로명주소 그누보드5 기획자 견적서 계약서 기획서 마케팅 제안서 seo 통계 서식 통계자료 퍼블리셔 html css 반응형 웹접근성 퍼블리싱 표준화 반응형웹 홈페이지기초 부트스트랩 angularjs 포럼 스크린리더 센스리더 개발자톡 개발자팁 퍼블리셔톡 퍼블리셔팁 기획자톡 기획자팁 프로그램강좌 퍼블리싱강좌
+
제목 글쓴이 날짜 조회
13-10-29 조회 7,672
13-10-28 조회 8,595
13-10-28 조회 3,730
13-10-28 조회 3,368
13-10-27 조회 2,990
13-10-26 조회 3,623
13-10-25 조회 3,443
13-10-24 조회 3,417
13-10-24 조회 3,151
13-10-24 조회 3,469
13-10-24 조회 4,054
13-10-23 조회 4,203
13-10-23 조회 3,333
13-10-22 조회 4,494
13-10-21 조회 3,187
13-10-20 조회 3,511
13-10-18 조회 4,410
13-10-17 조회 4,558
13-10-15 조회 4,642
13-10-11 조회 4,500
13-10-10 조회 5,134
13-10-10 조회 3,614
13-10-08 조회 4,138
13-10-03 조회 6,208
13-10-02 조회 4,075
13-10-02 조회 4,208
13-10-02 조회 4,110
13-10-02 조회 3,592
13-10-02 조회 3,870
13-10-02 조회 3,730
13-10-02 조회 3,958
13-09-29 조회 4,630
13-09-29 조회 4,087
13-09-29 조회 3,957
13-09-29 조회 6,542
13-09-29 조회 4,174
13-09-27 조회 3,516
13-09-27 조회 4,148
13-09-24 조회 3,210
13-09-24 조회 3,494
13-09-18 조회 3,902
13-09-17 조회 3,754
13-09-16 조회 7,856
13-09-16 조회 5,250
13-09-16 조회 4,298
13-09-15 조회 3,139
13-09-13 조회 4,704
13-09-13 조회 3,318
13-09-13 조회 3,609
13-09-12 조회 3,421
13-09-11 조회 5,988
13-09-10 조회 3,418
13-09-10 조회 6,089
13-09-10 조회 3,853
13-09-09 조회 4,222
13-09-09 조회 4,822
13-09-07 조회 4,994
13-09-07 조회 3,085
13-09-06 조회 3,205
13-09-06 조회 3,818
13-09-06 조회 3,176
13-09-05 조회 3,341
13-09-05 조회 9,308
13-09-04 조회 3,043
13-09-04 조회 3,306
13-09-04 조회 2,985
13-09-03 조회 3,077
13-09-03 조회 3,381
13-08-30 조회 3,332
13-08-30 조회 4,401
13-08-29 조회 4,374
13-08-28 조회 3,885
13-08-28 조회 8,058
13-08-27 조회 4,045
13-08-26 조회 4,249
13-08-26 조회 3,473
13-08-26 조회 4,754
13-08-23 조회 4,033
13-08-23 조회 5,612
13-08-22 조회 5,137
13-08-22 조회 4,503
13-08-22 조회 4,966
13-08-22 조회 4,574
13-08-22 조회 4,467
13-08-22 조회 3,515
13-08-20 조회 3,753
13-08-18 조회 8,361
13-08-18 조회 5,262
13-08-17 조회 5,877
13-08-17 조회 4,588
13-08-17 조회 4,097
13-08-14 조회 3,299
13-08-12 조회 4,316
13-08-11 조회 3,491
13-08-09 조회 4,006
13-08-08 조회 5,230
13-08-08 조회 4,951
13-08-08 조회 4,305
13-08-08 조회 9,254
13-08-08 조회 5,330
글쓰기