본문 바로가기
LEARN/HTML | CSS

[부스트코스] 8 미디어 쿼리

by 아이엠제니 2022. 3. 22.

 

 

8. 미디어쿼리

1)미디어쿼리 소개

반응형 웹 사이트 제작에 반드시 필요한 기술

각 미디어 매체(screen, print)에 따라 다른 스타일 시트를 적용할 수 있게 만드는 것

 

 

 

2) 미디어 타입 & 미디어 특성

  • @media(at media)
  • 미디어 타입(Media Types)
  • 미디어 특성(Media Features)

 

@media mediaqueries { ... }
/* 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고,
거짓이면 무시됨 */
  • Media Types (미디어 타입)
    • all, braille, embossed, handheld, print, projection, screen, speech, tty, tv
    • all, print, screen 을 현업에서 많이 사용하는데, screen을 거의 대부분 쓴다고 함
  • Media Features (미디어 특성)
    • width, height, device-width, device-height, orientation, aspect-ratio, devidce-aspect-ratio, color, color-index, monochrome, resolution, sca, grid
    • width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말함 (스크린의 크기x)
    • orientation은 미디어가 세로모드인지 가로모드인지를 구분

 

https://www.w3.org/TR/css3-mediaqueries/#media1

 

 

 

3) Syntax - 1

media_query_list
 : S* [media_query [ ',' S* media_query ]* ]?
 ;
media_query
 : [ONLY | NOT]? S* media_type S* [ AND S* expression ]*
 | expression [ AND  S* expression ]*
 ;
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
  • S*은 공백
  • [ ] <= 대괄호 안에 내용은 있을 수도 있고, 없을 수도 있고! 생략이 가능함
  • | <= 파이프라인
    • a|b: a or b
  • 대괄호 뒤에 ?(물음표), *(별) 은 수량에 관한 의미
    • ? : 0 or 1
    • * : 0 or 1 or 그 이상

 

  1. 여러 개의 미디어 쿼리로 이루어진 리스트로 작성할 수 있음
  2. 미디어 타입 또는 표현식 단독으로도 작성할 수 있음
  3. 표현식은 값이 없이 특성 이름만으로 작성할 수 있음

 

 

3) Syntax - 2

예제 코드

@media screen {...}
: 미디어 타입이 screen이면 적용

@media screen and (min-wdith: 768px) {...}
: 미디어 타입이 screen이고 width가 768px 이상이면 적용됨. 두 개 중 하나라도 만족하지 않으면 거짓

@media (min-width: 768px) and (max-width: 1024px) {...}
: and는 연결된 모든 표현식이 참이면 적용됨

@media (color-index)
: 미디어 장치가 color-index를 지원하면 적용됨

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
: 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용

@media not screen and (min-width: 768px)
: not 키워드는 하나의 media_query 전체를 부정함
: (not screen) and (min-width: 768px) 잘못된 해석
: not (screen and (min width: 768px) 올바른 해석
: @medai not screen and (min-width: 768ox), print
  첫 번째 미디어 쿼리에만 not 키워드가 적용되며, 두 번째 미디어 쿼리(print)에는 영향이 없음

 

미디어 쿼리 선언 방법

@medai screen and (color) <= 가장 많이 사용
<link rel="stylesheet" media="screen and (color) href="example.css">
@import url(example.css) screen and (color);

 

 

 

4) 실습 - 1

1. 디스플레이 크기에 따른 <body> background-color 변경 (width)

  • 0~767px이면: gold
  • 768px~1024px이면: lightblue
  • 1025px~이면: lightpink
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      /* 1. 디스플레이 크기에 따른 background-color 변경 */
      @media screen and (max-width: 767px) {
        body {
          background-color: gold;
        }
      }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        body {
          background-color: lightblue;
        }
      }
      @media screen and (min-width: 1025px) {
        body {
          background-color: lightpink;
        }
      }
    </style>
  </head>
  <body>
    <p>
      W3C는
      <a href="https://www.w3.org/TR/css3-mediaqueirs/">CSS3 미디어쿼리 문서</a
      >를 2012년 6월에 표준 권고안으로 제정하였습니다.
    </p>
    <p>
      또한, 기존의 미디어쿼리 개선 작업을 진행 중이며, 2017년 9월에
      <a href="https://www.w3.org/TR/mediaqueirs-4/">미디어쿼리 레벨4</a>를
      발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
    </p>
  </body>
</html>

2. 페이지 인쇄하는 경우의 스타일 추가

  • 앵커 요소의 url 출력
  • 앵커 요소의 밑줄 제거
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      /* 2. 페이지 인쇄하는 경우의 스타일 추가 */
      @media print {
        a {
          text-decoration: none;
        }
        a:after {
          display: inline;
          content: "(" attr(href) ")";
        }
      }
    </style>
  </head>
  <body>
    <p>
      W3C는
      <a href="https://www.w3.org/TR/css3-mediaqueirs/">CSS3 미디어쿼리 문서</a
      >를 2012년 6월에 표준 권고안으로 제정하였습니다.
    </p>
    <p>
      또한, 기존의 미디어쿼리 개선 작업을 진행 중이며, 2017년 9월에
      <a href="https://www.w3.org/TR/mediaqueirs-4/">미디어쿼리 레벨4</a>를
      발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
    </p>
  </body>
</html>

밑줄 제거

 

 

 

 

 

 

부스트코스 [비전공자를 위한 HTML/CSS] 강의 공부 기록
300x250

'LEARN > HTML | CSS' 카테고리의 다른 글

[HTML] STYLING 웹페이지 스타일링  (0) 2022.12.26
[HTML] tag 태그  (0) 2022.12.25
[부스트코스] 7 CSS 레이아웃  (0) 2022.03.21
[부스트코스] 6-2 CSS 폰트, 텍스트  (0) 2022.03.20
[부스트코스] 6-1 CSS 폰트, 텍스트  (0) 2022.03.19

관련글

티스토리툴바