접근성을 준수한다는 건 뭘까? 대체 텍스트를 꼼꼼하게 넣는 것? 행정기관 프로젝트 보고서를 읽다보면 "콘텐츠 접근성 지침(국가표준) 24개 검사 항목에 대한 점검을 했는가?","장애유형별(시각,지체,뇌병변,청각) 사용자 평가를 실시하고 장애인 사용자의 어려움을 개선했는가?" 등이 나오는데 이것이 바로 접근성이다. 1. 스크린 리더기를 사용하는 장애인과 고령자에게 차별없는 웹을 제공하기 위하여 준수해야하는 것웹 접근성목적 : "한국형 웹 콘텐츠 접근성 지침"이 존재하며, 이 지침에 따라 견고성,인식의 용이성,이해의 용이성,운용의 용이성 준수도구 : 개발자 도구 / 브라우저 부가 기능인 Openwax,firebug,Web Developer / 응용 소프트웨어 방식인 Colour Contrast Analyse..

상단바(.top-banner)와 헤더(.header-area)가 분리되어있다. 상단바의 경우 top-banner로 배경과 회색선을 가진 영역을 만들어준 후 ban-wrap로 max-width:1440px,padding:8px 0을 주어 표현의 영역을 작성하였다. 헤더의 경우 header-wrap의 max-width를 1400px로 주고, header-wrap 안의 두가지 개체(logo, gnb-wrap)를 일렬로 정렬하기 위해 두 개체 모두 float:left를 사용하였다. gnb-wrap같은 경우는 width에 calc연산을 주어 로고의 너비만큼의 px를 제한 100%를 차지하게 하였다. #gnb의 경우 자식 개체로 .menu를 가지고 있는데, menu에 display 속성을 주고 menu > li에 ..

HTML 제목태그 문단태그 CSS html { font-size: 20px; } body { font-size: 1rem; /* 20px (html(루트)에 대한 등배단위) */ } .box01 { font-size:10px; } .box01 span { font-size:3em; /* 30px (부모태그에 대한 등배단위) */ }

HTML CSS input[type="checkbox"] { appearance: none; width: 26px; height: 26px; background: url(../../images/common/check_default.png) no-repeat; cursor: pointer; } input[type="checkbox"]:checked { background-image: url(../../images/common/check_checked.png); }

오류사례 1. 텍스트 이미지에 대체 텍스트가 제공되지 않은 경우 오류사례2. 불충분한 대체 텍스트를 제공한 경우 오류사례3. 대체텍스트가 오타로 표기된 경우 Home > 사이트맵 Home > 사이트맵 오류사례4. 이미지 버튼에 대체 텍스트를 제공하지 않은 경우 오류사례5. 불릿 이미지에 대한 대체 텍스트를 제공하지 않은 경우 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 2012년 함께 누리는 일자리 한마당 오류사례6. 의미 없는 이미지에 대체텍스트를 제공한 경우 오류사례7. longdesc..