[CSS] 미디어 쿼리

정진우·2024년 5월 20일

목록 보기

13/15

미디어 쿼리

미디어 쿼리(Media Query)는 웹 페이지가 다양한 디바이스나 원도우 상태에 따라 다르게 표현되게 하는 기술입니다. 브라우저의 뷰포트 너비, 높이, 해상도 등 다양한 조건에 따라 다른 CSS 스타일을 적용할 수 있도록 해줍니다.
예를 들어, @media (min-width: 800px)는 브라우저 창의 너비가 800픽셀 이상일 때 적용되는 CSS 스타일을 정의합니다. 이런식으로, 미디어 쿼리는 데스크탑, 태블릿, 모바일 등 다양한 화면 크기에 맞게 웹 페이지의 레이아웃을 동적으로 조정하는 데 사용됩니다.

기본 문법

@media 미디어_타입 and (조건) {
    /*
    미디어 타입과 조건을
    모두 만족할 때 적용할
    스타일 선언문
    */
}

예제

@media screen and (min-width: 768px) {
  body {
    background-color: lightblue;
  }
}

뷰포트 너비가 768픽셀 이상일 때 배경색을 밝은 파란색으로 설정합니다.

미디어 타입

미디어 타입은 스타일이 적용될 장치의 유형을 지정합니다.
- all: 모든 장치에 적용
- print: 프린터 및 인쇄 미리보기
- screen: 컴퓨터 화면, 태블릿, 스마트폰 등
- speech: 스크린 리더 등 음성 합성 장치

조건

미디어 조건은 특정 미디어 기능에 대해 스타일을 적용할 기준을 정의합니다.
- width, min-width, max-width: 뷰포트의 너비
- height, min-height, max-height: 뷰포트의 높이
- aspect-ratio, min-aspect-ratio, max-aspect-ratio: 화면의 가로세로 비율
- resolution, min-resolution, max-resolution: 화면 해상도
- orientation: 화면 방향 (가로: landscape, 세로: portrait)
min-width는 화면의 크기가 특정 픽셀 이상일 때 스타일을 적용하는 조건입니다.
max-width는 화면 크기가 특정 픽셀 이하일 때 스타일을 적용하는 조건입니다.

중단점(Breakpoints) 설정

중단점은 특정 지점을 기준으로 기존 레이아웃 또는 스타일이 변경되는 지점을 결정합니다.
- 모바일 디바이스 576px,
- 태블릿 등 중간사이즈 디바이스 768px,
- 큰 디바이스 992px/1024px,
- 더 큰 디바이스 1200px 정도로 정리할 수 있다.

미디어 쿼리 주의사항

반응형 웹페이지는 모든 장치에 동일한 HTML과 CSS 파일을 전송하며, CSS 미디어 쿼리로 스타일을 조정합니다. 하지만 콘텐츠가 많은 웹페이지의 경우 필요하지 않은 리소스도 함께 로드되어 성능 저하 문제가 발생할 수 있습니다.
PC용 웹과 모바일 웹의 디자인을 각각 해당 환경에 최적화된 디자인을 목표로 하며, 사용자의 사용성을 우선으로 고려해야 합니다.
PC웹을 기준으로 디자인을 만들었다면, PC에 있는 컨텐츠를 모바일에 억지로 끼워 맞추는 것은 추천하지 않습니다. 그럴 경우 디자인의 목적이 사용성이 아니라 반응형 그 자체가 되어 버립니다.
가로값은 장치에 따라 100%를 유지하며, 높이값은 보통 변하지 않습니다. 컨텐츠가 많아지는 경우 스크롤로 넘기기 때문에 수직의 길이비율이 크게 문제가 되지 않습니다. 따라서 높이를 고정값으로, 폭을 100%로 잡는 방법을 사용하는 것이 좋습니다.
마지막으로, 반응형은 적재적소에 사용해야 하며, 만능 해결책이 아닙니다.

일단 따라 작성해보기

<body>
  <nav>
    <a href="#home">Home</a>
    <ul>
      <li>
        <a href="#Home">Learn More</a>
      </li>
      <li>
        <a href="#Home">About</a>
      </li>
      <li>
        <a href="#Home">Contact</a>
      </li>
    </ul>
    <a href="#signup">Sign Up</a>
  </nav>
  <h1>Media Queries</h1>
</body>

@media (max-width: 1500px) {
  h1 {
    color: yellow;
  }
}

@media (max-width: 1000px) {
  h1 {
    color: orange;
  }
}

@media (max-width: 500px) {
  h1 {
    color: red;
  }
}

body {
  font-family: "Open Sans", sans-serif;
}

h1 {
  font-size: 6em;
  text-align: center;
}
nav {
  font-size: 1.5em;
  display: flex;
  justify-content: space-between;
}

ul,
li {
  display: inline;
  margin: 0;
  padding: 0;
}

ul {
  flex: 1;
  max-width: 50%;
  display: flex;
  justify-content: space-evenly;
}

h1 {
  color: red;
}

@media (min-width: 500px) {
  h1 {
    color: orange; /* 브라우저 너비가 500px 이상일 때 h1 태그의 텍스트 색상 변경 */
  }
}

@media (min-width: 1000px) {
  h1 {
    color: yellow; /* 브라우저 너비가 1000px 이상일 때 h1 태그의 텍스트 색상 변경 */
  }
}

@media (min-width: 1500px) {
  h1 {
    color: green; /* 브라우저 너비가 1500px 이상일 때 h1 태그의 텍스트 색상 변경 */
  }
}

@media (max-width: 768px) {
  h1 {
    font-size: 4em; /* 브라우저 너비가 768px 이하일 때 h1 태그의 글꼴 크기 변경 */
  }
  nav,
  nav ul {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 576px) {
  h1 {
    font-size: 3em; /* 브라우저 너비가 576px 이하일 때 h1 태그의 글꼴 크기 변경 */
  }
}

일단 따라 작성해보기 - 2

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Price Tiers</title>

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,700">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css">

    <link rel="stylesheet" href="app.css">
</head>

<body>
    <div class="panel pricing-table">

        <div class="pricing-plan">
            <img src="icons/icon1.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Personal</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Custom domains</li>
                <li class="pricing-features-item">Sleeps after 30 mins of inactivity</li>
            </ul>
            <span class="pricing-price">Free</span>
            <a href="#/" class="pricing-button">Sign up</a>
        </div>

        <div class="pricing-plan">
            <img src="icons/icon2.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Small team</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Never sleeps</li>
                <li class="pricing-features-item">Multiple workers for more powerful apps</li>
            </ul>
            <span class="pricing-price">$150</span>
            <a href="#/" class="pricing-button is-featured">Free trial</a>
        </div>

        <div class="pricing-plan">
            <img src="icons/icon3.png" alt="" class="pricing-img">
            <h2 class="pricing-header">Enterprise</h2>
            <ul class="pricing-features">
                <li class="pricing-features-item">Dedicated</li>
                <li class="pricing-features-item">Simple horizontal scalability</li>
            </ul>
            <span class="pricing-price">$400</span>
            <a href="#/" class="pricing-button">Free trial</a>
        </div>

    </div>

</body>

</html>

html {
  box-sizing: border-box; /* 모든 요소의 너비를 padding과 border를 포함하여 계산 */
  font-family: "Open Sans", sans-serif;
}

body {
  background-color: #60a9ff;
  display: flex;
  justify-content: center; /* 가로 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
  min-height: 100vh; /* 최소 높이를 뷰포트의 100%로 설정 */
}

.panel {
  background-color: white;
  border-radius: 10px;
  padding: 15px 25px; 
  width: 100%;
  max-width: 960px; /* 최대 폭 설정 */
  display: flex;
  flex-direction: column;
  text-align: center;
  text-transform: uppercase;
}

@media (min-width: 900px) { /* 뷰포트 너비가 900px 이상일 때 적용 */
  .panel {
    flex-direction: row; /* 요소를 수평 방향으로 배치 */
  }
  .pricing-plan {
    border-bottom: none;
    border-right: 1px solid #e1f1ff;
    padding: 25px 50px;
  }
  .pricing-plan:last-child {
    border-right: none; /* 마지막 요소의 오른쪽 테두리 제거 */
  }
}