[17강] 미디어 쿼리로 반응형 웹 만들기

• 미디어 쿼리

⭐ 모바일용 페이지

: css만 변경해 모바일과 웹을 구분하는 것.

모바일일 때는 모바일용, PC일 때는 PC용 css에서 바꾼다.

❓ 구분 방법

❗ 웹 브라우저의 가로 크기, 뷰포트의 크기를 통해 일정 수 이상 작으면 모바일, 일정 픽셀보다 크면 PC로 구분한다.

🌕 모바일용 확인 방법

➰ F12 콘솔 창에서 Toggle device toolbar를 누르면 확인 가능하다! 모바일용 화면!
➰ 이것은 PC용 화면이다.
➰ 주로 iPhone 5/SE 크기를 사용한다. 가장 해상도가 작아 극악의 환경이기 때문에, 여기서 작동이 된다면 보통 다른 해상도에서도 잘 작동하기 때문이다.

❓ iPhone 5/SE의 해상도의 세로는 330px이고, 상자의 크기는 300px인데 가득 차지 않는 이유는 뭘까?
❗ 웹 사이트가 모바일을 지원하지 않으면 실제 해상도 크기와 상관없이 가로 크기를 무조건 980px로 생각하기 때문이다. 그래서 웹 페이지가 작게 보이는 문제들이 생긴다. 해결 방법은 다음 챕터에서!

⭐ 미디어 쿼리

<meta name="viewport" content="width=device-width, initial-scale=1">

: viewport 모바일을 지원하겠다, 모바일과 웹 사이트의 가로 크기를 일치시키겠다!
➰ 크기가 iPhone 사이즈에 맞게 변한 것을 확인할 수 있다.

@ media(max-width: 500px) {}

➰ media 쿼리로 인해 width가 500px 이하일 때는 width와 height이 150px로 덮어 씌워진다.
➰ 크기 뿐만 아니라 다른 속성, 모든 속성들이 다 사용 가능하다.
➰ PC에서도 적용가능한 모습을 확인할 수 있다. PC의 웹 브라우저 크기가 500px 이상이면 위에 적힌 css 코드의 스타일을 적용한다.
➰ 500px 이하이면 media에 적힌 코드의 스타일이 적용된다.

🍒 정리

오늘은 모바일로 나타날 웹 페이지의 모습을 꾸미는 방법에 대해 알아보았다. 생각해보니 한번도 모바일로 보이는 웹 페이지들은 어떻게 만들어졌을까 궁금해 해본 적이 없었다. 그냥 똑같은데 크기만 화면에 맞춰서 줄여졌겠지? 라고 생각을 했던 것 같은데. 그럼 웹 버전과 모바일 버전이 완전 다른 건 어떻게 만들어진 걸까 궁금해한 적이 없었다. 너무 당연하게 여겼다ㅠ
그럼 웹과 모바일이 완전 다르게 생긴 페이지들은 css를 media일 때와 아닐 때가 엄청 다르게 작성했다는 뜻이겠지? 비슷한 페이지들은 크기와 위치들만 조정했을 것이고, 다른 페이지들은 많은 작업들이 들어갔을 것 같다. 역시 페이지 하나 만드는 것도 쉽게 만들어지는 게 아닌 것 같다. 지금 쓰고 있는 이 velog 또한,,, 감사히 생각하며 써야겠다!