$$config title: CSS 미디어 쿼리 (Media Query) 사용법 keywords: - IT - ... $$ 1. 기본적인 사용방법 ``` @media (조건문) { 실행코드 } ``` ``` ``` ※ 를 사용하는 방법은 권장하지 않는다. (브라우져는 일단 모든 css를 내려받기때문에 size가 커진다) ※ 구문에는 논리연산자 및 각각의 특성들이 존재하지만, 사용빈도가 적다. ``` ``` ※ 미디어 쿼리 구분을 따로 빼놓은 CSS 파일을 작성하는 것도 좋다. 2. 모바일우선 데스크탑우선 모바일우선 - min-width 사용 (최소 ~ 부터 적용) 작은 가로폭부터 큰 가로폭 순서로 만드는 것 ※ 모바일 = 작다 = min, 모바일기기는 해상도가 작기 때문에 작은게 먼저 조건에 부합 ``` //기본으로 작성되는 CSS는 576px보다 작은 화면에서 작동 됩니다. // 가로모드 모바일 디바이스 (가로 해상도가 576px 보다 큰 화면에 적용) @media (min-width: 576px) { ... } // 태블릿 디바이스 (가로 해상도가 768px 보다 큰 화면에 적용) @media (min-width: 768px) { ... } // 테스크탑 (가로 해상도가 992px 보다 큰 화면에 적용) @media (min-width: 992px) { ... } // 큰화면 데스크탑 (가로 해상도가 1200px 보다 큰 화면에 적용) @media (min-width: 1200px) { ... } ``` 데스트탑우선 - max-width 사용 (최대 ~ 까지 적용) 큰 가로폭부터 작은 가로폭 순서로 만드는 것 ※ desktop =크다 = max, 데스크탑은 해상도가 크기 때문에 큰게 먼저 조건에 부합 ``` // 기본 CSS를 작성합니다. // 기본으로 작성되는 CSS는 1199px보다 큰 화면에서 작동 됩니다. // 세로모드 모바일 디바이스 (가로 해상도가 576px 보다 작은 화면에 적용) @media (max-width: 575px) { ... } // 가로모드 모바일 디바이스 (가로 해상도가 768px 보다 작은 화면에 적용) @media (max-width: 767px) { ... } // 태블릿 디바이스 (가로 해상도가 992px 보다 작은 화면에 적용) @media (max-width: 991px) { ... } // 테스크탑 (가로 해상도가 1200px 보다 작은 화면에 적용) @media (max-width: 1199px) { ... } ``` ※ CSS Override 3. Break Point ``` /* 가로 해상도가 576px 보다 작은 화면에 적용) */ @media only screen and (max-width: 576px) {...} /* 가로 해상도가 576px 보다 작은 큰화면 적용) */ @media only screen and (min-width: 576px) {...} /* 가로 해상도가 768px 보다 작은 큰화면에 적용) */ @media only screen and (min-width: 768px) {...} /* 가로 해상도가 992px 보다 작은 큰화면에 적용) */ @media only screen and (min-width: 992px) {...} /* 가로 해상도가 1200px 보다 작은 큰화면에 적용) */ @media only screen and (min-width: 1200px) {...} ``` ※ 브레이크 포인트는 미세하게 차이가 나지만, 크게 의미있진 않다. ``` /* 세로모드 모바일 디바이스 (가로 해상도가 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 (min-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) {...} ``` ※ 브레이크 포인트의 분기는 사이트 구축 상황에 맞게 선택하면 된다. 아래의 방법은 조금 무식하지만, 직관적인 작업플로우를 제공해준다. ``` #media-320, #media-768, #media-1024, #media-1025 { display: none; height: 0px; overflow: hidden; } @media all and (max-width: 320px) { #media-320 { display: block; } } @media all and (min-width: 321px) and (max-width: 768px) { #media-768 { display: block; } } @media all and (min-width: 769px) and (max-width: 1024px) { #media-1024 { display: block; } } @media all and (min-width: 1025px) { #media-1025 { display: block; } } ``` ```

``` 4. 예제코드 ``` /* 화면사이즈가 600px 보다 크면 해당요소를 감춘다 */ @media only screen and (max-width: 600px) { div.example { display: none; } } ``` ※ 실제 활용예 반응형 게시판을 만들때 넓이가 줄어들면 게시판 리스트 항목을 모두 보여주기 힘들다. 이때 등록일이나 히트수 같은 항목을 감춤으로써 넓이를 확보할 수 있다. 또한 모바일화면에서는 특정 블럭을 생략하는 경우도 있는데, 이럴때도 유용하게 사용할 수 있다. 실제로 반응형 웹페이지를 만들때 미디어쿼리를 이용하지 않으면 사실상 구현이 힘들다. ※ 가장 기본적으로 사용되는 활용예 사이트의 width 값이 해상도에 맞게 적응되게 하는 코드는 사이트 구축의 가장 기본적인 활용이다. 보통 wrap 코드에 적용을 많이 한다. 위의 무식하지만 직관적인 플로우 예제가 그 좋은 예이다. %로 하면 되지 않냐 라는 의견도 있을 수 있지만, 가장 외곽틀의 width는 정확한 수치로 지저하는것이 좋다. 틀안의 요소들은 틀안에서 %로 얼마든지 지정을 해도 된다. 혹은 틀안에서 보이고 보이지 않게 하는 방향으로 진행하는것이 가장 효율적이다.