CSS 미디어 쿼리에 대해서 알아보자

안녕하세요 탐구소년입니다. 우리는 PC, 태블릿, 스마트폰 등 여러 가지 기기로 웹 사이트에 접속하곤 하는데요. 어떤 기기로 사이트에 접속하냐에 따라 웹 사이트의 형태가 달라지는 것을 종종 확인할 수가 있습니다. 이는 저절로 이루어지는 것이 아니고, 제작 과정에서 웹사이트를 반응형으로 제작했기에 가능한 것입니다.

웹 사이트를 제작할 때에, 하나의 웹 사이트를 기기마다 다르게 표현할 수 있는 방법들은 여러가지가 존재하는데요. 오늘은 그 중에서도 많이 사용되는 방법인 미디어쿼리에 대해서 정리를 해보도록 하겠습니다.

 

미디어쿼리란?

 

미디어 쿼리(mediaqueri)는 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 도와주는 소프트웨어 모듈입니다. 미디어 쿼리를 이용한 사이트는 웹 사이트에 접속하는 기기에 따라서 레이아웃이 바뀌게 됩니다. 즉, PC로 접속하면 모니터 화면에 맞게, 스마트폰으로 접속하면 스마트폰 화면에 맞게 레이아웃이 변경되는 것이지요. 웹 문서의 스타일을 정의할 때, 즉 CSS 코드를 작성할 때 미디어쿼리 모듈을 사용해 주는 것이 일반적인 사용 방법입니다.

 

미디어쿼리 구문 작성하기

 

미디어 쿼리는 @media 속성을 사용해 특정 미디어에서 어떤 CSS를 적용할 것인지 지정해줍니다. 구문의 예를 보겠습니다. 

 

@media screen and (min-width: 200px) and (max-width: 360px) { /* 스타일 정의 */}

 

위의 구문은 미디어 유형이 'screen'이면서 최소 너비 200px부터 최대 너비 360px 사이인 기기일 경우에 적용할 스타일을 정의하는 구문입니다. 위처럼 작성한 코드를 <style> 태그에 추가하거나 CSS 파일에 작성해주면 반응형 웹 사이트를 제작할 수가 있어요.

 

위의 구문에서 'screen'부분은 미디어 유형을 정의하는 것입니다. 어떤 유형의 미디어에 대해서 스타일을 적용하게 될지를 정하는 것인데요. 미디어 유형에 들어갈 수 있는 것은 다음과 같습니다. 

 

 

 

또한 구문에 and라는 코드도 포함이 되어 있습니다. 이는 흔히 연산자라고 부르게 되는데, 미디어 쿼리 구문의 의도를 정할 때 사용하는 녀석입니다. 연산자의 종류로는 다음과 같은 것들이 있습니다. 

 

 

미디어쿼리는 반응형 웹사이트를 만들 때 아주 흔하게 사용되는 모듈이므로, 그 사용법이나 원리를 잘 알아두시면 좋습니다. 막상 써보면 별로 어렵지 않으니 편하게 실습해보세용^^

웹개발은 정말.. 공부할 게 너무 많은 분야인 것 같아요, 그쵸!? 뭔들 안 그렇겠냐만은!ㅎㅎ