CSS3 미디어 쿼리

프로그래밍/반응형웹 2017. 7. 24. 17:34
CSS3 미디어 쿼리

  • 문법 : [only|not]? 미디어 타입 and (속성 : 값)


@media screen (max-width:799px){ }

@media screen (min-width:800px){ }


위 쿼리는 현재 접속한 디바이스의 해상도 width에 따라 CSS를 선택적으로 적용하라는 의미이다.


위 쿼리에서 width는 아래와 같이 min과 max값을 갖는 범위로 이해할 수 있다.

------------ width -------------

min<---------------------->max


max-width:799px 이라는 의미는 max 에 799px 을 대입하면 이해하기 쉽다

min<---------------------->799px

즉, 0 ~ 799px 해상도에서 적용하라는 의미이다.


마찬가지로, min-width:800px 또한 min 값에 800px 를 대입하면

800px<-------------------->max

즉, 800px ~ ? 해상도에서 적용하라는 의미이다.



  • 미디어 쿼리는 CSS 파일 로딩하는 부분, 내부 <style> 태그내에서 사용할 수 있다.

1) 파일을 로딩하는 부분

<link rel="stylesheet" media="print and (min-width:25cm)" href="print.css">

=> 미디어 타입이 print 이고 화면 가로 해상도가 25cm 이상인 경우 print.css 파일을 로딩하라는 의미


2) <style> 태그내

@media screen and (min-width:400px) and (max-width:700px){ }



  • 미디어 쿼리에서 사용되는 속성

min-width, max-width

min-height, max-height

device-width, device-height

orientation(portrait|landscape)

aspect-ratio, device-aspect-ratio

color

resolution


가장 많이 사용하는 width 경계치

320px : 아이폰

768px : 아이패드, 일부 안드로이드 태블릿

1024px : 일부 태블릿, 거의 모든 넷북, 데스크탑



  • CSS 전처리 언어

LESS


1) 변수처리

@width:100px;

header{width:@width;}

=> header{width:100px;}

[@width 변수에 100px 값을 선언하면 @width 변수가 사용된 곳은 @width 변수의 값으로 치환된다.]


2) 믹신(Mixins)

-> 믹신은 일종의 함수와 같다

.rwd_width(@wd:100px){ width:@wd; }

header{ .rwd_width}

=> header{ width:100px}

article{ .rwd_width(200px)}

=> article{ width:200px}

[ .rwd_width 를 선언해 놓은 후 .rwd_width 가 사용된 곳은 .rwd_width에서 반환되는 값으로 치환된다.

article에서는 .rwd_width(200px) 처럼 .rwd_width의 @wd 값을 재설정하였다.]


3) 중첩규칙

header{

h1{font-size:1.4em;}

h2{font-size:1.2em;}

}

=> 

header h1{font-size:1.4em;}

header h2{font-size:1.2em;}



참조 : https://sir.kr/pb_lecture/167?page=7

: