오늘은 지난번, 인스타그램 모바일 버전의 연장선으로, 화면이 커졌을 때, 데스크탑 버전으로 변경되는 페이지로 만드는 것을 하였다. 지난주 금요일날 미리 공지도 됬고, 자료들도 주말에 잠깐잠깐 찾아보면서, 쉽게 할 것이라 생각했는데... 이건 경기도오사 오산이였다.
"미디어쿼리를 사용하면서, 나는 min-width를 사용하고, 원래의 720px 보다 커지면 보일 css를 작성하고, display: none처리해뒀다가, 나중에 block처리해주고, 원래것을 none처리 해주면 되겠다!"
라고 생각하며 신나게 원래의 div, 커졌을 때의 div를 생각하며 코드를 작성해나갔다.
근데 일단 넘겼다. 다른 부분들이 크기가 커지면 적용이 잘됬거든..(이게문제였을까..?)화면이 커졌을 때 수정되야할 다른 부분들은 잘 적용이 되서 나는 header부분만 변경하면 될 것이라고 생각했다. 아니 header부분만 수정하면 되는게 맞지.
현재의 조건에서 기준이되는 body의 max-width를 삭제도해보고, 수정도해보고, header부분을 전체적으로 감싸고 있는 header_content부분도 직접 영역도 설정해보고, 코드 제출 시간인 오후 4시까지 이부분만 해결해 보겠다고 3시간을 헤멨다. 팀원 분들한테도 물어보았다.
내가 내린 결론은, 전체적으로 width를 %를 쓰는 상황이였기에, body부분에서 max-width를 지워야한다고 생각했다.(그리고 나중에 튜터님께 물어봤을 때에도 지워야한다고 했다.) 그래서 나는 미디어 쿼리 안에서 크기가 커지면, body의 css를 새로 작성했는데, 왜 이게 안되는건지 모르겠다. 튜터님이 일부분 수정해주신 코드와 이전 내 코드를 비교해보면, 눈크게뜨고 봐도 max-width를 모바일에서도, 데스크탑에서도 공통되게 지워버린거 밖에 보이질 않는다. 뭐가 문제일까, 튜터님 잡고 물어보고싶은데, 다른사람들도 있어서 그럴 수 도 없고, 검색은 어떤 키워드로 해야할지 어렵다. 구글링을 잘하고싶다..^^
flask를 이용한 정말 instagram클론 코딩을 한다고하는데, 이러다가 팀에 피해를 주게될 것 같아 걱정이다... 오늘 어떻게든 이 과제를 끝마치고 싶었는데, 부족한 내 자신이 아쉽기만하다.