[CSS3]Media Query(반응형 웹)

Front-end/CSS

윤민_ 2022. 3. 27. 16:51

🤔Media Query란?

Media Query는 반응형 웹(Responsive Web)을 만들기 위해 반드시 알아야 하는 선언이다.

우리는 웹 브라우저를 이용할 때 데스크톱, 태블릿, 스마트폰 등

서로 다른 화면 사이즈의 디바이스를 통해 웹 브라우저를 이용한다.

이때 브라우저에 접속한 디바이스에 화면 크기에 맞게

CSS가 적용되는 것을 바로 반응형 웹이라 할 수 있다.

우리는 반응형 웹을 만들기 위해 2가지 조건이 충족되어야 한다.

1. viewportmeta

(HTML meta tag)

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=dvice-width" />
  </head>
</html>

2. mediaquery

(CSS media query 문)

@media screen and(min-witdh: 765px){
 /* Where all the magic happens... */
}

내가 보고 있는 화면이

몇 px이상일 때(최대 사이즈) = max-width

몇 px이하일 때(최소 사이즈) = min-width

일때 해당되는 화면을 보여주게 된다.

제가 좋아하는 공간이 선한 영향력으로 가득 차면 좋겠습니다.🙏🏼