미디어 쿼리(media queries) 사용법과 속성

미디어쿼리(@media)를 사용하기전 체크사항

1. HTML5인지 확인합니다 ==> HTML 4.0 버전에서는 개발하기 힘듭니다.

2. <TABLE>이 하나라도 있는지 확인합니다 ==> TABLE가 존재할 경우 레이아웃이 깨집니다.

3. 개발 브라우저가 IE만 있을 경우 IE9 이상인지 확인합니다

==> 물론 IE8이하에서도 JS로 해결이 가능합니다만, 그래도 불안정하기 때문이죠.

4. 되도록 스크립트 코드는 <head>부분보다는 <body>끝에 작성합니다

==> 로딩 속도는 비슷하나, 체감 속도에서 많은 차이가 납니다.

미디어쿼리(@media)를 사용법

구조는 이렇습니다. (3가지 방법 중 하나를 선택해서 사용하시면 됩니다.)

@media를 미디어쿼리라고 합니다.

모두 스타일 시트 내부에 작성됩니다.

1) @media only all and (조건문) {실행문}

2) @media all and (조건문) {실행문}

3) @media (조건문) {실행문}

조건문 안에는 최소 해상도 (min-width)와 최대 해상도 (max-width)를 설정합니다.

예제>

미디어쿼리(@media)의 속성

출처

시간을 사진하다