🧙🏼‍♂️ Media Query로 해결해보자

열심히 만든 웹 페이지를 폰으로 연 순간 형태가 망가져있어 당황한 경험이 있으신 분들이 많을 것입니다. 그것은 모바일 환경과 개발 환경에서 디스플레이의 차이 때문에 발생할 것입니다. 새로운 스타일 시트를 만들수도 있겠지만 오늘은 반응형 웹에 사용되는 Media Query로 문제를 해결해보겠습니다.

🤳🏽 환경 차이?

보통의 경우 개발하는 컴퓨터는 가로가 긴 형태의 디스플레이일 것입니다. 하지만 스마트폰의 경우에는 세로가 긴 형태를 띕니다. 이런 차이 때문에 문제가 발생하는 스타일 시트만 따로 변경할 수 있습니다.

Media Query 사용법

Media Query는 조건문과 비슷하게 적용됩니다. 디스플레이의 넓이와 정의한 값과 비교하여 조건이 충족될때 적용하게 됩니다. Media Query의 예시를 보겠습니다.

@media screen and (max-width: 1024px) {
    .About-main>img{
        display: none;
    }
}

위 코드는 media type이 screen이고 해상도가 1024px 이하일때 {}안의 스타일들이 적용된다는 의미입니다. 가장 흔히 쓰이는 특성에는 max-width와 min-width이 있습니다.

사용 예시

사용법을 알아보았으니 이번에는 적용하면 어떻게 동작하는지 보겠습니다. Media Query로 크롬창의 크기마다 background-color을 변경한 모습입니다.