미디어 쿼리

미디어 쿼리 이해하기

미디어 쿼리 : CSS3 모듈 중 하나로 사이트에 접속하는 장치에 따라 특정한 CSS 스타일을 사용하도록 해준다.

기본형 : @media [only | not] 미디어 유형 [and 조건] * [and 조건]

 

연산자 : and(조건 추가), 쉼표(동일한 연산),

           only(미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식하게 해) not(다음에 지정하는 미디어 유형을 제외)

미디어 유형의 종류

미디어 쿼리의 조건

뷰포트 : 실제 웹 문서의 내용이 화면에 보이는 영역

웹 문서의 가로 너비와 세로 높이

width,height | min-width, min-height | max-width, max-height

단말기의 가로 너비와 세로 높이

dvice-width, device-height | min-device-width, min-device-height | max-device-width, max-device-height

화면회전

orientation : portrait (단말기 세로) | orientation : landscape(단말기 가로)

	@media screen and (orientation:landscape) {
		body {background-color:orange;}
	}
	@media screen and (orientation:portrait) {
		body {background-color:yellow;}
	}

화면 비율

aspect-ratio(화면 비율(width/height) | min-aspect-ratio(최소) | max-aspect-ratio(최대)

단말기 화면 비율

device-aspect-ratio(단말기 화면비율(width/height) | min-device-aspect-ratio(최소) | max-device-aspect-ratio(최대)

@media all and (device-aspect-ratio:16/9){...} //화면 비율 16:9
@media all and (min-device-aspect-ratio:16/9){...} // 16:9 이상
@media all and (max-device-aspect-ratio:16/9){...} // 16:9 이하

색상당 비트 수

color : 비트 수, min-color : 최소 비트 수, max-color : 최대 비트수

/* 컬러를 지원하면 실행 */
@media all and (color) { ...}
/* 컬러를 지원하지 않으면 실행 */
@media all and (color:0) { ...}
/* 8비트 색상이라면 실행 */
@media all and (color:3) { ...}
/* 8비트 이하 색상이라면 실행 */
@media all and (min-color:3) { ...}

미디어 쿼리 중단점 만들기

중단점 : 서로 다른 CSS를 적용할 화면 크기

모바일 퍼스트 : 모바일을 먼저 고려해 미디어 쿼리를 작성하는 것

보통 모바일 => 태블릿 => 데스크톱 순으로 만들어

미디어 쿼리 적용하기

외부 CSS 파일 연결하기

1. link 태그 사용하기

기본형 : <link rel="stylesheet" media="미디어 쿼리 조건" href="css 파일 경로">

2. @import 구문 사용하기

기본형 : @import url(css 파일 경로) 미디어 쿼리 조건

link 태그가 안정적이고 빨라

 

웹 문서에서 직접 정의하기

1. 기본형 : <style media="미디어 쿼리 조건">스타일 규칙들</style>

2. 기본형 : <style>@media 미디어 쿼리 조건{스타일 규칙들}<style>

미디어 쿼리를 사용해 웹 문서 만들기