[CSS] 미디어쿼리(Media Query)의 기본사용법
1. 기본적인 사용방법
@media (조건문) { 실행코드 }<link rel="stylesheet" media="all and (조건)" href="desktop.css" >※ <link>를 사용하는 방법은 권장하지 않는다. (브라우져는 일단 모든 css를 내려받기때문에 size가 커진다)
※ 구문에는 논리연산자 및 각각의 특성들이 존재하지만, 사용빈도가 적다.
<link rel="stylesheet" href="/board/css/mediaquery.css">※ 미디어 쿼리 구분을 따로 빼놓은 CSS 파일을 작성하는 것도 좋다.
2. 모바일우선 데스크탑우선
모바일우선 - min-width 사용 (최소 ~ 부터 적용)
작은 가로폭부터 큰 가로폭 순서로 만드는 것
※ 모바일 = 작다 = min, 모바일기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합
//기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다.
// 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용)
@media (min-width: 576px) { ... }
// 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용)
@media (min-width: 768px) { ... }
// 테스크탑 (가로 해상도가 992px 보다 큰 화면에 적용)
@media (min-width: 992px) { ... }
// 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용)
@media (min-width: 1200px) { ... }
데스트탑우선 - max-width 사용 (최대 ~ 까지 적용)
큰 가로폭부터 작은 가로폭 순서로 만드는 것
※ desktop =크다 = max, 데스크탑은 해상도가 크기 때문에 큰게 먼저 조건에 부합
// 기본 CSS를 작성합니다.
// 기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다.
// 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용)
@media (max-width: 575px) { ... }
// 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용)
@media (max-width: 767px) { ... }
// 태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용)
@media (max-width: 991px) { ... }
// 테스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용)
@media (max-width: 1199px) { ... }
※ CSS Override
3. Break Point
/* 가로 해상도가 576px 보다 작은 화면에 적용) */
@media only screen and (max-width: 576px) {...}
/* 가로 해상도가 576px 보다 작은 큰화면 적용) */
@media only screen and (min-width: 576px) {...}
/* 가로 해상도가 768px 보다 작은 큰화면에 적용) */
@media only screen and (min-width: 768px) {...}
/* 가로 해상도가 992px 보다 작은 큰화면에 적용) */
@media only screen and (min-width: 992px) {...}
/* 가로 해상도가 1200px 보다 작은 큰화면에 적용) */
@media only screen and (min-width: 1200px) {...}※ 브레이크 포인트는 미세하게 차이가 나지만, 크게 의미있진 않다.
/* 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용) */
@media (max-width: 575px) {...}
/* 가로모드 모바일 디바이스 (가로 해상도가 576px보다 크고 768px 보다 작은 화면에 적용) */
@media (min-width: 576px) and (max-width: 767px) {...}
/*태블릿 디바이스 (가로 해상도가 768px보다 크고 991px 보다 작은 화면에 적용) */
@media (min-width: 768px) and (max-width: 991px) {...}
/* 데스크탑 (가로 해상도가 992px보다 크고 1199px 보다 작은 화면에 적용) */
@media (min-width: 992px) and (max-width: 1199px) {...}
/* 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용) */
@media (min-width: 1200px) {...}※ 저는 이걸 쓰고 있어요.
예전 해상도(320)까지 고려한다면
@media all and (max-width: 320px) {...}
@media all and (min-width: 321px) and (max-width: 768px) {...}
@media all and (min-width: 769px) and (max-width: 1024px) {...}
@media all and (min-width: 1025px) {...}※ 브레이크 포인트의 분기는 사이트 구축 상황에 맞게 선택하면 된다.
아래의 방법은 조금 무식하지만, 직관적인 작업플로우를 제공해준다.
#media-320, #media-768, #media-1024, #media-1025 {
display: none;
height: 0px;
overflow: hidden;
}
@media all and (max-width: 320px) {
#media-320 { display: block; }
}
@media all and (min-width: 321px) and (max-width: 768px) {
#media-768 { display: block; }
}
@media all and (min-width: 769px) and (max-width: 1024px) {
#media-1024 { display: block; }
}
@media all and (min-width: 1025px) {
#media-1025 { display: block; }
}<div id="media-320"></div>
<div id="media-768"></div>
<div id="media-1024"></div>
<div id="media-1025"></div>4. 예제코드
/* 화면사이즈가 600px 보다 크면 해당요소를 감춘다 */
@media only screen and (max-width: 600px) {
div.example {
display: none;
}
}※ 실제 활용예
반응형 게시판을 만들때 넓이가 줄어들면 게시판 리스트 항목을 모두 보여주기 힘들다.
이때 등록일이나 히트수 같은 항목을 감춤으로써 넓이를 확보할 수 있다.
또한 모바일화면에서는 특정 블럭을 생략하는 경우도 있는데, 이럴때도 유용하게 사용할 수 있다.
실제로 반응형 웹페이지를 만들때 미디어쿼리를 이용하지 않으면 사실상 구현이 힘들다.
※ 가장 기본적으로 사용되는 활용예
사이트의 width 값이 해상도에 맞게 적응되게 하는 코드는 사이트 구축의 가장 기본적인 활용이다.
보통 wrap 코드에 적용을 많이 한다.
위의 무식하지만 직관적인 플로우 예제가 그 좋은 예이다.
%로 하면 되지 않냐 라는 의견도 있을 수 있지만, 가장 외곽틀의 width는 정확한 수치로 지저하는것이 좋다.
틀안의 요소들은 틀안에서 %로 얼마든지 지정을 해도 된다.
혹은 틀안에서 보이고 보이지 않게 하는 방향으로 진행하는것이 가장 효율적이다.
