$$config title: CSS의 미디어 쿼리(Media Query) keywords: - IT - ... $$ # 미디어 쿼리 ``` CSS에서 어떤 스타일을 선택적으로 적용하고 싶을 때 사용 ``` # 기본 문법 ```css @media (조건) { 스타일 } ``` ## 좁은 화면 스타일링 - 핸드폰처럼 좁은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최대 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다. - 예를 들어, 800px 이하의 좁은 화면에서 특정 엘러민트의 배경색을 토마토 색으로 바꾸고 싶다면, 다음과 같이 max-width 속성을 이용하여 미디어 쿼리를 작성해주면 됩니다. ```html

`좁은 화면에서는 배경색이 토마토 색이 됩니다.

``` ```css @media (max-width: 800px) { .small-tomato { background-color: tomato; } } ``` ## 넓은 화면 스타일링 - 반대로 TV처럼 넓은 화면에서만 특정 스타일을 적용하고 싶을 때는 화면의 최소 너비를 조건으로 하여 미디어 쿼리를 사용할 수 있습니다. - 예를 들어, 800px 이상의 넓은 화면에서 특정 엘러민트의 글자색을 토마토 색으로 바꾸고 싶다면, 다음과 같이 min-width 속성을 이용하여 미디어 쿼리를 작성해주면 됩니다. ```html

넓은 화면에서는 글자색이 토마토 색이 됩니다.

``` ```css @media (min-width: 800px) { .large-tomato { color: tomato; } } ``` - 화면 너비에 따라 엘리먼트 숨기기 - 미디어 쿼리는 특정 엘리먼트를 화면의 너비에 따라 숨길 때도 많이 사용됩니다. - 예를 들어, 목록에서 어떤 항목은 넓은 화면에서 숨기고 어떤 항목은 좁은 화면에서 숨기고 싶다면, 다음과 같이 max-width 속성과 min-width 속성을 이용하여 미디어 쿼리로 작성해주면 됩니다. ```html

저는 넓은 화면에서만 보입니다.
저는 항상 보입니다.
저는 좁은 화면에서만 보입니다.

``` ```css @media (max-width: 600px) { .desktop { display: none; } } @media (min-width: 1000px) { .mobile { display: none; } } ```

게시글 상세