🥋

과제(벤딩머신-미디어 쿼리)

 
미디어 쿼리를 활용하여 반응형 페이지를 작성하는 과제입니다. 아래 디자인과 피그마 링크를 참고하여 페이지를 구성해 보세요.

1. 디자인

PC 화면PC 화면
PC 화면
 
모바일 화면모바일 화면
모바일 화면
 

2. 피그마 링크

 

 
🤫
전체 코드
 

3. 요구사항 명세(javascript 부분)

💡
아직 JS를 나간 상태가 아니기 때문에 아래 부분은 참고만 해주세요. 나중에는 이런 부분까지 Front-end 개발자가 구현해야 합니다.
  1. 판매할 음료에 대한 데이터는 따로 분리되어 있어야 합니다. (혹은 API로 받아야 합니다.)
  1. 돈의 입금과 음료의 선택 시점은 자유롭지만 돈이 모자라면 음료가 나와서는 안됩니다.
  1. 거스름돈이 나와야 합니다.
  1. 버튼을 누르면 상품이 1개씩 추가됩니다. (일반적인 자판기와 동일)