(CSS) @media (엣 미디어)

 

@media (max-width: 684px) {
  body {
    font-size: 1.53rem;
  }
}
@media (max-width: 382px) {
  body {
    font-size: 1.35rem;
  }
}

CSS 파일의 내용에 @(엣 혹은 엣사인) 표시가 되어 있는 경우가 있다.

엣사인은 CSS의 선택자와 속성을 표시하는 규칙인 Rule-set과는 다른 at-Rule(엣 규칙)이다.

 

위의 코드의 중괄호 {  } 전 부분  @media 는 Rule-set의 선택자(selector)가 아니고 

식별자(identifier)이다.

 

MDN에서 at-rule에 대한 내용은 여기에 있다.

 

오늘 다루는 @media는 최상위 코드나 조건부 그룹안에 중첩해서 작성할 수가 있다.

엣 미디어는 코드가 실행되는 장치가 미디어 질의(media query)를 사용하여 정의된 조건의 기준을 만족하면

해당 콘텐츠를 적용하는 조건부 그룹 규칙이다.

 

예를 들어서 미디어쿼리의 사용법을 알아보자.

지금 작업하는 웹페이지는 반응형이다. 화면의 크기가 800px일 경우 특정 div 태그의 내용을 보여주거나 보여주지 않게 하고 싶다.

 

(1) 화면 크기가 800px 이상일 때 부터 div 태그의 내용을 보여주지 않을 경우

(화면의 크기가 최소 800px일 때 부터 div 태그를 보여주지 않겠다) 

screen width  > 800px. ==> @media(min-width: 800px) 

@media(min-width:800px) {
  div {
       display: none;
  }
}

800px 보다 작을 때

화면크기가 800px보다 커지기 시작하니 div 태그 내용이 사라졌음

 

(2) 반대로 화면의 크기가 800px 보다 작아지면 div 내용을 보여주지 않을 경우

(화면의 크기가 최대 800px일 때까지는 div 태그를 보여주지 않겠다)

@media(max-width:800px) {
  div {
       display: none;
  }
}