CSS media-query

화면 크기에 따라 동적으로 디자인을 변경하는 방법을 반응형 페이지라고 한다.

viewport의 개념을 이해해야 하는데 viewport 핵심은 보고있는 페이지의 크기이다.

pc는 사용자가 보고 있는 웹브라우저 크기를 조절할 수 있으며 mobile은 웹브라우저의 크기를 변경하기가 어렵다. 

자세한 설명은 다음 글을 참조(https://developer.mozilla.org/en-US/docs/Web/CSS/Viewport_concepts)

 

화면에 나타나는 크기에 따라서 css를 달리 쓰고 싶을 때에 @media를 사용한다. 이 때, html 파일에 다음과 같은 종류의 코드를 head에 적어야 된다.(<meta name="viewport" content="width=device-width, initial-scale=1" >)

 

@media screen and (min-width: 1280px) and (max-width: 1920px){

  적용할 css 코드

}

 

이 코드는 가로의 viewport 길이가 1280px 이상 1920px 이하인 경우에 적어놓은 css를 적용하라는 뜻이다. 

핸드폰, 태블릿, pc 세 개로 구분하여 미디어 쿼리를 작성하는 것처럼 임의로 구간을 나누어서 적용하면 된다.