Your SlideShare is downloading. ×
css_sprites 독인가? 약인가
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

css_sprites 독인가? 약인가

491
views

Published on


0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
491
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. CSS Sprites독인가? 약인가?박상혁12.12.03
  • 2. 이 발표자료에는간접광고가 포함되어 있습니다.
  • 3. 여러 개의 이미지를 하나의 이미지 plate에 모아CSS에서 배경이미지로 처리해 특정 부분만 보여주는 방법
  • 4. 응답속도를 빠르게 하는 점
  • 5. YslowPage SpeedSteve Sauders
  • 6. 웹 접근성 준수가 어려운 점
  • 7. Image Defect대체 텍스트를 보여줘~
  • 8. CSS Sprites 쓰면 응답속도는 빠르지만 웹 접근성 준수가 어렵다.
  • 9. CSS Sprites 코딩 방법이 여러 가지던데? 얼마나 빨라져요? 어떤 지침을 준수하기 어렵나요? 두 마리 토끼를 잡을 수 없나요?
  • 10. CSS Sprites 파헤치기
  • 11. OverlayVoid Element에 CSS background-image 속성을 적용하여 Sprites을 구현하는 방법.Letter blow배경 처리한 Element에 CSS의 Text-indent나line-height 속성을 이용하여 Inner-text의 내용을 Viewport 밖에 위치하도록 하는 방법Vanish배경 처리한 Element의 descendant-nodeInner-text에 blind 관련 속성을 부여하여 해당텍스트를 화면에서 보이지 않도록 하는 방법
  • 12. Overlay<a href=”#”>질문<span></span></a>a{display:block;overflow:hidden;position:relative;width:26px;height:16px}a span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>a{display:block;overflow:hidden;position:relative;width:26px;height:16px}a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}
  • 13. Overlay<span class="btn"><button type="button"><span>버튼</span></button></span>.btn{display:block;width:26px;height:16px;background:url(이미지) no-repeat}button{overflow:hidden;width:26px;height:16px}button span{position:relative;z-index:-1}
  • 14. Letter blow<a href=”#”>질문</a>a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-9999px}a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-height:999em}<a href=“#”><span>질문</span></a>a{display:block;width:26px;height:16px;background:이미지}a span{position:absolute;top:0;left:-9999px}
  • 15. Vanish<a href=“#”><span>질문</span></a>a{display:block;width:10px;height:10px;background:이미지}a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}
  • 16. ETC<h2><span></span>질문1</h2>h2 span{display:inline-block;width:10px;height:10px;background:이미지}<h2>질문1</h2>h2{padding-left:10px;background:이미지}
  • 17. ETC<p>질문1<span>new</span></p>p span{display:inline-block;width:10px;height:10px;background:이미지;text-indent:-9000px}<p>질문1<span>new<span></span></span></p>p span{display:inline-block;overflow:hidden;position:relative;width:26px;height:16px}p span span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}
  • 18. Overlay<a href=”#”>질문<span></span></a>a{display:block;overflow:hidden;position:relative;width:26px;height:16px}a span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}<a href=”#”>질문<img src=”1x1빈이미지” width=”1” height=”1” alt=””></a>a{display:block;overflow:hidden;position:relative;width:26px;height:16px}a img{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지} 스크린 리더 Image Defect CSS Defect 고대비 키보드 네비게이팅 인쇄 (센스리더)대체텍스트가 일부 대체텍스트가 일부 포 커 스 확 인 불 가 정상 정상(질문링크) 불가만 보일 수 있음 만 보일 수 있음 (꼼수)대체텍스트가 일부 대체텍스트가 일부 포 커 스 확 인 불 가 정상 ??(질문그래픽링크) 불가만 보일 수 있음 만 보일 수 있음 (꼼수)
  • 19. Letter blow<a href=”#”>질문</a>a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;text-indent:-9999px}a{overflow:hidden;display:block;width:26px;height:16px;background:이미지;line-height:999em} 스크린 리더 Image Defect CSS Defect 고대비 키보드 네비게이팅 인쇄 (센스리더)대체텍스트 확인 불 대체텍스트 확인 불 정상 정상(질문링크) 정상 불가가 가
  • 20. Vanish<a href=“#”><span>질문</span></a>a{display:block;width:10px;height:10px;background:이미지}a span{visibility:hidden;overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0} 스크린 리더 Image Defect CSS Defect 고대비(XP) 키보드 네비게이팅 인쇄 (센스리더)대체텍스트 확인 불 대체텍스트 확인 불 정상 정상(질문링크) 정상 불가가 가
  • 21. 접근성 Overlay Letter Blow VanishImage Defect 대체텍스트가 일부만 보임 대체텍스트 확인 불가 대체텍스트 확인 불가CSS Defect 정상 정상 정상스크린 리더 정상 정상 정상 대 체 텍 스 트 가 일부 만 보 임고대비(XP) 대체텍스트 확인 불가 대체텍스트 확인 불가 (IE6은 +2)키보드 네비게이팅 outline 표시 안됨 (꼼수) 정상 정상인쇄 불가 (사용자 설정 변경 필요)
  • 22. Overlay 방식이 그나마 나은 방법Image defect, 고대비(XP), outline을 해결하면 완벽해!!
  • 23. <a href=”#”>질문<span></span></a>a{display:block;overflow:hidden;position:relative;width:26px;height:16px}a span{position:absolute;top:0;left:0;width:26px;height:16px;background:이미지}<a href=”#”>질문<span></span></a>a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;margin:-1px;padding:1px; /* outline 일부 노출 */_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */}a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지}
  • 24. <a href=”#”>질문<span></span></a>a {display:block;overflow:hidden;position:relative;width:26px;height:16px; font-size:12px;margin:-1px;padding:1px; /* outline 일부 노출 */_font-size:10px; /* ie6 고대비 글자 강제 키움 대비 */}a span{position:absolute;top:1px;left:1px;width:26px;height:16px;background:이미지} 스크린 리더 Image Defect CSS Defect 고대비 키보드 네비게이팅 인쇄 (센스리더)대체텍스트가 일부 대체텍스트가 일부 포 커 스 확 인 불 가 정상 정상 불가만 보일 수 있음 만 보일 수 있음 (꼼수) 스크린 리더 Image Defect CSS Defect 고대비 키보드 네비게이팅 인쇄 (센스리더)대체텍스트가 길면 대체텍스트가 길면 배경이미지 체크 안 정상 정상 일부 노출 가능일부만 보임 일부만 보임 내
  • 25. Overlay 방식으로 하고대체텍스트를 width에 맞춰서 짧게…^^ 좋은 방법 있으면 소개해주세요
  • 26. Windowx XP SP3 / Intenet Explorer 6.0 HttpWatch Professional 6.1 10회 평균 (초기접속기준)기본 테스트N사 사내 네트워크우리집(100M 광랜)
  • 27. 기본 테스트 request time(s) time(s) Type Normal Sprites Normal Sprites Normal Sprites Total 17 2 0.078 0.050 0.317 0.155 • 테스트 결과와 같이 페이지 로딩 시간이 약 15~20% 향상 되는 것으로 확인 되었습니다. • 서버 요청 1건당 요청 헤더 파일의 크기는 약 300bytes 로 요청 수를 줄이는 것만으로도 성능이 향상 되는 것을 확인 할 수 있습니다. • CSS 파일의 용량은 약 2,000 bytes 늘어났지만 속도는 향상된 것으로 보아 CSS 파일의 용량 증가보다 는 요청 수를 줄이는 것이 성능에 더 큰 영향을 미치는 것으로 확인 되었습니다. • 네트워크의 속도가 느릴수록 성능 향상을 명확히 확인 할 수 있었습니다.
  • 28. 심화 테스트파일 크기가 동일하고 파일 요청 수만 변경한 경우 10 requests 20 requests 40 requests 80 requests200kb 20kb * 10개 10kb * 20개 5kb *40개 2.5kb * 80개400kb 40kb * 10개 20kb * 20개 10kb * 40개 5kb * 80개파일 요청 수가 동일하고 파일 크기만 변경한 경우 100kb 200kb 400kb 800kb20 requests 5kb * 20개 10kb * 20개 20kb *20개 40kb *20개40 requests 2.5kb * 40개 5kb * 40개 10kb * 40개 20kb * 40개네트워크 환경은 100Mbps급 회선과 20ms의 지연을 발생시켜 만든 2Mbps급 회선을 사용했다.클라이언트는 고 성능의 PC(i5_760 CPU, 4G Memory, Windows 7, IE8, no cache)와저 성능의 PC(p4 2.8Ghz CPU, 1G Memory, Windows XP SP3, IE7, no-cache ) 2대를 기준으로 실험했다.
  • 29. 심화 테스트 용량 동일(200k), 리퀘스트 다를 때 - 100 - 1빠른 회선(100Mbps)과 느린 회선(2Mbps) 용량 동일(200k), 리퀘스트 다를 때 - 2 - 1모두 파일 요청수가 작아질수록 onload 이벤 용량 동일(400k), 리퀘스트 다를 때 - 100 - 1 14,000 용량 동일(400k), 리퀘스트 다를 때 - 2 - 1트 발생 시간이 단축된다. 12,000 10,00080개의 파일 요청 수를 10개로 줄이면 8,000onload 이벤트 발생 시간을 약 50% 줄일 수 6,000 4,000있다. 2,000 - r80 r40 r20 r10 파일 크기 동일하고 파일 요청 수를 변경했을 때 고성능 PC의 onload 발생시간 80 requests 40 requests 20 requests 10 requests 100M 100M 2Mbp 100Mb 2Mbp 100M 2Mbp 2Mbps bps bps s ps s bps s 200kb 163 4,041 104 2,694 74 2,778 69 2,188 400kb 152 4,218 102 3,694 110 3,369 84 2,982
  • 30. 심화 테스트 용량 동일(200k), 리퀘스트 다를 때 - 100 - 1빠른 회선(100Mbps)과 느린회선(2Mbps) 모 용량 동일(200k), 리퀘스트 다를 때 - 2 - 1 용량 동일(400k), 리퀘스트 다를 때 - 100 - 1두 파일 요청수가 작아질수록 onload 이벤트 용량 동일(400k), 리퀘스트 다를 때 - 2 - 1발생 시간이 단축된다. 14,000 12,000고성능 PC에 비해 약 30% 더 단축효과가 있 10,000 8,000다. 특이한 점은 파일 요청 수를 80개에서 40개 6,000 4,000로 줄이면 단축률은 50% 인데 20개에서 10개 2,000로 줄이면 10% 밖에 되지 않는다. - r80 r40 r20 r10 파일 크기 동일하고 파일 요청 수를 변경했을 때 저성능 PC의 onload 발생시간 80 requests 40 requests 20 requests 10 requests 100M 100M 2Mbp 100Mb 2Mbp 100M 2Mbp 2Mbps bps bps s ps s bps s 200kb 687 10,732 359 5,924 248 3,885 196 3,544 400kb 757 12,455 415 7,143 274 5,082 228 4,493
  • 31. 심화 테스트다운로드하는 파일 크기가 작아질수록 리퀘스트 고정(20), 용량이 다를때 - 100 - 1 리퀘스트 고정(20), 용량이 다를때 - 2 - 1onload 이벤트 발생 시간이 단축된다. 리퀘스트 고정(40), 용량이 다를때 - 100 - 1 리퀘스트 고정(40), 용량이 다를때 - 2 - 1 14,000 9,000 4,000 (1,000) 800k 400k 200k 100k 파일 요청 수가 동일하고 파일 크기를 변경했을 때 고성능 PC의 onload 발생시간 800kb 400kb 200kb 100kb 100M 100M 2Mbp 100Mb 2Mbp 100M 2Mbp 2Mbps bps bps s ps s bps s 20 requests 251 5,089 85 3,576 71 2,817 72 1,989 40 requests 108 3,754 107 3,549 101 2,897 115 2,409
  • 32. 심화 테스트느린회선(2Mbps)은 다운로드 하는 파일 크 리퀘스트 고정(20), 용량이 다를때 - 100 - 1 리퀘스트 고정(20), 용량이 다를때 - 2 - 1기가 작아질수록 onload 이벤트 발생 시간이 리퀘스트 고정(40), 용량이 다를때 - 100 - 1 리퀘스트 고정(40), 용량이 다를때 - 2 - 1단축된다. 14,000특이한 점은 동일한 크기의 파일을 다운로드 9,000하더라도 파일 요청 수가 적으면 onload 이 4,000벤트 발생 시간이 더 단축된다는 사실이다. (1,000) 800k 400k 200k 100k 파일 요청 수가 동일하고 파일 크기를 변경했을 때 저성능 PC의 onload 발생시간 800kb 400kb 200kb 100kb 100M 100M 2Mbp 100Mb 100M 2Mbp 2Mbps 2Mps bps bps s ps bps s 20 requests 392 7,341 273 5,140 247 4,922 244 3,505 40 requests 348 7,260 413 7,078 362 6,044 340 5,796
  • 33. • 파일 크기를 줄이는 것과 파일 요청 수를 줄이는 것 모두 성 능 개선 효과가 있다.• 파일 요청 수를 줄이는 것은 모든 환경에서 성능 개선 효과 가 있고 특히 저성능 PC, 느린 네트워크 환경에서 성능 개 선 효과가 더 좋다.• 파일 크기를 줄이는 것은 PC 성능과 네트워크 속도의 조합 에 따라 성능 개선 효과가 다르다.• 개선 전 이미지 요청 수가 많고 적음에 따라 성능 개선 차이 가 크다.
  • 34. 성능, 접근성두 마리 토끼를 잡는 건 힘들다.
  • 35. 필요한 부분에 적절히 사용하는 것만으로는 응답속도 개선 효과는 글쎄… 어설프게 적용하면…
  • 36. 정보를 포함하지 않은 이미지만배경이미지로 처리하는 것이 Best Practice !!
  • 37. HiveLab에서 식구 찾아요~JOBKOREA에서 HiveLab으로 검색하시거나 2부에 물어보세요…
  • 38. 감사합니다.㈜Hivelab 웹표준개발팀 박상혁parkbur@hivelab.co.krFacebook : parkburMe2day : bur