미디어쿼리에 대해 알아보자

미디어쿼리? 그게 뭐죠? 에 대해 설명하기 전에 한번 잘 생각해보자. 진짜 완전 찐으로 구식인 웹사이트... 그니까 막 쌍팔년도에 만들어져서 방치된 스멜이 폴폴 풍기면서 들어가면 플래시 죽었어염 하는 그런 사이트를 빼면 대부분의 사이트는 PC와 핸드폰에서 접속했을 때 각각 화면이 다르다. 왜냐하면 PC의 화면을 그대로 모바일에서 출력하면 여러분들은 UI에서 뭘 찾거나 누르는게 상당히 빡세지고 모바일(특히 핸드폰)에 최적화된 디자인은 PC에게는 너무 부담스럽게 크기 때문이다.

 

네이버(PC버전, 개인정보는 가렸다)

이 화면을 서마터폰에서 본다고 생각해보자. 아오 내눈... 태블릿PC라면 사정이 좀 낫겠지만 핸드폰으로 저걸 본다? 

 

개발자 도구에서 iPhone 14 PM으로 설정한 상태이다

미쳤습니까 휴먼? 소리가 절로 나온다.

 

네이버(모바일)

이 UI는 핸드폰에서 네이버를 키면 나온다. (태블릿PC용 네이버 앱에서도 이렇게 나온다) PC보다 상대적으로 쪼매난 핸드폰을 통해서도 다른 메뉴들을 찾거나 선택하기 쉽도록 큼직한 아이콘들이 자리잡고 있는데

 

모바일 UI를 PC에서 열어보자

이걸 PC같이 큰 화면으로 보기는 좀... 거시기하다.

 

이런 식으로 태블릿PC, 컴퓨터, 핸드폰 등 기기의 크기에 맞게 UI를 표시하기 위해서 미디어쿼리가 필요하다. 핸드폰이면 핸드폰, 태블릿PC면 태블릿PC, PC면 PC 사이즈가 있으니 각 사이즈에 맞춰서 미디어 쿼리를 줘 배치하는 것이다. 아, 저 핸드폰 크기 어떻게 한건지도 이따 가르쳐드림.

---

기본적으로 미디어쿼리는

@media screen and (max-width:960px) {
    적용할 내용
}

이런 식으로 사용한다. 저 코드는 무슨 뜻이냐면 최대 너비가 960픽셀일 때(그러니까 960px 이하에) 적용할 스타일이라는 얘기. 어디가요 IDE 안켜고.

 

일단 여기서는 PC, 그리고 모바일일 때 미디어쿼리를 써서 UI의 배치를 좀 바꿔볼거다. JS는 없으니 안심하십시오. 아무튼... 그래서 서마터폰 요즘 몇px이나 하나 봤는데 아이폰 14 프맥 기준 뷰포트 430... 쿡아... 15프맥 나온지 1년 넘었는데 크기좀 줘라...

 

일단 PC에서는 이런 식으로 UI를 배치했으니, 이제 미디어 쿼리를 이용해 모바일용 UI를 만들어보자. 모바일에서는 오른쪽 카드를 없애고 왼쪽 카드를 일렬로, 네 줄로 정렬할거다.

 

@media (max-width: 450px) {
    .wrap {
        width: 430px;
    }

    .icon {
        font-size: 70pt;
        width: 410px;
        height: 150px;
    }

    .paragraph {
        display: none;
    }

}

얘는 왜 또 한번에 안먹혀서 나를 애먹게 하냐... ㅡㅡ 아무튼... 저건 왜 450px로 했냐면 아이폰 14 프맥 기준 430ox이 제일 큰데 혹시 또 모르기때문에... 좀 넉넉하게 줬다.

 

미디어쿼리 안쪽을 보면 일단 전체를 감싸고 있는 랩의 크기가 430픽셀로 줄었고, 아이콘이 들어있는 카드는 크기가 줄고 폰트 크기를 살짝 키웠다. 그리고 아이콘 옆에 뭐 블라블라 써있던걸(paragraph) display: none을 줘서 숨긴 모습이다.

 

그래서 이렇게 됐다. 만약 창 크기가 줄었어도 아이콘 배치를 2*2로 유지하고 싶다면

 

@media (max-width: 450px) {
    .wrap {
        width: 430px;
    }
    .wrapper div {
        width: 190px;
        height: 150px;
    }

    .icon {
        font-size: 70pt;
    }

    .paragraph {
        display: none;
    }

}

코드가 좀 바꼈는데… 이런 식으로 길이도 조절할 수 있다. 쟤는 왜 코드가 바꼈냐면 미디어쿼리에서 크기를 조절한거랑 원래 크기가 적용되는게 다르니까 안 바뀌고 CSS가 씹혀서…

 

크기 바뀐거 보이시죠? 그럼 이제 저걸 어떻게 했는지 알려주도록 하겠다. 

 

https://koreanraichu.tistory.com/573

모바일 뷰포트 확인하는 법(feat. 개발자 도구)

번잡시러울까봐 분리했으니 여기 가서 보자.