Media Query

웹을 다양한 매체에서 선택적으로 적용할 수 있는 방법

link 요소의 media 속성

/* type은 거의 쓰지 않는다. */
/* 화면에 보여지는 스타일 */
<link rel="stylesheet" type="text/css" media="screen" href="screen.css">

/* 인쇄할 때 보이는 스타일 */
<link rel="stylesheet" type="text/css" media="print" href="print.css">

style 요소의 media 속성

<style type="text/css" media="screen">
	h1{
    	color:#000;
	}
</style>

@media 규칙

하나의 CSS 파일 내에서 특정 매체에만 지정할 속성
반응형 웹 디자인을 할 수 있다

@media (min-width: 768px) and (max-width: 800px) {
	width 50%;
    height: 50%;
}

반응형 사이트를 만들 때 고려할 점

작은 디바이스부터 시작하는 것이 좋다 > 리소스 로드 최적화
em, rem, %, vw 요소를 사용
- %는 부모 상자 안에서의 비율
- vw는 viewport 전체에서의 비율
inherit 보다는 %를 사용
vw 사용시 글자의 크기가 너무 크거나 작아질 수 있으니 최소, 최대 크기 적용
- clamp(min, val, max)