무아지경

웹 접근성(Web Accessibility) 웹 접근성(Web Accessibility) 이란 장애인, 고령자 등이 웹 사이트에서 제공하는 정보에 비장애인과 동등하게 접근하고 이해할 수 있도록 보장하는 것이다. 특정 대상에 한정되지 않고 모든 사용자가 웹 사이트에서 제공하는 모든 정보에 접근할 수 있도록 보장하는 것이다.장애인차별금지법이 생기면서 2013년 4월 11일이후 모든 공공기관과 법인의 웹사이트에서 웹 접근성 준수가 의무화됐다. 간단한 방법의 예시로.. 저시력 시각장애인 이나 고령자 - 페이지의 확대/축소 기능이나 고대비 보기 제공 전맹 시각장애인 - 스크린 리더와 같은 대체 소프트웨어를 이용해 사이트를 읽어 왔을때 사이트의 콘텐츠가 순서대로 읽힐 수 있도록 마크업 - 이미지가 제공될 경우 이미..

reset.css 와 normalize.css 차이점 웹 브라우저 마다 각각의 기본 스타일이 설정 되어 있다.그래서 스타일을 지정하고 html을 랜더링 해보면 브라우저마다 스타일이 다르게 보이고 어긋나게 된다. 이를 방지하고 모든 브라우저에서 똑같은 스타일로 보이도록 하기 위해 사용하는게 reset.css 와 normalize,css 이다. 이 두개의 css를 같은 것으로 여기는 경우가 있는데 비슷한것 같지만 엄연히 사용법이 다른 css이다. reset 방식은 모두 스타일을 초기화 해서 0의 상태로 되도록 하는 방식이다 참고로 제가 사용하는 css는 여러 reset 중에서 Eric Meyer’s “Reset CSS” 2.0 이다.여기서 필요하다고 생각하는 것만 편집해서 사용하고 있다. normalize ..

IE 버전별 크로스 브라우징... 마크업 할 때 항상 크롬 브라우저를 띄워 놓고 작업을 한다. 일단 개발자 모드가 너~~~무 편하게 되어 있고...처음 공부를 시작할때 부터 사용 하던 버릇 때문인지도 모르겠다. 열심히 크롬으로 마크업하고 크로스 브라우징 여부를 위해 확인하는데 IE가 문제가 되는 경우가 많다. 제일 문제는 IE가 버전별로 지원하고 안하고의 차이가 있기 때문에 IE는 하나만 보는게 아니라 버전 별로 확인을 따로 해야 된다. 공공기관의 경우 IE9버전 까지 맞춰서 해야 하는 경우가 있고 가끔 IE8버전 이하까지 맞춰야 하는 경우도 있다고 한다. (IE9 까지는 하겠는데 그 이하는 난 못한다~~~) [ html5shiv.js ] - HTML5 요소를 지원하지 않는 브라우저(IE6~IE8버전)에..

벤더 프리픽스(Vender Prefix)... html3 /css3 로 넘어가는 과정에서 몇 몇 css3의 기능들이 웹 표준이 아니기 때문에 다른 브라우저에서 제대로 표현 되지 않을때가 있었다. 그럴때 사용하는 방법이 벤더 프리픽스이다. 대표적인 예로 transition / transform / border-radius / text-shadow / box-shadow / background:linear-gradient~~등이 있다. 위와 같은 css3의 속성들은 표준으로 확정 되지 않아서 지원 되지 않는 브라우저가 있어서 제대로 먹히질 않는다. 사용법은 초 간단하다..Perfix는 "접두어"라는 뜻이다..즉 앞에 -webkit- / -moz- / -o-​ / -ms- 를 붙여주기만 하면 된다. -webk..

크로스 브라우징[Cross Browsing] 이란... html / css / javascript 작성시 W3C의 web standard(웹규격)에 맞는 코딩을 해서 브라우저나 기기마다 사이트가 동일하게 보여지고 작동하도록 하는 것을 말한다. 웹 표준을 지킨다고 흔히 말하는데...웹 표준이란 존재 하지 않는다고 한다.웹표준이란 말을 항상 사용하고 있어서 그런줄만 알았는데 아니라니..... 웹규격이 맞는 표현인데..다들 웹표준이라하니 그냥 그러려니..하고 넘어가자.. 사실 처음 일을 시작하고 제일 처음 듣고 맨붕이 왔던 단어가 "크로스 브라우징" 이다..처음 일을 시작하는데 크로우 브라우징 잘 되도록 코딩을 해야 한다는데 무슨 소리인가 첫 날 부터 맨붕이 왔었다.(크로스브라우징이란 단어를 이날 처음 들어봤..

앞에서 앱 등록시 필요한 것들에 대해 작성해 놓았다. 각 이미지들을 필요로 하는 사이즈가 있다. 1. 그래픽 이미지 사이즈 - 1024x500 2. 스플래시 이미지 사이즈 - IOS_가로_사이즈 480x320 960x640 1024x768 1136x640 1334x750 2048x1536 2208x1242 - IOS_세로_사이즈 320x480 640x960 640x1136 750x1334 768x1024 1242x2208 1536x2048 - Android_가로_사이즈 320x200 480x320 800x480 1280x720 1600x960 1920x1280 - Android__세로_사이즈 200x320 320x480 480x800 720px1280 960px1600 1280x1920 3. 아이콘 사이..

앱등록시 필요한 이미지/아이콘 IOS의 App Store 나 안드로이드의 Google Play Store에 앱을 등록할때 필요한 것들이 있다. 그래픽이미지 / 스플래시 이미지 / 아이콘 / 스크린샷 1. 그래픽 이미지는 구글플레이에 등록된 어플을 보면 상단에 게시 되는 이미지이다. 2. 아이콘은 말그대로 앱 아이콘..즉 앱을 설치하면 보이는 앱 아이콘을 말한다. 3. 스크린샷은 앱 설치 페이지 하단에 보이는 어플리케이션을 설명해주는 이미지이다. 4. 스플래시 이미지는 어플리케이션이 시작되는 순간 잠시 보여지는 시작화면을 말한다. 로딩페이지라고 생각하면 쉽게 이해할 수 있을것 같다. ============================= 1 ============================= =======..

IOS Safe Area 마무리 되어간다고 생각했던 APP에서 알 수 없는 오류가 생겼다. 아이폰X 부터 적용된 레이아웃 때문에 생기는 문제다. footer 밑으로 컨텐츠가 보이고 홈버튼이 보인다. header도 멀쩡해 보이지만 실제로 보면 같은 문제로 레이아웃이 틀어져 버린다. 해결법 1. viewport-fit=cover 추가 1234cs 2. CSS 추가 123456789/* 코딩한 body에 추가 */body { padding-top: constant(safe-area-inset-top); /* iOS 11.0 */padding-top: env(safe-area-inset-top); /* iOS 11.2 */ }/* 코딩한 footer에 추가 */.footer { padding-bottom: co..