Record

위와 같은 달력의 UI를 만들어보자. 실질적으로 작동하는 달력은 아니다. 하지만 접근성에 따라 제작하였고 FE나 퍼블리셔를 꿈꾸거나 공부하시는 분은 꾸미는 방법을 알아야하니 시작하자. 전체코드 html calendar 일 월 화 수 목 금 토 30 1 국군의 날 2 3 개천절 4 5 6 7 8 9 음 9.1 한글날 10 11 12 13 14 15 16 17 18 19 20 21 22 23 음 9.15 24 25 26 27 28 29 30 31 1 2 3 css .blind{position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(1px 1px 1px 1px); /* IE6, IE7 */ clip:rect(1px, 1px..

접근성에 table 요소 작업은 꽤 어렵다. 하나하나 살펴보자. 일단 table의 제목인 caption 이 작성되어야 한다. caption은 table 바로 아래 위치 해야하며 마크업 순서는 table > caption > colgroup > thead > tbody > tfoot 순 이다. 보통 caption을 나타내야하거나 사용한다면 그대로 두고 css로 style 하면 되지만, 사용하지 않고 숨겨야 한다면 마찬가지로 clip를 사용하여 숨기면 된다. 그리고 또 중요한 점은 scope이다. scope는 표의 제목이 어떤 방향을 얼마만큼 가르키고 있는지를 알려준다. 위와 같은 테이블의 제목은 연령별,성별,조회수,비율 그리고 좌측에 전체 , 0-12 , 남, 여 이렇게 th로 작성이 될 것이다. 연령별,..

전체코드를 첨부 파일로 넣어 두었다. 백그라운드 이미지를 사용하였으며, 그 이미지의 양이 방대하기 때문에 대체텍스트로는 한계가 있다. 이를 대응하기위해 전체 시멘틱태그에 맞게 html을 작성하고 그에 알맞게 css를 정의 하였다. a링크는 이미지에 대응하여야 되기 때문에 영역을 살려놓았다. * 부스트코스 UI 교육을 듣고 개인적으로 정리한 내용입니다.

IR 기법 Imgae Replacement (이미지 리플레이스먼트) 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 말한다. 웹접근성으로 이미지 태그에 alt 속성에는 대체텍스트를 입력 해 주어야 한다. 하지만, 배경 이미지로 처리한 의미 있는 아이콘, 로고 또는 대체 텍스트가 너무 긴 이벤트 페이지는 어떻게 처리해야 할까 ? 일단 작은 이미지를 많이 사용하는 것 보다는 스프라이트 이미지라고 해서 큰 이미지에 여러 버튼들을 정리해 두고, 그 버튼들을 포지션으로 불러오는 경우가 많고 그 때문에 백그라운드 이미지를 사용하는 경우가 많다. 예시 : https://s.pstatic.net/static/www/img/uit/2020/sp_main_b46ce0.png 네이버 기준으로 보면 백그라..