MediaQuery 실습

게스트하우스 웹 페이지를 반응형으로 만들어보자.

반응형 웹페이지는 모바일부터 만드는게 정석이다. 가장 작은사이즈부터 만들어가고, 거기서 확장하는게 훨씬 쉽다.

이 두 페이지를 만들 것임.

모바일부터 시작하자! 개발자 도구에서 확인할 수 있다.

아래 파란 동그라미를 클릭하면 각 기기의 뷰포인트에서 어떻게 보일지를 알려준다.

우선 iPhone SE크기에 맞춰 제작했다.

이렇게 모바일까지 만들었고, 이걸 반응형으로 데스크탑 버전으로 만들어보자.

가장 작은 데스크탑 width인 768px기준으로 레이아웃이 바뀌게 해보자.

위 모바일버전 웹을

이 데스크탑버전과의 차이부분만 cs를 입혀주면 된다.

차이점을 적을때… 어떤 요소들은 변경점을 작성했지만 전 요소와 양립가능한 경우가 있다. 이경우에는 전 요소를 해제시켜줘야 한다!

이때는 해제할 속성 auto를 명시해주면 된다.