CSS 반응형 쉽게 만들기 (미디어쿼리)

  • HTML, CSS

이제는 웹에 접속하는 디바이스가 워낙 다양하다보니 웹사이트는 무조건 반응형으로, 심지어는 모바일 우선으로 만드는 경우도 많은 것 같다. 어쨌든 브라우저 크기에 따라 다르게 보이도록 하려면 CSS에서 미디어쿼리라는 걸 사용하는 게 좋다.

미디어 쿼리는 웹사이트의 콘텐츠를 화면 크기에 맞게 조정하는 역할을 한다. 현재 화면의 크기를 감지하고 화면 너비에 따라 다른 CSS 스타일을 적용하는 작전.

사실 나도 잘 몰라서 공부한 거 기억하려고 남기는 포스팅. 목차는 아래와 같다.

  • 미디어쿼리 기본 문법 익히기
  • 화면 크기의 범위(구간) 지정하기
  • 화면 해상도(dpi) 기준으로 적용하기
  • 가로모드 적용하기
  • 미디어쿼리 중단점(breakpoint) 잡기

미디어쿼리 기본 문법 익히기

일단 아래 예제를 보자.

@media only screen and (max-width: 480px) {
  body {
    font-size: 12px;
  }
}

일단 미디어쿼리 규칙을 시작할 땐 @media라 적어준다.

이후 only screen이라 적었는데, 이건 이 규칙을 사용해야하는 장치 유형을 나타낸다. (원래 CSS에서는 미디어 유형을 알면 그에 따라 규칙을 적용할 수 있도록 screen 이외에도 print, handheld 같은 다양한 미디어 유형을 통합하고자 했는데, 크기가 워낙 다양하고 일반화하기 어려워서 CSS 규칙만으로 커버하기 어려운 측면이 있다.) 어쨌든 일단 웹페이지 기준으로만 정의하려면 only screen이라 적어주면 된다.

이어서 and (max-width: 480px) 라고 최대 너비를 지정했는데, 결국 480px보다 작은 화면(스마트폰)에 대한 규칙을 정의한다는 뜻이다.

실제로 적용할 CSS 규칙은 미디어쿼리의 중괄호 안에 적어주면 되고, 미디어쿼리가 충족되면 이 규칙들이 적용된다. 위의 예에서 body 요소의 텍스트는 사용자 화면이 480px 미만일 때 글꼴 크기가 12px로 나타난다.

화면 크기의 범위(구간) 지정하기

그리고 화면 크기 지정은 예를 들면 320px보다 크고 480px보다 작을 때, 이런 식으로 정할 수도 있다. 이렇게.

@media only screen and (min-width: 320px) and (max-width: 480px) {

}

이걸 실제로 풀어쓰면 이렇게도 가능하다.

@media only screen and (min-width: 320px) { 

}

@media only screen and (min-width: 480px) { 

}

일단 첫 번째 미디어 쿼리는 화면 크기가 320px 이상일 때, 두 번째 미디어 쿼리는 화면 크기가 480px 이상일 때 CSS 규칙을 적용한다. 화면크기가 작을 때부터 적어주면서 첫 번째 미디어 쿼리에 존재하는 CSS 규칙을 재정의하거나 추가적인 CSS 규칙을 적용할 수 있다.

화면 해상도(dpi) 기준으로 적용하기

미디어쿼리에서는 화면 해상도를 기준으로 규칙을 지정하는 것도 가능하다. 고해상도 미디어를 지원하는 화면에만 이미지를 제공하고자 할 때. 이러면 화면에 제대로 표시되지도 않으면 파일 크기만 큰 고품질 이미지 다운로드를 피할 수 있다.

해상도를 기준으로 타겟팅하려면 min-resolution, max-resolution를 사용한다. 이 기능은 dpi(인치당 도트 수) 또는 dpc(센티미터 당 도트 수)의 값을 받을 수 있다.

예를 들어 해상도가 300dpi 이상일 때 규칙을 지정하려면 이렇게.

@media only screen and (min-resolution: 300dpi) {

}

물론 화면 크기와 함께 사용하는 것도 가능하다. 조건을 and로 묶어주면 된다. 너비가 480px 이하이면서 해상도 300dpi 일 때 적용하려면 이렇게.

@media only screen and (max-width: 480px) and (min-resolution: 300dpi) {

}

가로모드 적용하기

이번엔 가로모드(orientation: landscape)일 때 지원하는 방법이다. 여기서 그동안 썼던 and 연산자 말고 콤마(,)를 써보자.

@media only screen and (min-width: 480px), (orientation: landscape) {

}

이렇게 써주면 화면 너비가 480 픽셀 이상일 때, 혹은 화면이 가로 모드일때 적용되는 거다. (참고로 orientation은 가로가 세로보다 길면 landscape, 세로가 가로보다 길면 portrait다.)

미디어쿼리 중단점(breakpoint) 잡기

미디어쿼리를 사용하여 화면 크기 및 해상도에 따라 CSS 규칙을 적용하는 방법을 알더라도, 이게 적용될 지점(breakpoint)을 결정해야 한다.

물론 실제로 사용될 장치의 화면 크기를 예상해 breakpoint를 일일이 설정하는 건 현실적으로 불가능한 일이다. 매년 또 새로운 장치들이 새로운 화면 크기로 출시될 거고. 그래서 그냥 브라우저의 크기를 조정하면서 자연스럽게 화면을 읽을 수 있는 지점을 확인하는 게 좋다. 브라우저 크기를 조정하다가 레이아웃이 깨지거나 이상하게 보이는 지점이 결국 breakpoint가 된다.

물론 480, 768, 1024, 1600 이런 식으로 어느정도 표준화(?)된 중단점이 있긴 한데, 아무튼 케바케다.

보통 모바일 우선으로(작은 화면에서 큰 화면 순으로) 적용할 때는 min-width를, 데스크탑 우선으로(큰 화면에서 작은 화면 순으로) 적용할 때는 max-width를 사용한다.

만약 큰 화면 우선으로 적용하려면 이렇게

@media (max-width: 1024px) {
	...
}

@media (max-width: 768px) {	
	...
}

@media (max-width: 480px) {
	...
}

작은 화면 우선으로 적용하려면 이렇게 써볼 수 있겠다.

@media (min-width: 480) {
	...
}

@media (min-width: 768px) {	
	...
}

@media (min-width: 1024px) {
	...
}

어쨌든 실제로 해봐야 제대로 익혀질 것 같다.

추천 글

댓글 남기기