CSS day16

반응형 웹

미디어 쿼리

반응형 웹

최근 전자기기의 다양성으로 인해 PC와 테블릿, 모바일 등등 여러 크기의 화면에서 웹 문서를 보기위해서는 그때마다 웹 문서를 각각 제작해야하는 수고스러움이 있을 수 있다. 그러나 이 점을 고려하여 전자기기의 화면 크기에 반응하여 웹 문서 크기를 자동 바뀌는 반응형 웹문서가 있다.

반응형 웹 디자인이란 PC와 테블릿, 모바일 등 브라우저 환경이 다양하게 바뀌는데 그때마다 웹 사이트의 화면에 맞게 재배치하고 각 요소의 표시방법만 바꾸어 웹문서를 구현하는 것이다.

반응형 웹 디자인을 위해서는 먼저 뷰포트의 개념을 알아야한다. 예로 PC에 맞게 제작한 웹 문서를 모바일 기기에서 접속해서 보면 모든 내용이 작게 표시된다. 그 이유는 PC 화면과 모바일 화면에서 표시되는 픽셀 차이 때문으로 여기서 뷰포트를 지정하면 접속한 기기의 화면에 맞추어 확대하거나 축소해서 표시가 가능하다. 이때 뷰포트란 스마트폰 화면에서 실제 내용이 표시되는 영역이라 할 수 있다.

미디어 쿼리

미디어 쿼리는 지정된 해상에 따라 다른 스타일 시트를 적용해주는 방법이다.

 @media 매체유형 and(max-width: 해상도) and(min-width: 해상도){
        적용할 css 문법
 }

해상도의 최소 최대를 지정할 수 있고 그 범위 내에서 CSS 문법을 적용한다.

스마트폰 : 기본적으로 미디어 쿼리를 사용하지 않고 기본 CSS로 작성한다. 스마트폰의 가로방향 보기를 고려한다면 min-width의 세로와 가로를 portrait 320px, landscape 480px로 지정한다.
태블릿 : 세로 크기가 768px 이상, 가로크기 1024px 이상으로 지정한다.
데스크톱 : 화면 크기 1024px이상으로 지정한다.

body{
background-color: gold;
}
@media screen and (min-width: 768px)and (max-width: 1024px){
body{background-color: deepskyblue;}
}
@media screen and (min-width: 320px) and (max-width: 768px){
body{background-color: deeppink;}
}
@media screen and (max-width: 320px){
body{background-color: palegoldenrod;}
}