자판기 만들기 과제.

 

---

 

css, html 로 자판기 만들기!

 

 

---

 

 

 

 

 

 이번 과제는 다른 회사의 코딩 테스트로 나온 과제라고 알고 있는데 회사 코테에서는 자바스크립트 (Js)까지 함께 구현해야 하지만 아직 배우지 않은 부분이고 자바스크립트 코드를 봤는데 하나도 이해가 가지 않았다... 그래서 이번 과제는 html. css를 이용해서 ui를 만들어보는 과제였고 함께 코딩하는 방식으로 진행되었다.

 

작업은 화면 구성 요소들 중에 중복되는 부분들을 다 만든 게 아니고 모듈처럼 하나씩만 만들고 나중에 필요한 부분을 복사해서 사용하고 배치들은 flex와 float으로 하였고 약간의 미디어 쿼리를 사용해서 반응형으로 만들어 주었다.

 

딱히 어려운 부분은 없었는데 피그마에서 최소 폰트로 잡힌 게 9px 이였는데 크롬에서는 최소 폰트가 있어서 적용이 안되어서 처음에는 코딩이 잘못됐거나 내가 뭔가를 잘못 쓴 줄 알았는데 최소 폰트가 있었던 거였다..(이번에 처음 알았음)

그래서 firefox 에서 열어보면 잘 나온다.

 

마지막으로 미디어 쿼리에서 max-width와 mix-width는 써봤는데 이번에 -webkit-min-device-pixel-ratio:2이라는 속성을 처음 써봤는데 최소 1px 당 2개의 화소가 들어가게 하는 속성이다. 아마 레티나 디스플레이에 대응하기 위해서 사용되는 거 같다.

 

 

 

 

 

기본 과제에서 살짝 조금더 만져서 거스름돈 , 입금, 획득 버튼 클릭시 좀더 클릭감 있게 가상요소를 사용해서 스타일을 주었고 품절 상품 클릭시 빨간 보더로 나오게 변경해 주었다.

 

 

 

완성된 링크!

 

https://chry8822.github.io/BrushUp-Study/VendingMC/index.html

ColaCola

 

 

 

 

---

 

 

 

 

 

https://github.com/chry8822

chry8822 - Overview