상세 컨텐츠

본문 제목

html,css 프로젝트

패스트캠퍼스/패캠 오프라인

by 모든지 신나게 2020. 4. 11. 18:43

본문

html, css 반응형 웹 프로젝트

image

프로젝트 github

프로젝트를 시작하면서

패스트캠퍼스에서 html과 css수업을 끝내고 간략한 프로젝트를 진행하기로 했다.

해당 프로젝트는 강사님이 주신 피그마 파일을 가지고 만들게 되었다.

image

프로젝트를 진행하면서 강사님이 중요하게 여긴것은 웹접근성이었다.

그래서 최대한 배운내용과 기술 사이트등을 참고하며 만들었습니다.

만들면서 참고한 사이트

  1. 웹접근성 널리
  2. 레진코믹스 github
  3. AOA 접근성 유튜브

아쉬운 점

하지만 그럼에도 불구하고 몇가지 놓친점이 있어서 아쉬웠습니다.

  1. <a href="#drinkDialog1" aria-haspopup="dialog">
    <div id="drinkDialog1" class="drink__dialog" role="dialog" aria-modal="true">
    1. a에 role=button을 통해 링크가 아닌 버튼임을 알려주고aria-pressed="true"로 클릭이 된다는것을 알려주는게 좋다고 하셨다.
  2. 보이지는 않지만 처음 텝키가 갔을때 바로가기 키을 넣어주어서 키보드를 사용하는 사용자의 편의성을 생각하기

  3. 저시력자를 위해서 명도를 4.5:1 이상으로 만들어주기

프로젝트를 마치며

해당 프로젝트를 하면서 html과 css도 파고들면 파고들수록 점점 더 어려워진다는 것을 알았습니다.

대학교를 다니면서는 프로그래밍언어도 아니라 대충 배우고 넘어갔지만 프로젝트를 진행하면서 고려할 사항도 많다는 것을 느꼈습니다.

동시에 코드발표를 하면서 나는 이렇게 생각했던것을 다른사람들은 각각 다 다르게 생각한 부분이 있고 그 중에서는 나보다 더 괜찮다고 생각되는 코드도 있어서 많은 깨달음을 느꼈습니다.

'패스트캠퍼스 > 패캠 오프라인' 카테고리의 다른 글

자바스크립트 1주차  (0) 2020.04.25
html,css 3주차  (0) 2020.04.06
html,css 2주차  (0) 2020.03.28
html, css 1주차  (0) 2020.03.22

관련글 더보기

댓글 영역