미디어쿼리 (media query)를 이용하여 반응형 웹 만들기

웹 개발을 하면서 프론트엔드로서 가장 힘들었던 부분이었다고 해도 과언이 아닌..... 미디어 쿼리!!!

 

시간이 지날수록 pc(컴퓨터)나 태블릿, 스마트폰 등 정말 다양한 수많은 화면 너비의 디바이스들이 계속해서 생겨남으로써 이러한 모든 상황에서도 화면이 깨지거나 핵심 구성요소들이 보이지 않는 등의 문제가 생기지 않도록 유연하게 반응형 웹을 만드는 '미디어 쿼리'가 매우 중요해졌다. 

 

미디어 쿼리는 뷰포트의 너비나 높이, 장치의 너비와 높이 등에 대해 규칙을 정할 수 있다.

 

 @media screen and (max-width: 800px)

미디어 쿼리의 예로는 위 코드가 있다. 코드를 분석해보면

@media -> 미디어 쿼리 시작을 나타내는 코드

screen -> 미디어 유형(all/print/screen 중 screen은 일반 웹 페이지 화면)

max-width: 800px -> 조건문/실행문, 해당 조건이 참일 경우 실행문을 실행

이러하다.

위 코드에선 max-width가 800px이므로 화면 너비가 800px 이하로 줄어들면, 미디어쿼리가 적용되는 것이다.

 

위의 미디어 쿼리를 적용한 예로, 학교 프로젝트 팀에서 개발한 맛집어플리케이션 웹의 홈 화면이 있다.

 

기본 화면

웹을 실행했을 때 기본적으로 나타나는 전체 기본 화면이다. 맛집 등록하기 섹션과 맛집 보러가기 섹션이 양 옆으로 나열되어있는 것을 확인할 수 있고, discover your new taste! 라는 문구도 보이는 상태이다.

 

하지만 

/* Responsive layout - when the screen is less than 800px wide, make the two columns stack on top of each other instead of next to each other */
   @media screen and (max-width: 800px) {
     section, aside {
       width: 100%;
       padding: 0;
     }

     .card h2{
      position: absolute;
      width: 270px;
      height: 63px;
      margin-left: 35%;
      top: 74%;

      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 31px;
      align-items: center;
      text-align: center;
      color:white;
    }

    .card button{
      position: absolute;
      width: 270px;
      height: 53px;
      margin-left: 35%;
      top: 88%;
      background-color: #00000000;
      border-color: white;

      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 31px;
      align-items: center;
      text-align: center;
      color:white;
    }

     .card2 h2{
      position: absolute;
      width: 240px;
      height: 53px;
      margin-left: 37%;
      top: 109%;

      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 31px;
      align-items: center;
      text-align: center;
      color:black;
    }

    .card2 button{
      position: absolute;
      width: 270px;
      height: 63px;
      margin-left: 35%;
      top: 123%;
      background-color: #00000000;
      border-color: black;

      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 18px;
      line-height: 31px;
      align-items: center;
      text-align: center;
      color:black;
    }

     .namebox h5{
       display: none;
     }
   }

이와같이 미디어쿼리를 적용시켜주었더니, 

화면이 800px 이하로 축소되었을 때

 

양 옆으로 나열되어있던 맛집 등록하기 섹션과 맛집 보러가기 섹션이 위 아래로 배치되어, 스크롤을 내려 맛집 보러가기 섹션을 확인할 수 있게 되었다. 또한 화면이 축소됨에 따라, 비교적 불필요한 문구인 discover your new taste! 도 사라졌음을 확인할 수 있다!

 

아무리 예쁜 pc용 웹을 개발해도, 태블릿이나 모바일에서 켰을 때 화면의 너비나 높이가 유연하게 조정되지 않는다면 좋은 웹을 개발했다고 할 수 없다. 이번 웹 개발을 통해 미디어 쿼리를 이용해서 어느 화면에서든지 적용 가능한 반응형 웹을 만드는 것이 정말 중요하다는 것을 깨닫게 되었다.