CSS3 미디어 쿼리
프로그래밍/반응형웹 2017. 7. 24. 17:34- 문법 : [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;}