CSS3 에서 도입된 ‘미디어 쿼리’ 는 미디어의 특성에 대한 쿼리라는 말에서 유래 되었을 가능성이 큰데 모바일 장치가 대중화 됨에 따라 기기의 화면 크기에 따른 CSS 동작을 다르게 줄 필요성이 생겼고 JQuery나 JavaScript 를 사용하지 않고도 CSS 만을 사용해도 이를 가능하게 했다.
미디어 쿼리 는 반응형 웹의 초석이자 핵심이라 할 수 있다. 프로그래밍을 하고 있다면 CSS의 조건문을 줄 수 있다 생각하면 편하다.
콘텐츠
미디어 쿼리를 사용해야 하는 이유
미디어 쿼리는 다양한 스크린 크기와 해상도를 가진 장치에서 웹사이트가 올바르게 보이도록 한다. 이를 통해 모바일, 태블릿, 데스크탑 등 다양한 장치에서 사용자 경험을 최적화 할 수 있다.
이를 활용하면 디바이스 환경에 따른 콘텐츠 우선순위도 변경하여 예를 들면 모바일 환경에선 탑 메뉴가 표시되지 않는 등의 효과도 적용할 수 있다.
지금 이 블로그에도 미디어 쿼리가 적용 되어 브라우저 크기를 줄이면 자동으로 모바일 버전의 화면으로 레이아웃이 변경 된다.
미디어 쿼리 vs JavaScript(or JQuery)
우리가 미디어 쿼리가 생겨나기 이전은 JavaScript 나 JQuery를 통해 CSS 를 직접 편집 했다.
이는 DOM 요소를 편집한다 표현 하는데 이런 경우 브라우저의 레이아웃 재계산과 리플로우(reflow)가 빈번하게 이루어져 웹페이지의 성능이 저하 될 수 있다.
더군다나 최근 코딩 스타일 상 각 역할에 맞는 코드가 서로 독립적으로 분리 하는 편이다.
그렇지 않고 스타일을 JavaScript 에 작성하게 되면 유지보수 시 어디서 이 CSS 가 변경 되었는지 찾기 쉽지 않을 수 있다.
JQuery 를 사용하게 되면 문제가 더욱 두드러진다. 현대 웹 개발의 라이브러리 의존이 적은 개발 방식에 적합하지도 않고 말이다.
따라서 미디어 쿼리로 처리할 수 있는 것은 모두 작성하는 것이 좋다.
최근엔 CSS와 미디어 쿼리를 제대로 다룰 수 있으면 대부분의 애니메이션, 디자인을 처리할 수 있다.
그럼에도 JavaScript, JQuery 를 활용하면 더 복잡한 형태의 효과 구현엔 유리 할 수 있다.
순서는 CSS와 미디어 쿼리로 먼저 작성 시도 후 작성이 어려울 때 이를 변경 하자.
기본구문
기본적인 미디어 쿼리 구문에 대한 예시는 다음과 같다.
@media screen and (max-width: 600px) {
/* CSS rules go here */
}@media screen and 라는 구문과 뒤에 max-width 라는 CSS 속성과 값을 주어 사용 하는 것이다.
저 구문을 해석하면 최대 width가 600px 까지 (즉, 600px 이하의 해상도) 동작하는 CSS 를 적용 할 수 있다는 것이다.
즉, 가로가 짧은 모바일 환경일 때의 웹 요소의 모양을 다르게 줄 때 사용할 수 있다.
사용 예시: 상단 메뉴를 600px 이하의 환경에선 표시되지 않게 한다.
기본적인 속성
max-width 말고도 자주 사용 되는 다양한 속성은 다음과 같다.
- min-width: 화면의 너비가 특정 값 이상일 때 적용되는 스타일을 정의한다. 예를 들어, 화면이 600픽셀 이상일 때 특정 스타일을 적용하고자 한다면 @media (min-width: 600px)을 사용한다.
- max-height: 화면의 높이가 지정된 최대 높이 이하일 때 적용되는 스타일을 정의한다. 예를 들어, 화면 높이가 800픽셀 이하일 때 스타일을 적용하고자 한다면 @media (max-height: 800px)을 사용한다.
- min-height: 화면의 높이가 지정된 최소 높이 이상일 때 적용되는 스타일을 정의한다. 예를 들어, 화면 높이가 500픽셀 이상일 때 스타일을 적용하고자 한다면 @media (min-height: 500px)을 사용한다.
- orientation: 화면의 방향이 가로 또는 세로일 때 적용되는 스타일을 정의한다. 예를 들어, 화면이 가로 방향일 때 스타일을 적용하고자 한다면 @media (orientation: landscape)를 사용한다.
- aspect-ratio: 화면의 가로 세로 비율이 특정 값일 때 적용되는 스타일을 정의한다. 예를 들어, 화면 비율이 16:9일 때 스타일을 적용하고자 한다면 @media (aspect-ratio: 16/9)를 사용한다.
- resolution: 화면의 해상도가 특정 값 이상일 때 적용되는 스타일을 정의한다. 예를 들어, 해상도가 300dpi 이상인 장치에 스타일을 적용하고자 한다면 @media (resolution: 300dpi)를 사용한다.
이러한 속성들을 사용하여 다양한 화면 크기와 조건에 맞는 스타일을 적용함으로써, 반응형 웹 디자인을 구현할 수 있다.
모범적인 미디어 쿼리 구성
프로그래밍에 정답은 없지만 미디어 쿼리를 사용 한다면 일단 모바일 환경(작은 화면)에서의 디자인을 먼저 하고 큰 화면에 대한 스타일을 추가하는 것이 일반적이라 한다.
또 추가적으로 미디어 쿼리가 너무 많으면 코드가 너무 복잡해 지므로 유지보수에 좋지 않다. 적절하고 최적화된 코드를 짤 수 있도록 노력하자.
