| 외부 CSS 파일로 정의하기 |
<link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">
예) <link rel="stylesheet" media="print" href="css/print.css">
<link href="/css/screen.css" type="text/css" rel="stylesheet" media="screen">
<link rel="stylesheet" media="screen and (max-width:768px)" href="/css/tablet.css">
@import url(css 파일 경로) 미디어 쿼리 조건;
예) @import url("css/tablet.css") screen and (min-width:321px) and (max-width:768px);
| 웹 문서에서 직접 정의하기 |
<style media="미디어 쿼리 조건">
스타일 규칙들
</style>
<style media="screen and (max-width:320px)">
body {
background-color: orange;
}
</style>
<style>
@media 미디어 쿼리 조건 {
스타일 규칙들
}
</style>
<style>
@media screen and *(max-width:320px) {
body {
background-color: orange;
}
}
</style>
| 미디어 쿼리 검사기 |
1. 사이트 접속 (strongegg.com)
2. [F12] 눌러 개발자 도구 실행
3. 개발자 도구 창의 맨 왼쪽 윗부분에 있는 디바이스 모드 아이콘 (
) 클릭 : toggle device toolbar(Ctrl+Shift+M)
4. 디바이스 도구 막대 오른쪽 끝에 있는 More options 아이콘(
) 클릭 > [Show media queries]를 선택
5. 개발자 도구에서 현재 사이트의 스타일 시트 파일을 분석해 미디어 쿼리를 막대 형식으로 표시
6. 미디어 쿼리 막대에서 짙은 색으로 표시된 수직 선이 중단점이고 중단점과 중단점 사이의 연한 색 부분을 클릭하면 미디어 쿼리 조건에 따라 사이트가 어떻게 바뀌는지 확인할 수 있다.
7. 미디어 쿼리 막대에서 소스를 보고 싶은 영역을 마우스 오른쪽 버튼을 클릭한 후 [Reveal in source code]를 선택하면 해당 영역을 정의한 미디어 쿼리가 어느 파일에 있는지 표시된다. 하나의 파일에서만 사용했을 수도 있고 여러개의 파일에서 사용했을 수도 있다. 파일 목록 중에서 원하는 파일을 선택
8. 개발자 도구 창의 [Sources]탭이 자동으로 열리면서 해당 미디어 쿼리 구문이 표시된다.
[출처 : 프런트엔드 웹 디자인 입문 p.111~p.117]