CSS 쉽게 배우기 | 미디어 쿼리 (@media)

CSS 미디어 쿼리 한눈에 알아보기

 

플렉스 박스와 그리드 레이아웃에서 계속 언급된 단어가 있죠: 반응형 디자인

근데 정확히 뭔지 설명이 잘 안된것같아서 이번편에서는 반응형 디자인과 미디어 쿼리의 연관성을 알아볼게요

 

웹에서 반응형 디자인의 뜻은?

스마트폰, 테블릿PC 이전에는 데스크탑PC에서 모든 웹사이트를 볼수있었는데요

시간이 지나서 스마트폰과 테블릿PC의 등장으로 이제는 웹사이트를 볼수있는 기기가 다양해졌죠

 

갑자기 웬 '라떼' 얘기냐?

스마트폰과 테블릿PC의 등장이 반응형 디자인에 큰 영향을 주었기 때문입니다

웹사이트를 PC에서만 볼때는 거의 모든 모니터의 크기가 똑같았기때문에 하나의 디자인만 있으면 충분했는데

스마트폰과 테블릿PC가 등장하면서 PC모니터에 맞춘 디자인이 스마트폰과 테블릿PC에는 맞지않게된거죠

[웹 기술(HTML, CSS, JavaScript,,,)이 지금처럼 좋지 않았던겄도 한 몫했지만]

 

이렇게 생각해볼까요?

코끼리 (PC 모니터 디자인)가 있어요

이 코끼리를 볼수있는 장소가 두군데 있어요, 1) 바깥 (PC 모니터), 2) 방안 (스마트폰, 테블릿PC)

코끼리를 밖에서 보면 코끼리 전채를 한 눈에 볼수있죠

그런데 방안에서는 창문을 통해서 보기때문에 코끼리의 부분만 볼수있죠

 

반응형 디자인은 이런 문제를 해결하는데 도와줍니다

반응형 디자인이란 말그대로 디자인이 스크린 크기에 반응해서 그 스크린에 딱 맞게 조정되는걸 말합니다

 

반응형 디자인이 뭔지 알았으니, 미디어 쿼리에 대해서 알아볼까요?

 

 

미디어 쿼리 (@media)

미디어 쿼리는 CSS 속성이 아니라 CSS 법칙입니다

@media not|only mediatype and (size) [and (size), ...] {
	CSS code;
}

 

미디어 쿼리의 코드를 살펴볼게요

 

@media : 스타일이 스크린과 프린트 모두에 적용됨

@media only screen | @media screen : 스타일이 스크린에서만 적용됨

@media only print | @media print : 스타일이 프린트에서만 적용됨 (Ctrl + P)

@media screen and (max-width: 000px) : 주어진 픽셀 넓이 (포함) 이하에서 스타일이 적용됨

@media screen and (min-width: 000px) : 주어진 픽셀 넓이 (포함) 이상에서 스타일이 적용됨

@media screen and (min-width: 000px) and (max-width: 000px) : 주어진 픽셀 넓이들 (포함) 범위안에서 스타일이 적용됨

 

 

미디어 쿼리를 연습하다보면 주로 넓이에 적용되는걸 볼수있는데요

그 이유는 웹 디자인에서 높이보다는 넓이에 사이즈를 정해놓는 빈도가 더 높기때문입니다

그리고 대부분의 유저들이 양옆으로 스크롤 하는거보다 위아래로 스크롤하는것에 덜 부정적이고 더 익숙하기 때문입니다

 

 

미디어 쿼리에 대해서 알아봤습니다

미디어 쿼리와 플렉스 박스, 아니면 그리드 레이아웃을 같이사용하면 어느 스크린 크기에도 잘 맞는 반응형 디자인을 만들수 있습니다

 

 

 

궁금한거나, 제가 놓친게 있다면 댓글에 남겨주세요

 

수고하셨습니다

 

 

끝!