[CSS] 미디어쿼리(Media Query) 사용하기 - 반응형웹 만들기

🤔 미디어쿼리?

 

미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 width, height, color와 같은 미디어 특성들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 달리하여 적절한 모양을 보여줄 수 있습니다. 

 

미디어 쿼리는 두 가지 방법으로 사용할 수 있습니다.

 

1. <link> 요소에 사용하여 특성이 조건에 맞을 때 css 파일을 불러옵니다.

media 속성의 "screen and (max-width: 768px)"의 의미는 미디어 타입이 스크린이고, 화면의 최대 너비를 768px로 지정하는 것입니다. 그러므로 화면의 너비가 768px 이하 일 때 적용됩니다.

<link rel="stylesheet" media="screen and (max-width: 768px)" href="style.css" />

 

하지만 <link> 사용법은 권장하지 않습니다. 브라우저는 일단 모든 css를 내려받기 때문에 size가 커집이다.

 

2. 스타일 시트 내에서 @media 를 사용합니다. 

결과는 위와 동일하며 조건이 맞으면 {...} 안의 스타일이 적용됩니다.

@media screen and (max-width: 768px) {
   body {
       background-color: blue;
   }
}

@media (max-width: 768px) {...} 처럼 미디어 타입을 생략하면 all 이 기본값이 되어 모든 미디어 타입에 적용이 됩니다. 

미디어 타입에 사용되는 값에는 여러 종류가 있지만 웹 사이트를 만들 때에는 screen을 사용하거나 all을 사용하는 것이 일반적 입니다.

 

미디어 특성에서는 max-width 와 min-width 가 가장 일반적으로 쓰입니다. 그 외 height, color, orientation(화면의 가로 세로 방향) 등이 있습니다.  

 

 

반응형 웹을 만들 때 스타일을 작성하는 기준으로 모바일을 우선할 것인지, 데스크탑을 우선할 것인지가 먼저 고려되어지는 편입니다. 

 

모바일을 우선할 경우 다음과 같은 순서로 작성이 됩니다.

/* 모바일에 적용될 스타일을 먼저 작성 */

@media screen and (min-width: 769px) {
    /* 769px 이상에서 적용 */
    /* 데스크탑에서 적용될 스타일을 작성 */
}

 

데스크탑을 우선할 경우 다음과 같은 순서로 작성이 됩니다.

/* 데스크탑에서 적용될 스타일을 먼저 작성 */

@media screen and (max-width: 768px) {
    /* 768px 이하에서 적용 */
    /* 모바일에 적용될 스타일 작성 */
}

 

 

🤔 미디어쿼리 분기포인트?

다양한 미디어쿼리 분기포인트가 존재합니다.

/* 세로모드 모바일 디바이스 (가로 해상도가 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 (max-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) { . . . }

 

 

다양한 브레이크 포인트가 있지만, 브레이크 포인트의 분기는 사이트 구축 상황에 맞게 선택하면 됩니다.