less than 1 minute read

2023.01.17(화)

반응형 웹 구현하기

  • 참고 웹사이트

스크린샷 2023-01-17 22 21 40

무신사의 해당 페이지는 반응형으로 되어있지 않아서 모바일 무신사 앱과 내 상상으로 조합해서 만들어보았다.

무작정 코드를 다 올리는 것 보다 App.js와 반응형으로 구현한 Body.js, Render.js 만 올려보려고 한다.

App.js

스크린샷 2023-01-17 22 24 27

Body.js

스크린샷 2023-01-17 22 25 42

Render.js

스크린샷 2023-01-17 22 24 51

최종 구현 웹 사이트

ezgif com-gif-maker (4)

비록 클론코딩이지만 혼자서 처음부터 웹사이트를 만들어보는 거라 시간이 조금 촉박했던 것 같다. 
6시간동안 나름의 결과물을 잘 만들어 낸 것 같다. 
반응형 웹을 구현하는데는 생각보다 매우 어렵지는 않았고 css나 컴포넌트를 다루는데 미숙해 시간을 많이 쏟았던 것 같다. 

< 추가해야  부분 >
button의 hover옵션이 아닌 onClick eventHandler를 사용해서 더 다양한 기능을 추가해보려고 한다. 

Comments