맑음

오늘은 알것 같으면서도 아리송한 미디어쿼리에 대해서 알아보려 합니다~

뭔가 많이 들어본 단어 아닌가요?

반응형 웹이 점차 증가하고 있는 요즘 반응형 웹을 말할 때 거의 따라다니는 말

미디어쿼리!

이 미디어쿼리는 단어에서부터 어려운 냄새가 풍겨오지만 알고 보면 그렇게 어렵지만은 않다는 것을 알 수 있습니당~

간단히 미디어쿼리에 대해 설명을 하자면요!

다양한 웹 화면을 볼 수 있는 여러 종류의 디바이스들이 등장했고,

그 디바이스들은 각기 다른 해상도와 화면 크기를 가지고 있어

각각의 화면에 맞게 출력을 할 필요성이 생겼는데 이것을 도와주는 역할을 하는 것! 이 바로 미디어쿼리입니다.

조금 더 명확히 설명을 하자면요.

출력 장치의 해상도, 스캔 방식, 인쇄 여부, 디바이스가 세로인지 가로인지에 따라 작업자가 설정을 할 수 있는데,

결국 어떻게 출력이 되는지에 따라 CSS처리를 다르게 해서 다양한 상황에 최적화할 수 있는 기법을 말합니다.

이런 미디어쿼리는

의 형태로 사용되고 css이기 때문에 style 안에 써야 합니다!

조건 부분에는 max-width, max-height, min-width, min-height를 넣을 수 있는데요.

여기서 max와 min은 최대와 최소를 뜻하며 이 조건 부분에 대한 값을 감지하고 이 값에 따라 css를 설정하게 됩니다.  

선택자 or 태그 부분에는 일반적으로 css작성할 때와 동일하게 넣으면 됩니다.

설명만으로는 어려울 수 있으니 간단한 예를 들어서 설명을 하자면 

과 같은 간단한 소스를 작성하였습니다.

이 소스에 대해 간략히 설명을 하자면 먼저 body안에 id를 box1으로 가지는 div하나를 만들고요

넓이와 높이를 각각 600px 그리고 배경색을 녹색으로 지정하였습니다. 

여기에 미디어쿼리를 이용하여 해상도가 640px과 1024px 사이에서는 넓이가 100px로 배경색은 빨강색으로 바뀌게 하였습니다.

출력되는 화면을 확인 해보면

1024px이상 640px 이하에서는 넓이와 높이가 600px 그리고 녹색인 박스가 화면에 출력이 되고

그 1024px과 640px 사이의 해상도에서는 넓이가 100px로 그리고 빨강색의 박스가 출력되는 것을 확인 할 수 있었습니다:D

이렇게 미디어쿼리에 변화가 생길 분기점만 잘 설정하면 많은 디바이스에서 최적화 된 디자인과 기능을 출력할 수 있게 됩니다.

미디어쿼리 처음 단어만 볼 때와 다르게 쉽지 않나요? 

본 포스팅은 지극히 개인적인 취향과 관점으로 작성된 주관적인 글 입니다

ⓒ 언제나 맑음 with 꼬대리