미디어 쿼리 사용법 (1)

미디어 쿼리란?

: 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다. 표현식은 weight, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용 할 수 있습니다. 미디어 쿼리는 CSS3에 포함되어 있으며, 컨텐츠의 변경없이 주로 화면의 크기에 따라 스타일 시트를 다르게 하여 적절한 모양으로 보여 줄 수 있습니다.

 

사용방법

1) <link> 요소에 사용하여 특성이 조건에 맞을 때 css 파일을 불러옵니다. media 속성의 "screen and (max-width: 768px)"의 의미는 미디어 타입이 스크린이고, 화면의 최대 너비가 768px로 지정하는 것입니다. 그러므로 화면의 너비 768px 이하 일때만 적용이 됩니다.

<link rel="stylesheet" media="screen and (max-width: 768px)" href="mystyle.css" />

출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]

 

2) 스타일 시트 내에서 @media를 사용합니다. 결과는 위와 동일한 조건이고, 그 조건에 맞으면 {...} 안의 스타일이 적용 됩니다.

@media screen and (max-width: 768px) { 
	body { 
    	background-color: lightgreen; 
    }
}

출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]

• @media (max-width: 768px) {...}처럼 미디어 타입을 생략하면 all 기본값이 되어 모든 미디어 타입에 적용이 됩니다.
• 미디어 타입에 사용되는 값은 여러 종류가 있지만 웹 사이트를 만드는 데는 screen을 사용하거나 all 을 사용 하는 것이 일반적입니다.
• 미디어 특성에서 max-width 와 min-width 가 가장 일반적으로 쓰입니다.
  그 외에 height, color, orientation(화면의 가로 세로 방향) 등이 있습니다.

 

반응형 웹을 만들 때 모바일 우선 vs 데스크톱 우선

: 반응형 웹을 만들 때 스타일을 작성하는 기준으로 모바일을 우선으로 할 지, 데스크탑을 우선으로 할 지가 먼저 고려되는 편입니다.

 

모바일을 우선으로 작성 할 경우 아래와 같습니다.

/* 모바일에 적용될 스타일을 먼저 작성합니다. */

@media screen and (min-width: 769px) {
   /* 데스크탑에서 사용될 스타일을 여기에 작성합니다. */
}


출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]

 

데스크탑을 우선으로 작성 할 경우 아래와 같습니다.

/* 데스크탑에서 사용될 스타일을 먼저 작성합니다. */

@media screen and (max-width: 768px) {
    /* 모바일에 사용될 스트일 시트를 여기에 작성합니다. */
}


출처: https://offbyone.tistory.com/121 [쉬고 싶은 개발자]

미디어 쿼리는 거의 모든 최신 브라우저에서 잘 동작합니다. 인터넷 익스플로러는 9버전 부터 지원합니다. 

만약 자신이 제작하는 반응형 웹이IE8 이하에서도 동작을 하여야 한다면 polyfill 을 사용하여야 합니다.

 

출처

https://offbyone.tistory.com/121

반응형 웹을 위한 미디어 쿼리 사용법(CSS media queries)