화면의 크기나 환경에 따라 웹사이트를 변경하는 기술-미디어 쿼리

미디어 쿼리의 기본 문법

미디어 쿼리를 작성할 때에는 필요에따라 미디어 유형과 and 또는 ,콤마 논리 연산자로 조건을 적용할 수 있다.

@media [only 또는 not][미디어 유형][and 또는 ,콤마](조건문){실행문}

주:미디어 쿼리 구문은 대,소문자를 구별하지 않는다.

@media

미디어 쿼리 문법의 시작을 알리는 부분이다.

[only 또는 not]

미디어 유형

[and 또는 ,콤마]

(조건문)

{실행문}

 

미디어 쿼리를 적용하려면?-링크 방식

미디어 쿼리를 적용하려면 CSS 파일 내에 미디어 쿼리를 작성해서 <link></link> 태그로 CSS 파일을 연결하여 적용해야한다.미디어 쿼리를 적용하는 방법은 여러 가지가 있지만 현재는 이 방식이 가장 많이 사용되는 방식 중 하나이다.

<link rel="stylesheet" href="mediaqueries.css">

이 방식은 HTML파일과 CSS 파일을 별도로 관리하므로 불러오는 속도도 빠르고 관리 면에서도 효율적이다.