Responsive web page : Hello WM
2021.07.19 ~ 2021.08.09
HTML, Sass, JavaScript
PREVIEW
[후기]
생각보다 오래 걸렸다... 다른 강의 들으면서 틈틈히 하려고 했는데 하기 싫을 땐 그냥 건너뛰기도 하고 그래서 그런 듯. 이번 프로젝트 하면서 느낀 건, HTML, CSS, JavsScript 모두 연결고리이기 때문에 하나라도 어긋나면 HTML부터 다시 가서 코드를 짜야한다는 것. 아무 것도 없는 상태에서 디자인을 구상하고 실제로 적용해보고 스타일을 입히고, 자바스크립트까지 적용시키는 건 생각보다 오래 걸렸다. HTML 골격을 잡을 때부터 조금 더 철저하게 계획을 세워가며 해야겠다고 깨달은 이번 프로젝트.
조금씩 React 강의를 들으며 배우고 있는 중인데 왜 바닐라 자바스크립트만으로는 보수가 어려운 지 더욱 더 와 닿았다. React는 컴포넌트를 하나의 덩어리로 묶기 때문에 하나의 코드를 쭈욱 나열하는 바닐라 자바스크립트보다 편하지 않을까 싶은 거. 강의를 듣고 이를 따라하는 것과 배운 것을 바탕으로 내가 원하는 대로 코드를 작성하는 건 역시 달랐고, 구글링 해보고 유튜브 동영상 찾아보며 혼자서 만족하는 정도는 완성-!
사실 section releases 부분에 pagination을 원하는 만큼 결과로 얻어내진 못했다... Infinity carousel을 구현까진 했으나, 이를 하나 하나 연결해서 하는 것까진 이뤄내지 못함... 공부를 더 하다보면 이에 대한 코드도 짤 수 있지 않을까 라며 미래의 나에게 이 과제를 남겨본다.
조금 더 정교하게 프로젝트를 마무리하려면 큰 용량을 차지하는 이미지를 해상도를 낮춰서 그에 맞게 support까지 하는 것이 진정한 반응형 웹사이트겠지만, 스크린 크기에 따라 배치를 달리 하는 것까지 한 것만으로 일단은 만족한다.
마지막까지 어떻게 원하는 만큼 구현할 수 있을까 고민했던 섹션.
사진출처 : 이 프로젝트에 사용하는 B1A4, OHMYGIRL, ONF의 사진 모두 각각 그룹의 공식 트위터,
그리고 WM 엔터테인먼트 공식 트위터에서 가져왔습니다.
'Front End > Toy Project' 카테고리의 다른 글
VanillaJS Momentum (0) | 2021.10.04 |
---|---|
클론 트위터 코딩 : Clone Twitter (0) | 2021.09.20 |
[Hello WM] Media query (0) | 2021.08.06 |
[Hello WM] Section Artists (0) | 2021.07.21 |
[Hello WM] Section About (0) | 2021.07.20 |
댓글