일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |
- 자바스크립트
- frontend
- 멋사
- CSS
- useState
- 메소드체이닝
- 내일배움카드
- 국비지원
- VAR
- 반복문
- 멋쟁이사자처럼
- 웹개발
- 제주코딩베이스캠프
- SS
- 프론트엔드
- 리액트
- 코딩
- 이벤트루프
- likelion
- react
- JavaScript
- Let
- 비동기
- 네트워크
- 타입스크립트
- 개발자
- for문
- 배열
- 화살표함수
- array
- Today
- Total
Ch.Covelope
자판기 만들기 과제. 본문
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
소지금 : 25,000원
chry8822.github.io
chry8822 - Overview
‘Keep true to the dreams of thy youth’ . chry8822 has 12 repositories available. Follow their code on GitHub.
github.com
'private' 카테고리의 다른 글
오늘의집 조은님의 Front-end(프론트엔드) 특강 수업! (0) | 2021.11.29 |
---|---|
tailwindcss (테일윈드) 를 사용해서 이력서를 만들어 보자! (0) | 2021.11.24 |
멋,사 과제 로그인 모달창 만들기.<css 체크박스 디자인 바꾸기> (0) | 2021.11.14 |
CSS : flex 노트정리. (0) | 2021.11.09 |
간단한 유튜브 <Youtube> 페이지 클론코딩 하기! (0) | 2021.11.09 |