Vending machine(콜라 자판기 만들기)

 

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기능을 추가할 예정이다.