WEB/HTML&CSS

[HTML/CSS] #11.Media Query (반응형 웹디자인)

채소기 2021. 12. 10. 18:53

PC, 스마트폰, 태블릿 등등 다양한 디바이스들이 웹브라우저를 지원하면서 화면의 크기에 따라 유연하게 컨텐츠를 조절하는 기술이 더욱 중요하게 되었다. 이를 가능하게 하는 기술이 바로 미디어쿼리(Media Query)다. 다음의 코드를 보자.

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        div{
            border: 10px solid green;
            font-size: 60px;
        }
        @media(min-width:1200px){
            div{
                display:none;
            }
        }
    
    </style>
</head>

<body>
    <div>
        Sugar
    </div>
</body>
</html>

 

위 코드에서 보다시피 미디어쿼리의 기본문법구조는 다음과 같다는 것을 알 수 있다.

 

@media (조건) {
    스타일
}

 

이제 좁은화면 스타일링을 해보자. 휴대폰처럼 작은화면에서만 'SUGAR'라는 단어가 보이도록 하고 싶다면 위 코드처럼 min-width 조건문을 넣어주면 된다. min-width : 1200px는 screen width > 1200px라는 부등식과 같다. 즉, 1200px보다 화면이 커지는 순간 diplay : none을 적용한다. 직접 코드를 쳐서 결과를 확인해보자!

 

정말 화면의 크기가 1200px를 넘어가는 순간 단어는 사라진다. 이것이 바로 반응형 웹디자인이다.

 

 

 

 

min과 max를 이용해 다양한 범위를 설정해 줄 수 있다. 다음의 코드를 보자.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        display: flex;
        height: 100vh;
        align-items: center;
        justify-content: center;
      }

      div {
        background-color: teal;
        width: 200px;
        height: 200px;
      }
      @media screen and (min-width: 500px) and (max-width: 1000px) {
        div {
          background-color: red;
        }
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

 

범위를 보면 (min-width: 500px) and (max-width: 1000px) 라고 쓰였는데 이는 500px < width < 1000px와 같다.

저 범위 내에서는 배경색이 빨간색으로 변한다는 의미이다.

 

 

 

 

크롬 개발자 도구는 device toolbar기능을 제공한다. F12를 눌러 개발자 모드로 들어가보자.

 

파란색으로 동그라미 친 부분을 보면 device toolbar기능을 사용할 수 있다. 들어가보면

 

다음과 같이 디바이스별 화면크기를 제공한다. 이를 통해 좀 더 수월한 반응형 웹디자인을 설계할 수 있다!

 

 

 

 

우리가 사용할 수 있는 모든 media query는 다음의 사이트에 모두 정리되있다. 유용하게 사용하도록 하자!

 

https://developer.mozilla.org/ko/docs/Web/CSS/Media_Queries/Using_media_queries

 

미디어 쿼리 사용하기 - CSS: Cascading Style Sheets | MDN

미디어 쿼리는 단말기의 유형(출력물 vs. 화면)과, 어떤 특성이나 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 스타일을 수정할 때 유용합니다.

developer.mozilla.org