10강 반응형 웹사이트 만들기 (유데미 강의, CSS완벽 가이드, 맥스 선생님 강의)

모바일 기기는 많은 픽셀이 작은 기기에 포함되기 때문에 기존의 브라우저에서 96px 을 1inch로 적용하는 계산식에 맞지 않게된다 (모니터에서는 잘 맞다)

그래서 실제 모바일 기기의 픽셀을 pixel ratio라고 부르는 비율을 참고해서 브라우저에서 실제 크기가 아닌 비율만큼 작아진 픽셀로 인식하게 하는 방법을 취한다

 

이때 실제 기기의 화면 크기를 '하드웨어 픽셀' 이라고 하며 소프트웨어상 조정된 화면의 크기를 '소프트웨어 픽셀'이라고 한다

 

브라우저에서 소프트웨어 픽셀로 인식하게 하기 위해 뷰포트 메타태그를 넣어준다

 

반응형을 위한 두가지 도구

 

메타 태그를 통해 줌 최대 배율, 최소 배율, 초기 브라우저 배율, 배율 가능 유무등을 지정할 수 있다

 

요즘엔 모바일 버전을 먼저 만들고 데스크탑 버전을 만드는게 일반적이다

 

@media 쿼리를 이용해서 여러 디바이스에 맞는 css를 작성할 수 있다

미디어 쿼리를 if문으로 생각하면 편하다

미디어 쿼리 작성은 그 순서가 중요하다 (모바일 기기를 기준으로 만들고 데스크탑 버전을 미디어 쿼리로 설정한다면 min-width 를 사용하게 되는데 이때 min-width가 작은 순서대로 미디어 쿼리를 작성해야 한다)

 

미디어 쿼리는 css 코드 맨 밑에 작성하는 것이 관례이다

 

아래의 사이트에서 디바이스별 픽셀값을 알 수 있고 이를 통해 적절한 중단점을 구할 수 있다

https://www.mydevice.io/#compare-devices

 

 

강의,자료, 출처

https://www.udemy.com/course/css-the-complete-guide-incl-flexbox-grid-sass/