맑�

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

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

반�형 웹� �차 �가하고 있는 요즘 반�형 웹� �할 때 거� 따�다니는 �

미디어쿼리!

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

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

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

그 디바�스들� �기 다른 해��와 화면 �기를 가지고 있어

��� 화면� 맞게 출력� 할 필요성� �겼는� �것� �와주는 역할� 하는 것! � 바로 미디어쿼리입니다.

조금 � 명확히 설명� 하�면요.

출력 장치� 해��, 스캔 방�, �쇄 여부, 디바�스가 세로�지 가로�지� 따� 작업�가 설정� 할 수 있는�,

결국 어떻게 출력� �는지� 따� 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 꼬대리