TIL]미디어쿼리

미디어쿼리

웹에서 접속을 할 때 개개인의 모니터의 크기가 틀리거나

모바일, 태블릿 pc, 데스크톱, 랩탑 등 다양한 기기로 이용하기 때문에

현재 화면의 크기를 감지하고 화면 너비에 따라 다른 css 스타일을 적용할 수 있습니다.

아래 예제를 살펴보겠습니다!

@media screen and (max-width: 480px) {
body {
    background-color: green;
    }
}

우선 미디어쿼리를 사용할 때 @media라고 적어줍니다.

screen and 부분을 보시면 max-width가 480px로 되어있는데

480px보다 작은 화면 즉, 스마트폰에 대한 규칙을 정의하는 것입니다.

위의 예제와 같이 실제로 적용할 css 규칙은

미디어쿼리의 중괄호 안에 적어주고 미디어쿼리가 충족되면 이 규칙들이 적용됩니다.

위의 예제에서는 body요소의 배경색이 사용자 화면이 480px 미만일 때 초록색으로 나타내 줍니다.

만약 화면 크기의 범위를 정하고 싶을 땐 어떻게 해야 할까요?

아래 예제를 살펴보겠습니다.

@media screen and (min-width: 320px) and (max-width: 480px) {
    body{
        background-color: green;
    }
}

위의 예제를 살펴보면 화면이 320px보다 크고 480px보다 클 때 배경색이 초록색으로 나타내 준다는 것입니다.

통상적으로 미디어쿼리는 보통 모바일 우선으로 적용할 때는 min-width를 사용하고

데스크톱을 우선으로 적용할 때는 max-width를 적용합니다!

---

오늘은 항해 첫 미니 프로젝트인 싸인을 진행하다

팀원분들과 모니터 사양이 틀려서 그때 깨져서 나오는 것을 수정하기 위해

미디어쿼리를 사용했다!

확실히 프로젝트는 도움이 많이 되는 것 같다!

파이팅!✍️✍️✍️👍👍👍