@media
@media CSS 규칙은 스타일 시트의 일부를 하나 이상의 미디어 쿼리 결과에 따라 적용할 때 사용할 수 있습니다.
@media를 사용해 미디어 쿼리를 지정하면 해당 쿼리를 만족하는 장치에서만 CSS 블록을 적용할 수 있습니다.
미디어 쿼리 적용방법
미디어 쿼리는 화면(screen), 티비(tv), 프린터(print)와 같은 미디어 타입(media type)과 적어도 하나 이상의 표현식(expression)으로 구성됩니다.
미디어 타입은 아래와 같이 대표적인 4가지의 타입이 존재합니다.
- all : 모든 경우의 해당
- screen : 스크린 화면
- print : 프린터
- tv : 텔레비전
표현식은 width, height, color와 같은 미디어 특성(media feature)들을 이용하여 그 특성들의 상태에 따라 다른 스타일 시트를 적용할 수 있습니다.
미디어 쿼리를 사용해서 css에 적용하는 방법은 아래와 같이 3가지 방법이 있습니다.
-
HTML의 HEAD의 link태그의 media속성에 지정하기
-
css파일내에서 @media 지정하기
-
css파일내에서 import 하기
link 태그를 통한 적용
<link href="css/common.css" rel="stylesheet" type="text/css" media="screen and (min-width:0px) and (max-width:480px)">css파일 내에 직접 media 규칙 적용
@media all and (min-width:480px) { ... }media 규칙을 설정한 파일을 css파일 내에서 import 해서 적용
/* common.css */
@import "../media.css";
/* media.css */
@media screen and (min-width:768px) { ... }미디어 쿼리 기본 설정 방법
기본적으로 아래와 같은 형태로 기본 설정을 다루며 다양한 미디어쿼리 요소들이 존재하므로 간단한 예시 코드를 통해 미디어 쿼리 사용법을 익혀봅시다.
@media 타입 and (기능) { 스타일 }480px이상의 미디어 타입의 경우
min-width는 뷰 영역에서의 최소 넓이. 즉, 지정한 사이즈보다 넓은 경우 적용됩니다.
@media (min-width:480px) { ... }
/* 위와 아래의 경우는 동일한 기능 수행 */
/* 즉, all이 기본값으로 생략가능하고 그로인해 and 역시 생략이 가능합니다. */
@media screen and (min-width:480px) { ... }480px에서 768px까지 넓이의 미디어 타입
max-width 는 뷰 영역에서의 최대넓이. 즉, 지정한 사이즈보다 작을 경우 적용됩니다.
@media screen and (min-width:480px) and (max-width:768px) { ... }and를 사용해서 모든 조건을 필요로 하는 미디어 타입
/* 모든 조건을 만족해야 css 적용됩니다. */
@media screen and (min-height:640px) and (min-width:480px) { ... }부정 연산을 통한 미디어 타입
/* 부정 연산은 반드시 미디어 타입이 명시되어야한다 */
@media not all and (max-width: 700px) and (min-width: 400px) { ... }화면의 세로너비가 가로너비보다 더 큰 경우
@media (orientation: portrait) { ... }화면의 가로너비가 세로너비보다 더 큰 경우
@media (orientation: landscape) { ... }참고자료
꾸준히 성장하는 개발자를 목표로 합니다.