[Netflix] media query를 이용하여 반응형 페이지로 변경

결과

[ 홈 / TV / 영화 / 검색 ] 페이지를 반응형으로 변경하였다.

gh-pages를 활용하여 웹 사이트를 배포하였다.

 

---

계획

9월 26일까지 모든 페이지를 반응형으로 변경할 예정이다.

gh-pages를 사용해본 경험이 있어서 우선 gh-pages로 비교하면서 진행하고 최종적으로 netlify를 사용하여 배포할 예정이다.

 

---

느낀 점

아직 세부 페이지는 변경하지 못하였는데 모니터로 보이는 화면은 괜찮아 보였는데, 스마트폰 화면으로 보니까 배치도 망가지고 글자도 겹치는 문제가 발생하였다. 

미디어 쿼리와 css를 변경해가며 페이지를 수정하였다.

'처음엔 막막하게 어떻게 변경하지?'라는 생각을 가지고 있었는데 역시 하면 된다는 걸 느꼈다.

페이지를 반응형으로 변경하는 과정이 계속 비교하면서 노가다하는 것이 유일한 방법인지는 모르겠으나 현재로선 나에게 최선의 방법인 것 같다. 하다 보니 어느 정도 감도 잡히게 되어서 점점 속도가 났던 것 같다.

아직 세부 페이지는 변경하지 못하였는데 스마트폰 화면으로 보니 구조를 다 뜯어고쳐야 할 것 같다.

 

---

코드

https://github.com/ssc9811/scflix-hook

GitHub - ssc9811/scflix-hook: TMDB API를 활용하여 Netflix를 클론한 나만의 Scflix

 

---

웹 페이지

https://ssc9811.github.io/scflix-hook/

React App