[웹] HTML/CSS #12 :: 미디어쿼리

반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다.

@media 유형 and (조건) {     css 선택자 {         css 속성: css 값;     } }

실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) {   }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 {   }안의 css가 적용되는 것이다.

다음 예를 살펴보자. 기본적으로 데스크탑에서 p 태그의 글씨 크기를 36 픽셀로 지정했는데, 태블릿과 스마트폰 등의 모바일 기기에서는 너무 크다. 모바일에서는 18 픽셀로 보이고 싶다. 그럴 때의 css는 다음과 같다.

<style> p {     font-size: 36px; } @media screen and (max-width: 768px) {     p {         font-size: 18px;     } }  </style>

이러면 문서에는 일단 기본적으로 p {font-size: 36px;} 서식이 적용된다. 하지만 스크린 화면이고, 화면 너비가 768 이하인 화면에서는 p {font-size: 18px;}이 적용되어 작은 글자가 보이는 것이다. 간단하다. 혹은 반대의 경우도 가능하다. 기본을 모바일로 지정하여 기본 폰트 사이즈를 18px로 하고, 화면 너비가 768px보다 클 때에는 폰트 사이즈르 36px로 하고 싶다고 할 때는 다음과 같다.

<style> p {     font-size: 18px; } @media screen and (min-width: 769px) {     p {         font-size: 36px;     } }  </style>

이 때는 모바일이 기준이 된다. 기본적으로 18px의 서식을 갖고 있되, 최소 화면이 769 픽셀일 때, 즉 화면 너비가 769 픽셀보다 클 때에는 36px로 바뀐다. 768까지는 태블릿 화면이기 때문에 데스크탑에서만 36px로 바꿔주기 위해 (min-width: 769px)로 지정해야 한다. 만약 (min-width: 768px)로 한다면 최소 너비가 768까지일 때이니깐 768도 포함이다. 따라서 768px 너비의 태블릿에서도 p의 폰트 사이즈는 36 픽셀로 보인다.

미디어쿼리의 조건에는 min-width, max-width말고도 다양한 변수가 들어갈 수 있다. 우선 페이지 너비를 지정하는 게 가장 자주 쓰이는 것 같긴 하다. 가로 화면, 세로 화면을 지정하는 orientation이 있다. (orientation: portrait)이라면 세로 화면, (orientation: portrait)이라면 가로 화면일 때를 의미한다. 화면 비율인 aspect-ratio의 속성도 지정할 수 있다. 해상도인 resolution의 속성도 지정할 수 있다.

조건문을 여러 개 붙이고 싶을 때는 and (조건)을 계속 이어주면 된다. 데스크탑, 태블릿, 스마트폰마다 css를 다르게 지정하고 싶다면 아래처럼 할 수 있다. 기본은 모바일이다.

<style> p {     font-size: 18px; } @media screen and (min-width: 426px) and (max-width: 768px) {     p {         font-size: 24px;     } }  @media screen and (min-width: 769px) {     p {         font-size: 36px;     } }  </style>

기본 설정은 폰트 사이즈 18px다. 하지만 최소 화면이 426px 이상일 때, 그리고 최대 화면 768px 이하까지는 폰트 사이즈가 24px이 적용된다. 그리고 최소 화면이 769px 이상일 때는 폰트 사이즈 36px이 적용된다. 사실 위 코드에서 (max-width: 768px)는 빼도 된다. 하지만 조건을 여러 개 적용할 때 코드 작성하는 방법을 보여주려고 그냥 넣었다. 참고로 (max-width: 768px)를 뺄 때는 두 미디어 쿼리의 순서를 지켜줘야 한다. 캐스캐이딩 스타일 시트의 적용 우선순위 때문. 만약 (min-width: 769px)이 (min-width: 426px)보다 위에 있다면, 화면 너비가 1024px인 브라우저는 위에서 아래로 코드를 읽어가다가 이렇게 행동할 것이다.

"음 최소 너비가 769px일 때는 폰트 사이즈 36px이라고? 난 1024px니깐 36px로 보여줘야지. 자 다음 줄, 음 최소 너비가 426px이면 폰트 사이즈 24px이라고? 난 1024px니깐 24px로 보여줘야지". 결과적으로 보여지는 폰트 사이즈는 24px이 된다. 따라서 최소와 최대를 둘 다 지정하지 않는다면, 코드가 적히는 순서를 지켜줘야 의도한 대로 화면이 나온다.

미디어 쿼리 이전에 설정을 좀 준비해야할 것이 있긴 하지만, 우선 핵심 내용은 이렇다. 이해하면 반응형 웹을 구축할 준비가 된 것이다.