프론트엔드/HTML, CSS

미디어쿼리

Ryuzy 2025. 4. 6. 17:41
728x90
반응형

1. 미디어쿼리

미디어쿼리는 웹 페이지가 다양한 장치(예: 데스크톱, 태블릿, 스마트폰 등)의 화면 크기나 해상도에 맞게 스타일을 다르게 적용할 수 있도록 도와주는 CSS 기능입니다. @media 규칙을 사용하여 특정 조건(화면 너비, 높이, 방향 등)에 따라 CSS를 분기하여 반응형 웹 디자인을 구현할 수 있으며, 이를 통해 사용자에게 보다 최적화된 화면 구성을 제공합니다.

@media (조건) {
  /* 이 조건에 맞을 때만 적용될 CSS */
}

 

주요 미디어쿼리 조건

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>미디어쿼리 화면 크기 예제</title>
  <style>
    body {
      background-color: lightgray; /* 기본 배경색 */
      color: black;
      text-align: center;
      padding: 50px;
      font-size: 1.5rem;
    }

    /* 화면 너비가 1024px 이상일 때 (데스크톱) */
    @media (min-width: 1024px) {
      body {
        background-color: lightblue;
      }
    }

    /* 화면 너비가 768px 이상 1023px 이하일 때 (태블릿) */
    @media (min-width: 768px) and (max-width: 1023px) {
      body {
        background-color: lightgreen;
      }
    }

    /* 화면 너비가 767px 이하일 때 (모바일) */
    @media (max-width: 767px) {
      body {
        background-color: lightcoral;
      }
    }
  </style>
</head>
<body>
  <h1>화면 크기에 따라 배경색이 달라집니다</h1>
  <p>브라우저 크기를 조절해보세요!</p>
</body>
</html>

 

2. 미디어쿼리 활용

아래 파일을 이미지를 다운습니다.

travel.zip
0.23MB

 

아래 코드를 ./css/media.css에 저장합니다.

#container {
    width: 100%;
}

header {
    width: 100%;
}

header > h1 {
    text-align: center;
    font-size: 40px;
}

#menus {
    width: 100%;
}

#menus > div {
    height: 300px;
    border: 1px solid black;
    margin-bottom: 15px;
    position: relative;
}

#menus h2 {
    position: absolute;
    font-size: 30px;
    right: 3%;
    bottom: 10px;
    color: white;
    text-shadow: 3px 3px 5px white;
}

#menu1, #menu2, #menu3, #menu4, #menu5 {
    width: 100%;
}

#menu1 {
    background: url(../images/travel1.jpg) no-repeat center/cover;
}

#menu2 {
    background: url(../images/travel2.jpg) no-repeat center/cover;
}

#menu3 {
    background: url(../images/travel3.jpg) no-repeat center/cover;
}

#menu4 {
    background: url(../images/travel4.jpg) no-repeat center/cover;
}

#menu5 {
    background: url(../images/travel5.jpg) no-repeat center/cover;
}

footer {
    width: 100%;
    background-color: black;
    height: 100px;
}

footer > p {
    font-size: 14px;
    color: white;
    text-align: center;
    line-height: 100px;
}

/* 테블릿 스타일 */
@media (min-width: 768px) and (max-width: 1024px) {
    #menus {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    #menu1, #menu2, #menu3, #menu4 {
        width: 49%;
    }
}

/* PC 스타일 */
@media screen and (min-width: 1025px) {
    #menus {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    #menu1, #menu2, #menu3, #menu4 {
        width: 32%;
    }
    #menu5 {
        width: 66%;
    }
}

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>미디어쿼리 활용</title>
    <link rel="stylesheet" href="./css/media.css">
</head>
<body>
    <div id="container">
        <header>
            <h1>여행가자!</h1>
        </header>
        <section id="menus">
            <div id="menu1">
                <h2>풍선</h2>
            </div>
            <div id="menu2">
                <h2>등산</h2>
            </div>
            <div id="menu3">
                <h2>비행기</h2>
            </div>
            <div id="menu4">
                <h2>배낭</h2>
            </div>
            <div id="menu5">
                <h2>기차</h2>
            </div>
        </section>
        <footer>
            <p>ⓒ 2025. 류지 All rights reserved.</p>
        </footer>
    </div>
</body>
</html>

 

728x90
반응형