HTML(media_query)

728x90

미디어 쿼리(media query)

CSS2에서는 @media 규칙을 통해 서로 다른 매체 유형(media type)을 위한 맞춤식 스타일 시트(style sheet)를 지원합니다.

예를 들면, HTML 문서가 스크린에 표현될 때와 프린트할 때 서로 다른 스타일을 적용할 수 있습니다.

CSS3에서는 @media 규칙을 더욱 발전시켜 매체 유형(media type)과 하나 이상의 표현식(expression)으로 구성된 미디어 쿼리(media query)를 사용할 수 있습니다.

미디어 쿼리(media query)는 width, height, color 속성과 같은 미디어 관련 속성을 이용한 표현식을 통해 스타일이 적용되는 범위를 조절할 수 있습니다.

미디어 쿼리를 사용하면 콘텐츠(content)를 별도로 변경하지 않아도 웹 페이지에 접속하고 있는 기기에 알맞은 형태로 스타일이 조정됩니다.

미디어 쿼리 문법

다음은 같은 파일 내의 <style>태그 안에 미디어 쿼리가 위치할 경우의 문법입니다.

문법
@media only|not 매체유형 and (표현식) { CSS스타일코드; }

또 다른 방법으로는 외부 CSS 파일에 미디어 쿼리를 따로 저장할 수도 있습니다.

문법
<link rel="stylesheet" media="매체유형 and|only|not (표현식)" href="CSS파일URL"/>

만약 웹 페이지에 접속하고 있는 기기의 매체 유형과 명시된 매체 유형이 일치하고, 모든 표현식이 참(true)이면, 미디어 쿼리는 참(true)을 반환합니다.

이렇게 미디어 쿼리의 반환값이 참이면, 해당 블록 안에 명시된 CSS 스타일 코드가 실행됩니다.

여기에 and, only, not 등과 같은 키워드를 사용하여 더욱 복잡한 조건을 명시할 수도 있습니다.

CSS3 매체 유형(media type)

CSS3의 매체 유형은 이전 CSS2에서 정의된 것을 그대로 사용하고 있습니다.

다음은 자주 사용되는 매체 유형(media type)입니다.

all	모든 매체에 사용함.
print	프린터 기기에 사용함.
screen	컴퓨터나 태블릿, 스마트폰 등 스크린(screen)이 있는 매체에 사용함.
speech	웹 페이지를 읽어주는 스크린 리더(screenreader)에 사용함.

SS3 미디어 쿼리(media query) 속성

width	화면의 너비
height	화면의 높이
device-width	매체 화면의 너비
device-height	매체 화면의 높이
devie-aspect-ratio	매체 화면의 비율
orientation	매체 화면의 방향
color	매체의 색상 비트 수
color-index	매체에서 표현 가능한 색상의 개수
monochrome	흑백 매체에서의 픽셀당 비트 수
resolution	매체의 해상도

위의 속성 중에서 orientation 속성을 제외한 모든 속성의 앞에는 min 또는 max 접두사를 사용할 수 있습니다.

위의 속성들을 적절히 활용하면 반응형 웹 사이트를 손쉽게 제작할 수 있습니다.

CSS3 미디어 쿼리(media query) 예제

다음 예제는 뷰포트의 너비가 480픽셀이거나 그 이하일 경우에는 배경색을 darkorange로 표현해 줍니다.
하지만 뷰포트의 너비가 그 초과일 경우에는 배경색을 lightblue로 바꿔서 표현해 줍니다.

예제
<style>

    body { background-color: darkorange; }

    @media screen and (min-width: 480px) {

        body { background-color: lightblue; }

    }

</style>

다음 예제를 웹 브라우저에서 실행하면 배경색을 검정색으로, 텍스트의 색상은 흰색으로 표현합니다.

하지만 웹 페이지를 프린트하게 되면 배경색을 흰색으로, 텍스트의 색상을 검정색으로 바꿔서 프린트합니다.

예제
<style>

    @media screen {

        body { background-color: black; color: white; }

    }

    @media print {

        body { background-color: white; color: black; }

    }

</style>

이처럼 미디어 쿼리를 이용하면 매체에 따라 다른 동작을 하도록 손쉽게 설정할 수 있습니다.

https://www.tcpschool.com/css/css3_expand_mq

연습문제1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>상품 갤러리 만들기</title>
    <link rel="stylesheet" href="css/gallery.css" />
    <style>
      * {
        box-sizing: border-box;
      }

      #wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
        grid-gap: 1rem;
      }

      .card {
        background-color: #fff;
        box-shadow: 0px 1px 5px #222;
        text-align: justify;
      }

      .card > header {
        font-size: 1.5rem;
        padding: 0.5rem;
      }

      .card > p {
        padding: 0.5rem;
        line-height: 1.6rem;
      }

      .card > img {
        padding: 0.5rem;
        line-height: 1.6rem;
      }
    </style>
  </head>
  <body>
    <div id="wrapper">
      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-1.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-2.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-3.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-4.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-5.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-6.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-7.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>

      <div class="card">
        <header>
          <h3>사진 제목</h3>
        </header>
        <figure>
          <img src="images\cup-8.jpg" />
        </figure>
        <p>
          사진 설명 : Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Ullam, numquam. Neque mollitia esse blanditiis facere.
        </p>
      </div>
    </div>
  </body>
</html>

연습문제2.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>솔로의 식탁</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #container {
        width: 100%;
      }

      h1 {
        font-weight: bolder;
        font-style: calc();
        color: white;
        text-align: center;
        text-shadow: 5px 5px 5px black;
      }

      h2 {
        margin-left: 200px;
      }

      header {
        width: 100%;
      }

      #menus {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 400px);
        grid-template-areas:
          "menu1 menu2 menu3"
          "menu4 menu5 menu5";
        grid-gap: 10px;
        width: 100%;
      }

      #menu1 {
        background: url("images/dish1.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu1;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu2 {
        background: url("images/dish2.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu2;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu3 {
        background: url("images/dish3.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu3;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu4 {
        background: url("images/dish4.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu4;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu5 {
        background: url("images/dish5.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu5;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menus > div {
        position: relative;
        height: 400px;
      }

      #menus h2 {
        position: absolute;
        padding: 5px;
        font-size: 1em;
        color: white;
        text-shadow: 3px 3px 5px black;
        font-weight: bolder;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        right: 3%;
        bottom: 10px;
      }
      footer {
        width: 100%;
        background: #373737;
        height: 30%;
        font-size: 3em;
        margin-top: 5px;
        color: white;
        text-align: center;
      }

      footer p {
        font-size: 1em;
        color: #eee;
        text-align: right;
        line-height: 200px;
        margin: 0;
        text-align: center;
      }
    </style>
  </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>
      <section id="notice"></section>
      <footer>
        <p>솔로의 식탁</p>
      </footer>
    </div>
  </body>
</html>

연습문제3.html

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="utf-8" />
    <title>솔로의 식탁</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
      #container {
        width: 100%;
      }

      h1 {
        font-weight: bolder;
        font-style: calc();
        color: white;
        text-align: center;
        text-shadow: 5px 5px 5px black;
      }

      h2 {
        margin-left: 200px;
      }

      header {
        width: 100%;
      }

      #menus {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 400px);
        grid-template-areas:
          "menu1 menu2 menu3"
          "menu4 menu5 menu5";
        grid-gap: 10px;
        width: 100%;
      }

      #menu1 {
        background: url("images/dish1.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu1;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu2 {
        background: url("images/dish2.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu2;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu3 {
        background: url("images/dish3.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu3;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu4 {
        background: url("images/dish4.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu4;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menu5 {
        background: url("images/dish5.jpg") no-repeat center;
        background-size: cover;
        grid-area: menu5;
        border: 3px solid black;
        box-shadow: 5px 5px 5px gray;
        position: relative;
      }

      #menus > div {
        position: relative;
        height: 400px;
      }

      #menus h2 {
        position: absolute;
        padding: 5px;
        font-size: 1em;
        color: white;
        text-shadow: 3px 3px 5px black;
        font-weight: bolder;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        right: 3%;
        bottom: 10px;
      }
      footer {
        width: 100%;
        background: #373737;
        height: 30%;
        font-size: 3em;
        margin-top: 5px;
        color: white;
        text-align: center;
      }

      footer p {
        font-size: 1em;
        color: #eee;
        text-align: right;
        line-height: 200px;
        margin: 0;
        text-align: center;
      }

      @media screen and (max-width: 768px) {
      /* 모바일 화면보다 작은 화면에 적용할 스타일 */
      #menus {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, 400px);
        grid-template-areas:
          "menu1 menu1 menu1"
          "menu2 menu3 menu3";
      }
      #menu4, #menu5 {
        display: none;
      }
    }
    </style>
  </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>
      <section id="notice"></section>
      <footer>
        <p>솔로의 식탁</p>
      </footer>
    </div>
  </body>
</html>

728x90

'HTML' 카테고리의 다른 글

HTML(홈페이지만들기_주의사항)_2024-08-01 (0)	2024.08.01
HTML_현대자동차홈페이지_2024-07-15 (0)	2024.07.16
HTML(Animation)_2024-07-10 (0)	2024.07.11
HTML(transition)_2024-07-10 (0)	2024.07.10
HTML(button)_2024-07-09 (0)	2024.07.09

앵보

HTML(media_query)_2024-07-12

미디어 쿼리(media query)

미디어 쿼리 문법

CSS3 매체 유형(media type)

SS3 미디어 쿼리(media query) 속성

CSS3 미디어 쿼리(media query) 예제

연습문제1.html

연습문제2.html

연습문제3.html

'HTML' 카테고리의 다른 글

티스토리툴바

HTML(media_query)_2024-07-12

미디어 쿼리(media query)

미디어 쿼리 문법

CSS3 매체 유형(media type)

SS3 미디어 쿼리(media query) 속성

CSS3 미디어 쿼리(media query) 예제

연습문제1.html

연습문제2.html

연습문제3.html

'HTML' 카테고리의 다른 글

관련글

티스토리툴바