8/16 멀고도 험하다 반응형!

그른손·2023년 8월 16일
0


히히히히 반응한다 반응해

이거 만들고 기분좋았는데 의문점이 몇 가지 생겨서 정리해봄

1. 모바일로 접근할 때 어떻게 보여주는가? => 모바일 도메인이 따로 있음 (m.naver.com) 유튜브도 그렇고 다른 사이트들도 대부분 그럼
서버 따로 띄워서 (맞나?) 모바일로 접근할 때에는 (아마 window.innerWidth같은걸로 판단해서) 모바일이면 m.naver.com 도메인으로 날려버리는 식으로 하지 않을까?
그럼 pc환경에서는 반응형 안한건가? (안한듯...? 아닌가? 맞나? 안되는 것 같음)
왜 안했을까? => 반응형 할거면 모든 페이지에 모든 화면크기에 대한 화면 구성을 일일히 다 준비해야 하는데 이미 만들어진 수십개의 페이지 (메인, 블로그, 메일, 페이 등등)에 적용하려면 할당해야하는 리소스가 너무 크고... 그럼 앞으로 만들어질 페이지에도 반응형 적용해야 하는데 그럼 더 빡세지는거고... 드는 수고에 비해서 필요성이 적어서 그런 게 아닐까?

1-1. 근데 왜 모바일웹에는 반응형 적용돼있음? (메인페이지 기준) => 엄... 갤럭시폴드처럼 화면비율 괴상한것들도 있으니까 그런 거 아닐까?

  1. 보통 가로 너비에 반응해서 화면 구성이 바뀌도록 만들어져 있는데, 왜 세로 길이의 변화에는 반응하게 안만들지? => 엄... 세로비율까지 고려할거면 각각의 가로세로비마다 또 달라져야할텐데 그거 만들다 죽을 거 같고... 모바일이든 PC든 기본적으로 '마우스 휠이나 손가락으로 위에서 아래로 스크롤하도록' 만들어져있으니 세로에 반응하게 만들 필요성은 별로 없는듯? 횡이동의 경우 모바일에서는 스와이프로 편하게 할 수 있지만 PC에선 귀찮으니까.. 그래서 가로 너비를 기준으로 반응형을 구성하는 게 아닐까

3.포트폴리오를 반응형으로 구성할 수 있을까? => 그러게 그게 될까? 가능할까? 일단 더 배워봐야 알겠지만 좀 어지러운 건 '모든 페이지마다 각각의 화면 크기에 대한 서로 다른 화면 구성이 준비되어야 한다'는 점인 것 같음
플렉스 복습하고 아직 그리드는 시작도 안했는데 반응형으로 포폴 만들겠다고 하다가 변사체로 발견될지도 모르는 일임
그래도 반응형은 첫 단추부터 적용해두는게 나중에 편하다고는 하니까... 일단 힘내보자

아 여기서 끝낼 게 아니라 오늘 배운것들 좀 정리하자면

  • flex-flow
  • 미디어 쿼리 (@media)
  • 메인축과 수직축 (main axis & cross axis) justify랑 align은 절대 '가로세로정렬'이 아니다! '메인축을 기준으로' 혹은 '수직축을 기준으로' 정렬한다!
  • align-content : 여러 행 정렬
  • flex, grow shrink basis 개념 정리 : 처음 배울 때 졸지 말걸

내일이랑 모레는 아마 flex 실습 계속 할거같고 그 다음이 grid인데
어렵다
그래도 하다보면 되겠지

profile
프론트엔드 개발자

0개의 댓글