[Responsive web] 미디어쿼리란?

zenghyun 2023. 1. 18. 11:43

미디어쿼리에 대해 알아보자

[ 미디어쿼리 ]

미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다.

@media only all and (조건문) {실행문}

@media : 미디어 쿼리가 시작됨을 표시한다.

only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능)

all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능)

all : 모든 미디어 유형해서 사용할 CSS를 정의
print : 인쇄 장치에서 사용할 CSS를 정의
screen : 컴퓨터 스크린에서 사용할 CSS를 정의
aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의
tv : TV에서 사용할 CSS를 정의
handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의
projection : 프로젝트를 위해 사용할 CSS를 정의

and : 앞과 뒤의 조건을 나타낸다. (생략가능)

(조건문) : 해당 조건을 설정할 수 있다.

{실행문} : 조건에 따른 실행을 설정한다.

<!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>mediaQuery</title>
  <style>
    body{ 
      background-color: #b71c1c;
      color: #fff;
    }
    h1::before{ content: '1. ';}
    h1::after {content: '- 기본';}
    
    /* 화면 너비가 0 ~ 1280px : 데스크탑/ TV */
    @media (max-width:1280px){
      body { background-color: #880e4f;}
      h1::before{ content: '2. ';}
      h1::after {content: '- 1025px ~ 1280px';}
    }
    /* 화면 너비가 0 ~ 1024px : 데스크탑 */
    @media (max-width:1024px){
      body { background-color: #4a148c;}
      h1::before{ content: '3. ';}
      h1::after {content: '- 961px ~ 1024px';}
    }
    /* 화면 너비가 0 ~ 960px  :노트북*/
    @media (max-width:960px){
      body { background-color: #311b92;}
      h1::before{ content: '4. ';}
      h1::after {content: '- 769px ~ 960px';}
    }
    /* 화면 너비가 0 ~ 768px : 타블렛*/
    @media (max-width:768px){
      body { background-color: #4a148c;}
      h1::before{ content: '5. ';}
      h1::after {content: '- 577px ~ 768px';}
    }
     /* 화면 너비가 0 ~ 576px : 모바일 */
     @media (max-width:576px){
      body { background-color: #004b40}
      h1::before{ content: '6. ';}
      h1::after {content: '- 0 ~ 576px';}
    }
    
    
  </style>
</head>
<body>
  <h1>미디어쿼리</h1>
  <p>미디어 쿼리는 화면 크기에 따른 각각의 속성 값을 지정하여, 여러가지 화면을 구성하는 기술이다.</p>
  <p> @media only all and (조건문) {실행문} </p>
  <ul>
    <li>@media : 미디어 쿼리가 시작됨을 표시한다.</li>
    <li>only : 미디어 쿼리 구문을 해석하라는 명령어이다. (생략가능)</li>
    <li>all : 미디어 쿼리를 해석해야 할 대상을 나타낸다. (생략가능)</li>
      <ul>
        <li>all : 모든 미디어 유형해서 사용할 CSS를 정의</li>
        <li>print : 인쇄 장치에서 사용할 CSS를 정의</li>
        <li>screen : 컴퓨터 스크린에서 사용할 CSS를 정의</li>
        <li>aural : 화면을 읽어 소리로 출력해주는 장치에서 CSS를 정의</li>
        <li>tv : TV에서 사용할 CSS를 정의</li>
        <li>handheld : 손에 들고 다니는 장치를 사용할 CSS를 정의</li>
        <li>projection : 프로젝트를 위해 사용할 CSS를 정의</li>
      </ul>
      <li>and : 앞과 뒤의 조건을 나타낸다. (생략가능)</li>
      <li>(조건문) : 해당 조건을 설정할 수 있다.</li>
    <li>{실행문} : 조건에 따른 실행을 설정한다.</li>
  </ul>
</body>
</html>

body{ 
      background-color: #b71c1c;
      color: #fff;
    }
    h1::before{ content: '1. ';}
    h1::after {content: '- 기본';}
    
    /* 화면 너비가 0 ~ 1280px : 데스크탑/ TV */
    @media (max-width:1280px){
      body { background-color: #880e4f;}
      h1::before{ content: '2. ';}
      h1::after {content: '- 1025px ~ 1280px';}
    }
    /* 화면 너비가 0 ~ 1024px : 데스크탑 */
    @media (max-width:1024px){
      body { background-color: #4a148c;}
      h1::before{ content: '3. ';}
      h1::after {content: '- 961px ~ 1024px';}
    }
    /* 화면 너비가 0 ~ 960px  :노트북*/
    @media (max-width:960px){
      body { background-color: #311b92;}
      h1::before{ content: '4. ';}
      h1::after {content: '- 769px ~ 960px';}
    }
    /* 화면 너비가 0 ~ 768px : 타블렛*/
    @media (max-width:768px){
      body { background-color: #4a148c;}
      h1::before{ content: '5. ';}
      h1::after {content: '- 577px ~ 768px';}
    }
     /* 화면 너비가 0 ~ 576px : 모바일 */
     @media (max-width:576px){
      body { background-color: #004b40}
      h1::before{ content: '6. ';}
      h1::after {content: '- 0 ~ 576px';}
    }

기본 화면

  body{ 
      background-color: #b71c1c;
      color: #fff;
    }
    h1::before{ content: '1. ';}
    h1::after {content: '- 기본';}

화면 너비가 1025px ~ 1280px 사이

 /* 화면 너비가 0 ~ 1280px : 데스크탑/ TV */
    @media (max-width:1280px){
      body { background-color: #880e4f;}
      h1::before{ content: '2. ';}
      h1::after {content: '- 1025px ~ 1280px';}
    }

화면 너비가 961px ~ 1024px 사이

 /* 화면 너비가 0 ~ 1024px : 데스크탑 */
    @media (max-width:1024px){
      body { background-color: #4a148c;}
      h1::before{ content: '3. ';}
      h1::after {content: '- 961px ~ 1024px';}
    }

화면 너비가 769px ~ 960px 사이

 /* 화면 너비가 0 ~ 960px  :노트북*/
    @media (max-width:960px){
      body { background-color: #311b92;}
      h1::before{ content: '4. ';}
      h1::after {content: '- 769px ~ 960px';}
    }

화면 너비가 577px ~ 768px 사이

  /* 화면 너비가 0 ~ 768px : 타블렛*/
    @media (max-width:768px){
      body { background-color: #4a148c;}
      h1::before{ content: '5. ';}
      h1::after {content: '- 577px ~ 768px';}
    }

화면 너비가 0px ~ 576px 사이

 /* 화면 너비가 0 ~ 576px : 모바일 */
     @media (max-width:576px){
      body { background-color: #004b40}
      h1::before{ content: '6. ';}
      h1::after {content: '- 0 ~ 576px';}
    }

저작자표시 비영리 (새창열림)