미디어 쿼리
- 반응형 웹 디자인의 핵심 부분
- 뷰포트(브라우저 창)의 크기에 따라 서로 다른 조판을 생성할 수 있음
미디어 쿼리 적용법
- 1 <head> 태그 안에 <link> 삽입 → media 속성을 통해 조건을 지정 + 조건에 만족할 때만 해당 CSS 파일을 불러옴
<link href="css파일이름.css" media="screen and (min-width: 400px) and (max-width: 1000px)" rel="stylesheet">- 2 <head> 태그 안에 <style> 태그를 열어 미디어 쿼리 작성
<style type="text/css" media="screen and (min-width: 400px) and (max-width: 1000px)">
/* 여기 css를 작성합니다. */
</style>- 3 CSS 파일 혹은 태그 안에서 직접 미디어 쿼리 작성
미디어 쿼리 구문
@media 미디어 타입 (조건(너비 및 높이)){
(CSS 입력하는 부분)
}
/* 예제 */
@media screen (max-width: 400px) {
body {
color: red;
}
}▶ 미디어 쿼리의 기본적인 구조
- 미디어 타입 : 코드가 어떤 미디어를 위한 것인지 브라우저에 알려줌
- 조건(너비 및 높이) : 지정한 창이나 너비의 높이를 기준으로 기준이 만족되면 스타일을 적용하고, 만족되지 않으면 적용 X
- CSS 입력하는 부분 : 조건문을 통과하고 미디어 타입이 올바른 경우 스타일이 적용
미디어 타입(Media Type)
- 다양한 타입이 있으나 실무에서 자주 쓰이는 타입은 all(모든 미디어 타입), print(프린터), screen(컴퓨터 화면) 정도이며 그중에서 도 screen이 대부분
- 화면을 출력하는 디스플레이어가 있는 미디어들은 대개 screen 타입에 속함
조건(너비 및 높이)
- 반응형 디자인을 만들기 위해 가장 많이 사용하는 기능은 뷰포트 너비이며, min-width와 max-width, width 등의 미디어 기능을 활용해 뷰포트가 특정 너비 이상 또는 이하인 경우 CSS를 적용할 수 있음
@media screen and (width: 600px) {
body {
color : red;
}
}- width 혹은 height 는 브라우저 창 크기에 사용할 수 있음 → min- 혹은 max- 접두사를 붙이게 되면 최소값인지 최대값인지 표시할 수 있음
/* 예시: 뷰포트가 400px보다 좁은 경우 색을 파란색으로 주기 */
@media screen and (max-width: 400px) {
body {
color: blue;
}
}
방향성
- 세로 모드인지 가로 모드인지 검사하여 CSS 스타일을 주고 싶은 경우 orientation으로 검사할 수 있음
/* 가로 모드인 경우 */
@media (orientation: landscape) {
body {
color: rebeccapurple;
}
}
복잡한 미디어 쿼리
- 미디어 쿼리를 결합하거나, 쿼리 목록을 만들거나 하는 식으로 미디어 쿼리를 좀 더 깊이 사용할 수 있음
논리곱(and) 미디어 쿼리
- and를 이용해 미디어 기능을 합칠 수 있음
/* 뷰포트 너바가 최소 400px 이상이고 가로 모드인 경우에만 적용 */
@media screen and (min-width: 400px) and (orientation: landscape) {
body {
color: blue;
}
}
논리합(or) 미디어 쿼리
- 콤마로 분리한다면 미디어 쿼리중 해당 조건 어느 하나를 만족시킬 때 CSS 스타일을 적용 시킬 수 있음
/* 뷰포트 넓이기 600px 이상이거나 장치가 가로 방향인 경우 */
@media screen and (min-width: 600px), screen and (orientation: landscape) {
body {
color: blue;
}
}
부정(not) 미디어 쿼리
not 연산자를 사용하게 되면 미디어 쿼리의 의미를 반대로 적용 시킴
/* 방향이 세로인 경우에만 적용 */
@media not all and (orientation: landscape) {
body {
color: blue;
}
}