미디어 쿼리

hanahana·2022년 7월 30일
CSShtml
0

네이버 부스트코스-html/css

목록 보기
17/17
post-thumbnail

미디어 타입 & 미디어 특성

선언방법 : @media media queris{...}

  • media queries : 참이면 {..] 뒤에 문이 실행되고 거짓문이면 실행되지 않음

미디어 타입

  • all, braille, embossed, handheld, print, projection, screen, speech, tty, tv

우리가 알아야 할 타입은 all, print, screen 정도입니다. 그 중에서도 screen이 거의 대부분입니다.

all

all 타입은 모든 미디어에 적용되는 타입입니다. 미디어를 구분하는 용도가 아니기 때문에 유용하게 사용되지는 않습니다.

print

print 타입도 간혹 사용이 됩니다. 실습할 때 다룹니다. 폰트가 약간크고 프린트미리보기에서도 사용됨

screen

화면을 출력하는 디스플레이가 있는 미디어들은 전부 screen에 속하기 때문에 현실적으로 고려해야하는 미디어들은 전부 여기에 해당이 됩니다.

미디어 특성

  • width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid

미디어 특성 역시 우리가 알아야 할 특성은 width와 orientation 정도입니다.

width

width는 뷰포트의 너비, 즉 브라우저 창의 너비를 말합니다.(스크린의 크기 x)

oreintation

orientation은 미디어가 세로모드인지 가로모드인지를 구분합니다.

미디어 쿼리에서는 이 구분을 width와 height 특성의 값을 비교해서 height가 width보다 같거나 크면 세로모드

반대인 경우에는 가로모드라고 해석합니다. 세로모드에서는 portrait, 가로모드에서는 landscape 키워드와 매칭이 됩니다.

Syntax

디어 쿼리 Syntax

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* : 공백, none
  • [] 대 괄호 : 있을수도 있고 없을수도 있다, 생략이 가능하다
  • a|b : a or b
  • ()? : 0 or 1
  • ()* : 0or1or…n 연속적으로 계속 나올수 있다
  • mediatype : all screen print, …
  • media_feature : width, orientation, …
  • '' : 반드시 들어가야 하는 것을 작은 따옴표로 표시
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 : 미디어 특성
  • 미디어 타입 또는 단독으로 작성할수 있다
expression
 : '(' S* media_feature S* [ ':' S* expr ]? ')' S*
 ;
  • 괄호안에 작성해야 함 (특정이름 [: 값])
  • 표현식은 값없이 특성 이름만으로도 잘성할수있다

media_query_list    : 여러개의 미디어 쿼리로 이루어진 리스트로 작성 가능하며, 쉼표를 이용해서 구분합니다.

media_query    : A 형태 - 미디어 타입에 and 키워드를 이용해서 미디어 표현식을 붙일 수 있습니다.   
미디어 타잎 앞에는 only 또는 not 키워드가 올 수 있습니다. 
미디어 표현식은 생략 가능하기 때문에 미디어 타입 단독으로 사용될 수 있습니다.

: B 형태 - 미디어 타입 없이 미디어 표현식이 바로 나올 수 있습니다.(미디어 타입이 명시되지 않으면 all로 간주합니다.)                   미디어 표현식은 and 키워드를 이용해서 계속해서 나올 수 있습니다.

expression    : 미디어 표현식은 괄호로 감싸야 하며, 특성 이름과 해당하는 값으로 이루어집니다. 이름과 값은 : 기호로 연결합니다.      또, 값이 없이 특성 이름만으로도 작성할 수 있다.

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

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

@media (min-width: 768px) and (max-width: 1024px) { ... }
    : and는 연결된 모든 표현식이 참이면 적용됩니다.(and 키워드는 연결된 부분이 모두 참이어야 적용이 됩니다.)

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

@media screen and (min-width: 768px), screen and (orientation: portrait), ...
    : 쉼표로 연결된 미디어 쿼리 중 하나라도 참이면 적용됩니다.( and 키워드와 반대라고 생각하면 됩니다.)

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

미디어 쿼리 선언 방법

미디어 쿼리를 선언하는 3가지 방법에 대해 알아보겠습니다.

참고로 @media를 이용한 방법을 가장 많이 사용하며 나머지 2가지 방법은 거의 쓰이지 않습니다.

@media screen and (color)
    : CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. 대부분의 경우 이렇게 사용합니다.

<link rel="stylesheet" media="screen and (color)" href="example.css">
   : <link> 태그의 media 속성에 미디어 쿼리를 선언합니다. 미디어 쿼리가 참이면 뒤에 css 파일 규칙이 적용됩니다.

@import url(example.css) screen and (color);
    : CSS 파일 내부에 또는 <style> 태그 내부에 사용가능 합니다. @import문 뒤에 미디어 쿼리를 선언하면 됩니다.
  • @media screen{..} : 미디어 타입이 screen경우 …를 적용
  • media screen and (min-width:768px){...} : 미디어 타입이 screen이고 width 768보다 클때 적용
    • min최소 / max최대 : 크기를 유연하게 지정할수있음
    • orientation , grid. scan에는 이 값을 붙일수 없음
    • orientation : portatit (세로로길때) , landscape (가로로 길때)
  • @media(min-width:768px) and (max-width:1024px){...}: width768보다 크면서 1024보다 작을때 적용
    • ()괄호안에 조건이 없을때는 all이라고 해석함
    • and 좌우 두값이 참일때만적용
  • @media(color-index) : 미디어 장치가 color index를 지원할때만 적용
  • @media screen and (min-width:768px), screen and (oriental:portrait),... : 미디어 스크린이며 width가 768보다 클때 혹은 세로값이 긴 형태일때
    • ,로 표기한 조건은 or의 의미를 가져서 좌우 둘중 하나만 참이여도 실행된다
  • @media not screen and (min width)

    • not은 뒤의 조건 하나를 부정한다 ,로 나누어진 다른 조건은 부정하지 않는다 (and는 포함한다)

    • not(screen and (min width))

      @media

      style태그 안쪽에 선언할수있다.

      스타일시트를 불러오는 태그에 삽입하여 적용할수 있다, 조건이 충족하지 않아도 파일은 다운받아진다

      <link rel="stylesheet" media="screen and (color)" herf="example.css">

      @import

      @import url(example.css) screen and (color);

      실제로는 거의 사용되지 않는다

실습

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>media Queries</title>
<style>
/*
@media screen and (min-width:768px) and (max-width:1024px) {
  body{background-color:lightblue;}
}
@media screen and (max-width:767px) {
  body{background-color:gold;}
}

@media screen and (min-width:1025px) {
  body{background-color:lightpink;}
} */
/*mobile first*/
 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;}
}
/*desktop first*/
/*
body {
 background-color:lightpink;
}
@media screen and (min-width:768px) and (max-width:1024px) {
 body{background-color:lightblue;}
}
@media screen and (max-width:767px) {
 body{background-color:gold;}
}
*/

@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-mediaqueries/">CSS3미디어 쿼리 문서</a>를 2012년 6월에 표준 권고안으로 제정하였습니다.
  </p>
  <p>
    또한, 기존의 미디어쿼리 개선 작업을 진행중이며, 2017년 9월에
    <a href="https://www.w3.org/TR/mediaqueries-4">미디어퀄 레벨4</a>를
     발표했습니다. 이 문서는 현재 유력 표준 권고안입니다.
  </p>
  </body>
</html>
@media screen and (min-width:768px) and (max-width:1024px) {
  body{background-color:lightblue;}
  • screen에서만 작동한다.
  • 최소 넓이 768 최대넓이 1024 에서만 작동한다
  • body안에 배경색을 light blue로 한다
  • and태그를 이용하였다 조건 and 조건 and 조건으로 조건이 모두 참이어야 한다
  • {}안에 실행될 값을 입력한다
@media screen and (max-width:767px) {
  body{background-color:gold;}
}
  • 최대 넓이 767 일때 (767보다 작을때) 배경색은 gold이다
@media screen and (min-width:1025px) {
  body{background-color:lightpink;}
  • 최소넓이 1025 (1025이상일때) 배경색은 lightpink이다
@media print {
	a {text-decoration:none;}
	a:after {
    display:inline;
    content: '('attr(href)')';}
}
  • print했을때만 실행된다
  • a태그를 입력한 값은 text-decoration이 모두 무표화된다
  • a:after - a태그 뒤에 {}값이 실행된다
    • inline속성 : 한줄에 계속 다음요소가 이어진다.
    • content값이 출력된다 이 출력값은 : (주소이다)
    • ‘(’는 (뒤에 공백을 넣기 위한 표시이다

기기에 따른 @media의 선언

  • 모바일은 가로값이 적기 때문에 max-width를 선언하지 않고 적은 값을 기본값으로 선언한다
  • 데스크탑은 가로값이 넓기때문에 넓은 값을 기본으로 선언하고 적은 값들에만 반응형 값을 준다

결과

https://hana78786.github.io/1/bostcourse_htmlcss/6-1.html

profile
hanahana
hello world
이전 포스트

레이아웃

0개의 댓글