12 TIL(?)

김성연·2021년 12월 27일
0

@ I Learned

목록 보기
14/18

오산? 경기도오사..ㄴ

오늘은 지난번, 인스타그램 모바일 버전의 연장선으로, 화면이 커졌을 때, 데스크탑 버전으로 변경되는 페이지로 만드는 것을 하였다. 지난주 금요일날 미리 공지도 됬고, 자료들도 주말에 잠깐잠깐 찾아보면서, 쉽게 할 것이라 생각했는데... 이건 경기도오사 오산이였다.

내 생각,

"미디어쿼리를 사용하면서, 나는 min-width를 사용하고, 원래의 720px 보다 커지면 보일 css를 작성하고, display: none처리해뒀다가, 나중에 block처리해주고, 원래것을 none처리 해주면 되겠다!"

라고 생각하며 신나게 원래의 div, 커졌을 때의 div를 생각하며 코드를 작성해나갔다.

처음부터 전체크기만큼, header부분이 커지지 않는 문제가 발생했다.

근데 일단 넘겼다. 다른 부분들이 크기가 커지면 적용이 잘됬거든..(이게문제였을까..?)화면이 커졌을 때 수정되야할 다른 부분들은 잘 적용이 되서 나는 header부분만 변경하면 될 것이라고 생각했다. 아니 header부분만 수정하면 되는게 맞지.

현재의 조건에서 기준이되는 body의 max-width를 삭제도해보고, 수정도해보고, header부분을 전체적으로 감싸고 있는 header_content부분도 직접 영역도 설정해보고, 코드 제출 시간인 오후 4시까지 이부분만 해결해 보겠다고 3시간을 헤멨다. 팀원 분들한테도 물어보았다.

내가 내린 결론은, 전체적으로 width를 %를 쓰는 상황이였기에, body부분에서 max-width를 지워야한다고 생각했다.(그리고 나중에 튜터님께 물어봤을 때에도 지워야한다고 했다.) 그래서 나는 미디어 쿼리 안에서 크기가 커지면, body의 css를 새로 작성했는데, 왜 이게 안되는건지 모르겠다. 튜터님이 일부분 수정해주신 코드와 이전 내 코드를 비교해보면, 눈크게뜨고 봐도 max-width를 모바일에서도, 데스크탑에서도 공통되게 지워버린거 밖에 보이질 않는다. 뭐가 문제일까, 튜터님 잡고 물어보고싶은데, 다른사람들도 있어서 그럴 수 도 없고, 검색은 어떤 키워드로 해야할지 어렵다. 구글링을 잘하고싶다..^^

내일부터는 새로운 팀을 배정받고, 진짜 팀프로젝트가 시작된다.

flask를 이용한 정말 instagram클론 코딩을 한다고하는데, 이러다가 팀에 피해를 주게될 것 같아 걱정이다... 오늘 어떻게든 이 과제를 끝마치고 싶었는데, 부족한 내 자신이 아쉽기만하다.

0개의 댓글