URL:https://koreanhamster.github.io/vending-machine/
소스코드:https://github.com/Koreanhamster/vending-machine
기술스택
- HTML
- CSS
구현기능
- flex와 grid를 적극적으로 사용하여 유지보수에 용이할 수 있도록 구현
- 반응형 디자인으로 화면 너비가 줄어들 때 섹션들이 세로축으로 정렬될 수 있도록 구현
- IR기법을 사용하여 웹접근성을 높임
배운점
- 꼭 필요하지 않은 경우 각 컨텐츠들에 고정 height나 width값은 주지 않았다. 유지보수에 능한 웹 구현 경험치를 쌓았다.
- IR기법을 사용해보며 너무 길지 않으면서 동시에 명료하고 구체적으로 필요한 정보를 스크린리더 사용자에게 전달하는 연습을 했다.
- 마크업을 끝내고 CSS 스타일링을 시작할 때, 자꾸 그 전과는 다르게 삐그덕대는곳이 많아 의아했는데 알고보니 내가 새로운 reset.css파일을 사용했기 때문이었다. 내가 사용하는 reset.css파일에 대한 정확한 이해가 없이 그냥 사용한 것에 대한 부작용이었다. 이 속성을 왜 reset하는지 정확하게 파악을 하고있는게 중요함을 깨달았다.(본래 요소의 속성 또한 정확히 할고있어야 한다.)
추가사항
- JS기능을 추가할 예정이다.
'Front-End Developer > Project' 카테고리의 다른 글
Pure CSS로 포토샵의 역사 페이지 구현하기 (2) | 2022.04.27 |
---|---|
오직 Tailwind만을 사용해서 이력서 만들어보기 challenge (0) | 2022.04.27 |
미디어쿼리를 이용한 반응형 웹 구현하기 (0) | 2022.04.21 |
위니브 로그인페이지 클론코딩(멋쟁이사자처럼 지원과제) (0) | 2022.04.14 |
CSS로 캐릭터 만들기 - 멋사 WEB 캐릭터경진대회 우수상 수상 (0) | 2022.04.13 |