본문 바로가기

미디어 쿼리(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 (조건문) {실행문}

 

 

반응형