CSS @media 를 정리하면서

@media CSS @규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다. @media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.

 

/* 최상위 코드 레벨 */
/* @media 타입 and (기능) { 스타일 }*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* 다른 조건부 @규칙 내에 중첩 */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

 

 

max-width 700px : 최대 가로너비가 700px이니까 700보다는 더 커질 수 없다. 즉 700px 이하일 때를 의미

아래 코드를 살펴보자

@media (max-width: 700px) and (max-width: 400px) {
  body {
    font-size: 10pt;
  }
}

- 이 코드의 의미는 700px 이하 ~ 400px 이상 에서만 중괄호 안의 코드를 수행한다.

 

 

not 연산자

@media not all and (max-width: 700px) and (max-width: 400px) {
  body {
    font-size: 10pt;
  }
}

- 주의점 : 미디어 타입을 반드시 명시해야 적용이 된다.

- 700px이하~ 400px이상이 아닐 때만 중괄호 안의 코드를 수행한다.

 

 

print 타입

@media print {
  body {
    font-size: 10pt;
  }
}

- 브라우저에서 인쇄를 눌렀을 때 어떻게 설정할지 결정하는 타입

- 인쇄를 고려할 수 있다.

 

 

tv 타입

@media tv {
  body {
    font-size: 10pt;
  }
}

- tv에서 어떻게 보일지 설정할 수도 있다.

 

 

all 타입

@media all and (max-width:700px) {
  body {
    font-size: 10pt;
  }
}

/*all은 기본 값이므로 명시하지않아도 되고 and 연산자를 사용하지 않아도 된다. */

- screen은 all에 해당하므로 all을 사용해도된다.

- 즉 아무것도 명시하지 않아도 가능하다.

 

 

 

orientation기능

orientation: portrait

- 세로길이가 가로길이보다 더 길 때

@media (orientation: portrait) {
  body {
    font-size: 10pt;
  }
}

 

orientation: landscape

- 가로길이가 세로길이보다 더 길 때

@media (orientation: landscape) {
  body {
    font-size: 10pt;
  }
}

 

- 두 기능은 스마트폰의 화면이 가로일 떄 세로일 때를 구분할 때 자주 쓰인다.

 

 

파일로 media를 구분해서 사용할 수 있다.

media규칙을 파일 단위로 관리할 수도 있다.

/*main.css*/
.box{
	width : 100px;
    height:100px;
    background-color: orange;
}

/*main-md.css*/
.box{
	width: 200px;
    background-color: royalblue;
}

html

...

<link rel"stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/main-md.css" media="all and (max-width:700px)">

..

- 위처럼 media 타입을 주면 된다.