Instagram Desktop UI 클론 만들기

오늘은 Instagram 데스크톱 UI 클론을 만들어보았다.

반응형으로 만들기 위해 모바일UI 클론에 HTML과 데스크톱CSS를 추가했다.

스스로 만들어나갈 때는 잘만들어지는 것 같았는데, 튜터님이 만드신 클론의 코드를 보니 생각보다 새롭게 추가되거나 바꿔주어야할 부분들이 많았다.
TIL을 작성하고 있는 지금 시점에선 아직 미완성인데, 꼭 코드 하나하나 다 뜯어보고 잘 계획이다.

현재 작성 중 가장 어려움을 겪고 있는 부분은 다음과 같다.
1. 튜터님은 1개의 HTML 파일과 2개의 CSS파일을 만들었다. CSS파일은 모바일용, 데스크탑용으로 나뉜다.
HTML head에 width가 860px이 넘어가면 데스크탑용으로 적용될 수 있도록 해두었는데,
만약 css파일을 하나로 해서 만든다면? 데스크탑용으로 적용되어야 하는 모든 부분에 media를 붙혀서 작성해야하는지가 궁금하다.
2. 모바일 UI 클론을 만들었을 때는 전체를 묶는 container의 max-width를 px값으로 고정해두었는데, 반응형으로 데스크톱과 모바일 모두 가능하게 한 오늘 프로젝트에선 모바일 UI 클론 css의 container의 max-width 값이 없었다.
width가 860px이 넘어가면 자동으로 바뀌기 때문에 max-width값이 설정이 안되있는 것인가?
그렇지만 자녀div들의 %때문에 width가 규격화되어있어야 하지않는가?

지금 현재 진행상황에선 위 2가지가 해결되지 않은 궁금증이자 문제이며 코드를 뜯어가며 해결될 수 있으면 좋겠다.
꼭 해결하여 추후에 기록에 남기도록 하겠다.