CSS_Media Query

오늘은 Media Query에 대해서 알아보도록 하겠습니다.

미디어쿼리란?

핸드폰에서도 웹페이지를 볼 수 있게되면서 반응형 웹사이트가 생겨나고 있습니다.

이에 따라 디바이스의 크기에 따라 화면에 맞게 웹페이지를 보여주는 것을 의미합니다.

그럼 어떻게 사용하는지 코딩을 통해 알아보도록 하겠습니다.

우선 핸드폰에 맞는 웹을 만들기 위해선 <head>안에 <meta> 태그를 넣어주어야 합니다.

<meta name="viewport" content="width=device-width, Initial-scale=1.0">

그런다음 코드를 짜야 합니다.

max-width:600px 라는 속성의 의미는 최대 폭이 600일때까지 바탕색을 green으로 하겠다는 의미입니다.

cascading에 의해서 두개가 겹치게 됩니다.

max-width:600px 와 max-width:500px가...

둘중에 어떤게 우선순위가 높을까요...??

아래에 코딩된 것이 우선순위가 더 높습니다.

따라서 500 이하일때는 red가, 500~600사이엔 green색이 표시되게 됩니다.

그리고 min-width:601 은

최소폭이 601일때까지 파란색, 그러니까 601이상일때는 파란색을 나타나게 됩니다.

아래 결과화면 보시겠습니다.

ssorrychoi's DEVELOP