SlideShare une entreprise Scribd logo
1  sur  39
Improve CSS IR & Sprites Image 
Techniques for Accessibility
@yamoo9
HTML Images vs 
CSS Background Images
HTML Contents Image 
변경이 잦은 이미지 콘텐츠 (디자인 < 콘텐츠) 
Alternate Text 속성 값이 읽히는 콘텐츠 (적절할 alt 속성 값 필요) 
크기 조정이 자유로운 콘텐츠 (반응형 웹에 대응 용이)
CSS Backgrounds Image 
디자인 이미지 콘텐츠 (디자인 > 콘텐츠) 
읽히지 않는 콘텐츠 (의미보다는 표현 목적) 
크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+)
CSS Background Size Polypill
http://caniuse.com/#feat=background-img-opts
Improve CSS IR & Sprites Image Techniques for Accessibility
https://github.com/louisremi/background-size-polyfill#readme
IE 8, Background Size Polyfill 
구형 IE 8 웹 브라우저 지원을 위한 대체 Behavior (표준모드에서만 지원, IE 7 미지원) 
데스크톱 IE 8 환경에서 배경 이미지 크기를 조정하고자 할 경우 
제약사항 - 아파치 웹 서버 환경에서만 작동 (Apache only / cover, contain 만 가능)
http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx
IE 5.5+, Background Size - MS Filter 
구형 IE 5.5+ 웹 브라우저 지원을 위한 대체 필터 
데스크톱 IE 6-8 환경에서 배경 이미지 크기를 조정하고자 할 경우 
유의사항 - IE 9+ 이상에서는 미지원 (지원할 필요가 있는지 검토) 
http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx
I wants 
SPEED!! 
CSS Image Replacements & 
Sprites Image Technique
CSS IR Technique 
디자인 이미지 콘텐츠 (디자인 + 콘텐츠) 
읽히는 콘텐츠의 배경 이미지 (텍스트를 숨김) 
크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+)
Game Sprites Image 
게임 그래픽에서 먼저 사용된 스프라이트 이미지 (사용자 콘트롤에 따라 애니메이션) 
개별 이미지를 모아 한 장의 이미지로! (성능 향상)
CSS Sprites Image 
UI 디자인에 주로 사용되는 스프라이트 이미지 (배경이미지로 삽입하고 위치 변경) 
개별 이미지를 모아 한 장의 이미지로! (성능 향상) 
크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+) 
http://www.daumkakao.com/main
Making CSS Sprites Image 
국내에서는 대부분 Adobe Photoshop으로 제작 (투명한 배경 위에 격자를 그리고 이미지 배치) 
개별 이미지를 모아 한 장에 배치하고 CSS 좌표 값 적용이 쉽도록 설계 (5 또는 10px 단위) 
크기가 다를 경우, 계산이 쉽지 않기 때문에 가급적 동일한 크기의 이미지 배치 
www.w3schools.com/css/css_image_sprites.asp
Making CSS Sprites Image 
다양한 크기의 이미지를 배치할 경우, 계산이 복잡 (작업이 매우 어려움) 
작업의 난이도가 높아 그래픽 디자이너, CSS 디자이너 어려움 호소 
http://img.naver.net/static/www/2014/sp_mn20140731.png 
계산기 필수!
Making CSS Retina Sprites Image 
다양한 크기의 이미지를 배치할 경우, 계산이 복잡 (작업이 매우 어려움) 
작업의 난이도가 높아 그래픽 디자이너, CSS 디자이너 어려움 호소 
승수(Multiplier) x2, x3에 따라 이미지 크기 조정 (포기?!) 
http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
Performance Issue
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/speed/pagespeed/insights_extensions
Accessibility Issue
KWCAG 2.1, 6p 
배경 이미지는 제거하더라도 콘텐츠의 이해와 사용에 아무런 영향을 주지 않아야 한다. 
배경 이미지를 제거하는 경우, 콘텐츠의 이해가 불가능하거나 사용이 어려운 콘텐츠는 
배경 이미지가 의미하는 정보를 보조 기술로 전달하도록 구현해야 한다.
KWCAG 2.1, 10p 
고대비(High Contrast) 모드란? (Alt+Shift+PrintSc) 
“명도, 색 대비가 크게 차이나도록 조정하여 화면을 표시하는 방식”을 말한다. 
고대비 모드 사용자가 인식할 수 있도록 콘텐츠를 제공해야 한다.
Performance Solutions
GUI Tools
Sprite Cow 
Spriting made easy!! 
spritecow.com
spriteme.org Sprite Me 
Spriting made easy!!
arnaumarch.com/en/sprites.html Atlas CSS 
Sprite Images CSS Position Generator
spritepad.wearekiss.com Atlas CSS 
Sprite Images CSS Position Generator
CLI Tools
Sass & Compass 
Spriting made easy!! 
compass-style.org/help/tutorials/spriting/ 
SASS +
Glup & SpriteSmith 
Spriting made easy!! 
github.com/twolfson/gulp.spritesmith
Glup & Retina Sprites 
Retina Spriting made easy!! 
github.com/efacilitation/gulp-retina-sprites
Glup & Imagemin 
Image Perfoments easy!! 
github.com/sindresorhus/gulp-imagemin
Accessibility Solution
JS Improve IR Accessible 
Windows 고대비 모드 감지 및 CSS 활성화 Images 비활성화 상태 체크 감지 스크립트 
ImproveIR.js를 활용한 IR 테크닉 접근성 향상 
별도로 의존하는 JS 라이브러리가 없어 가볍게 활용 
사용법이 매우 간단! 
github.com/yamoo9/Improve-IR-Accessible-Tech
Good 
Bye.

Contenu connexe

En vedette

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다yamoo9
 
의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리진보 심
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?yamoo9
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!yamoo9
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기yamoo9
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014draghome
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?yamoo9
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다yamoo9
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석yamoo9
 
[IR시스템]소개자료
[IR시스템]소개자료[IR시스템]소개자료
[IR시스템]소개자료insight-korea
 
2014년 2분기 ir 자료 ko
2014년 2분기 ir 자료 ko2014년 2분기 ir 자료 ko
2014년 2분기 ir 자료 koHyundai Finance
 
SomCloud Open IR 2013
SomCloud Open IR 2013SomCloud Open IR 2013
SomCloud Open IR 2013Charles Pyo
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용yamoo9
 
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips준완 박
 
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망JeongHeon Lee
 
[Nexsys] 넥시스 회사소개서 v5
[Nexsys] 넥시스 회사소개서 v5 [Nexsys] 넥시스 회사소개서 v5
[Nexsys] 넥시스 회사소개서 v5 JEONG HAN Eom
 
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015더브이씨 (THE VC)
 
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료 [스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료 Opentrade
 
2014 4분기 ir 현대카드_ko
2014 4분기 ir  현대카드_ko2014 4분기 ir  현대카드_ko
2014 4분기 ir 현대카드_koHyundai Finance
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Managementyamoo9
 

En vedette (20)

SEF 2017 — 디자이너, 디자인에 코딩을 더하다
SEF  2017 — 디자이너, 디자인에 코딩을 더하다SEF  2017 — 디자이너, 디자인에 코딩을 더하다
SEF 2017 — 디자이너, 디자인에 코딩을 더하다
 
의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리의료기관 인포그래픽 표준제안서_투비스토리
의료기관 인포그래픽 표준제안서_투비스토리
 
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
웹표준화,대한민국 의식개선프로젝트 02 웹디자이너란?
 
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
KTH, H3 2012 - 발표자료 - 모두의 도구로 프로토타이핑하라!
 
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
D가 알고 있는 걸 y도 알게 된다면 - 안드로메다에서 온 디자이너 이야기
 
드래그홈 표준제안서 2014
드래그홈 표준제안서 2014드래그홈 표준제안서 2014
드래그홈 표준제안서 2014
 
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
웹표준화,대한민국 의식개선프로젝트-03 웹표준,접근성이란?
 
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다질병관리본부 특강 - 모바일 “고해상도 디스플레이”  시대를 준비하다
질병관리본부 특강 - 모바일 “고해상도 디스플레이” 시대를 준비하다
 
도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석도서 11번가 앱(모바일 웹) 사용성 모델 분석
도서 11번가 앱(모바일 웹) 사용성 모델 분석
 
[IR시스템]소개자료
[IR시스템]소개자료[IR시스템]소개자료
[IR시스템]소개자료
 
2014년 2분기 ir 자료 ko
2014년 2분기 ir 자료 ko2014년 2분기 ir 자료 ko
2014년 2분기 ir 자료 ko
 
SomCloud Open IR 2013
SomCloud Open IR 2013SomCloud Open IR 2013
SomCloud Open IR 2013
 
스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용스마트워커를 위한 에버노트 활용
스마트워커를 위한 에버노트 활용
 
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
기업 커뮤니케이터의 입장에서 바라본 인포그래픽 개요 And 활용 tips
 
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
NUI / 웨어러블 디바이스 / 소환현실의 기술동향 및 전망
 
[Nexsys] 넥시스 회사소개서 v5
[Nexsys] 넥시스 회사소개서 v5 [Nexsys] 넥시스 회사소개서 v5
[Nexsys] 넥시스 회사소개서 v5
 
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
국내 VC 투자데이터로 알아본 스타트업 투자동향 보고서 2014-2015
 
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료 [스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료
[스타트업 투자연계] '내 생애 첫 Open IR" 기업 IR 자료
 
2014 4분기 ir 현대카드_ko
2014 4분기 ir  현대카드_ko2014 4분기 ir  현대카드_ko
2014 4분기 ir 현대카드_ko
 
일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management일관된 컬러 매니지먼트 - Consistent Color Management
일관된 컬러 매니지먼트 - Consistent Color Management
 

Similaire à Improve CSS IR & Sprites Image Techniques for Accessibility

100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법SooHwan Ok
 
AD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxAD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxVisual Tech Dev
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지yongwoo Jeon
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석Daum DNA
 
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS미래웹기술연구소 (MIRAE WEB)
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차Michael Yang
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?John Kim
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개Steve Kim
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER Engineering
 
20131217 html5
20131217 html520131217 html5
20131217 html5DK Lee
 
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5Manyoung Cho
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2Lee Ji Eun
 

Similaire à Improve CSS IR & Sprites Image Techniques for Accessibility (20)

Html5 ie9
Html5 ie9Html5 ie9
Html5 ie9
 
100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법100만 달러짜리 빠른앱 만드는 비법
100만 달러짜리 빠른앱 만드는 비법
 
AD의 TAD와 협업.pptx
AD의 TAD와 협업.pptxAD의 TAD와 협업.pptx
AD의 TAD와 협업.pptx
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석반응형 웹 디자인은 만능인가? - 신현석
반응형 웹 디자인은 만능인가? - 신현석
 
What's new in IE11
What's new in IE11What's new in IE11
What's new in IE11
 
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
엔터프라이즈 웹애플리케이션 개발 솔루션 Sencha ExtJS
 
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
처음부터 다시 배우는 HTML5 & CSS3 강의자료 7일차
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
How to build Design System?
How to build Design System?How to build Design System?
How to build Design System?
 
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
2. microsoft azure 클라우드 및 쉐어포인트 포탈 소개
 
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
NAVER TECH CONCERT_FE2019_플랫폼 UI 개발 전략의 모든 것
 
20131217 html5
20131217 html520131217 html5
20131217 html5
 
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5
엔터프라이즈 웹애플리케이션 솔루션 Sencha ExtJS 5
 
[week12] D3.js_Basic
[week12] D3.js_Basic[week12] D3.js_Basic
[week12] D3.js_Basic
 
반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2반응형 웹 기술 이해 V.2
반응형 웹 기술 이해 V.2
 

Plus de yamoo9

KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDyamoo9
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01yamoo9
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible techniqueyamoo9
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012yamoo9
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래yamoo9
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010yamoo9
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010yamoo9
 

Plus de yamoo9 (8)

KTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PDKTH 자기소개, 지훈 PD
KTH 자기소개, 지훈 PD
 
KTH Easing Markup DAY01
KTH Easing Markup DAY01KTH Easing Markup DAY01
KTH Easing Markup DAY01
 
DIK accessible technique
DIK accessible techniqueDIK accessible technique
DIK accessible technique
 
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
다이내믹 스타일시트 언어 Less framework 활용 by yamoo9
 
Mac seminar - 2012
Mac seminar - 2012Mac seminar - 2012
Mac seminar - 2012
 
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
웹표준화,대한민국 의식개선프로젝트 04 웹의 탄생과 미래
 
Webinar mobile presentation_2010
Webinar mobile presentation_2010Webinar mobile presentation_2010
Webinar mobile presentation_2010
 
Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010Webinar Kuler Presentation 2010
Webinar Kuler Presentation 2010
 

Improve CSS IR & Sprites Image Techniques for Accessibility

  • 1. Improve CSS IR & Sprites Image Techniques for Accessibility
  • 3. HTML Images vs CSS Background Images
  • 4. HTML Contents Image 변경이 잦은 이미지 콘텐츠 (디자인 < 콘텐츠) Alternate Text 속성 값이 읽히는 콘텐츠 (적절할 alt 속성 값 필요) 크기 조정이 자유로운 콘텐츠 (반응형 웹에 대응 용이)
  • 5. CSS Backgrounds Image 디자인 이미지 콘텐츠 (디자인 > 콘텐츠) 읽히지 않는 콘텐츠 (의미보다는 표현 목적) 크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+)
  • 10. IE 8, Background Size Polyfill 구형 IE 8 웹 브라우저 지원을 위한 대체 Behavior (표준모드에서만 지원, IE 7 미지원) 데스크톱 IE 8 환경에서 배경 이미지 크기를 조정하고자 할 경우 제약사항 - 아파치 웹 서버 환경에서만 작동 (Apache only / cover, contain 만 가능)
  • 12. IE 5.5+, Background Size - MS Filter 구형 IE 5.5+ 웹 브라우저 지원을 위한 대체 필터 데스크톱 IE 6-8 환경에서 배경 이미지 크기를 조정하고자 할 경우 유의사항 - IE 9+ 이상에서는 미지원 (지원할 필요가 있는지 검토) http://msdn.microsoft.com/en-us/library/ms532969%28v=vs.85%29.aspx
  • 13. I wants SPEED!! CSS Image Replacements & Sprites Image Technique
  • 14. CSS IR Technique 디자인 이미지 콘텐츠 (디자인 + 콘텐츠) 읽히는 콘텐츠의 배경 이미지 (텍스트를 숨김) 크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+)
  • 15. Game Sprites Image 게임 그래픽에서 먼저 사용된 스프라이트 이미지 (사용자 콘트롤에 따라 애니메이션) 개별 이미지를 모아 한 장의 이미지로! (성능 향상)
  • 16. CSS Sprites Image UI 디자인에 주로 사용되는 스프라이트 이미지 (배경이미지로 삽입하고 위치 변경) 개별 이미지를 모아 한 장의 이미지로! (성능 향상) 크기 조정이 자유롭지 않은 콘텐츠 (CSS3 background-size 지원 환경에서만 가능, IE 9+) http://www.daumkakao.com/main
  • 17. Making CSS Sprites Image 국내에서는 대부분 Adobe Photoshop으로 제작 (투명한 배경 위에 격자를 그리고 이미지 배치) 개별 이미지를 모아 한 장에 배치하고 CSS 좌표 값 적용이 쉽도록 설계 (5 또는 10px 단위) 크기가 다를 경우, 계산이 쉽지 않기 때문에 가급적 동일한 크기의 이미지 배치 www.w3schools.com/css/css_image_sprites.asp
  • 18. Making CSS Sprites Image 다양한 크기의 이미지를 배치할 경우, 계산이 복잡 (작업이 매우 어려움) 작업의 난이도가 높아 그래픽 디자이너, CSS 디자이너 어려움 호소 http://img.naver.net/static/www/2014/sp_mn20140731.png 계산기 필수!
  • 19. Making CSS Retina Sprites Image 다양한 크기의 이미지를 배치할 경우, 계산이 복잡 (작업이 매우 어려움) 작업의 난이도가 높아 그래픽 디자이너, CSS 디자이너 어려움 호소 승수(Multiplier) x2, x3에 따라 이미지 크기 조정 (포기?!) http://miekd.com/articles/using-css-sprites-to-optimize-your-website-for-retina-displays/
  • 24. KWCAG 2.1, 6p 배경 이미지는 제거하더라도 콘텐츠의 이해와 사용에 아무런 영향을 주지 않아야 한다. 배경 이미지를 제거하는 경우, 콘텐츠의 이해가 불가능하거나 사용이 어려운 콘텐츠는 배경 이미지가 의미하는 정보를 보조 기술로 전달하도록 구현해야 한다.
  • 25. KWCAG 2.1, 10p 고대비(High Contrast) 모드란? (Alt+Shift+PrintSc) “명도, 색 대비가 크게 차이나도록 조정하여 화면을 표시하는 방식”을 말한다. 고대비 모드 사용자가 인식할 수 있도록 콘텐츠를 제공해야 한다.
  • 28. Sprite Cow Spriting made easy!! spritecow.com
  • 29. spriteme.org Sprite Me Spriting made easy!!
  • 30. arnaumarch.com/en/sprites.html Atlas CSS Sprite Images CSS Position Generator
  • 31. spritepad.wearekiss.com Atlas CSS Sprite Images CSS Position Generator
  • 33. Sass & Compass Spriting made easy!! compass-style.org/help/tutorials/spriting/ SASS +
  • 34. Glup & SpriteSmith Spriting made easy!! github.com/twolfson/gulp.spritesmith
  • 35. Glup & Retina Sprites Retina Spriting made easy!! github.com/efacilitation/gulp-retina-sprites
  • 36. Glup & Imagemin Image Perfoments easy!! github.com/sindresorhus/gulp-imagemin
  • 38. JS Improve IR Accessible Windows 고대비 모드 감지 및 CSS 활성화 Images 비활성화 상태 체크 감지 스크립트 ImproveIR.js를 활용한 IR 테크닉 접근성 향상 별도로 의존하는 JS 라이브러리가 없어 가볍게 활용 사용법이 매우 간단! github.com/yamoo9/Improve-IR-Accessible-Tech