[#7] 화면 크기에 반응하는 미디어 쿼리

07-1 뷰포트와 미디어 쿼리 알아보기

뷰포트(viewport): 화면의 크기나 기기의 방향을 체크할 때 사용하는 것

<meta name="viewport" content="width=device-width, initial-scale=1"> width=device-width: 문서 너비를 현재 기기의 너비에 맞춥니다 initial-scale=1: 문서를 불러와 화면에 표시할 때 기본 배율을 1로 지정합니다.

미디어쿼리(media query)

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

@media screen and (min-sidth:921px) and (max-width: 1260px) {}

 

07-2 미디어 쿼리 사용하기

방법 1. 외부 CSS 파일로 정의하기

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

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

방법 2. 웹 문서에서 직접 정의하기

<style media="미디어 쿼리 조건">     스타일 규칙들 </style>

<style> @media 미디어 쿼리 조건 {     스타일 규칙들 } </style>

 

07-3 가변 이미지

가변 이미지: 화면 너비에 따라 이미지의 너비와 높이가 바뀌는 이미지

img {     max-width: 100%     height: auto; }

<img> 태그의 srcset 속성

 

07-4 가변 동영상

<video> 태그를 사용할 경우

<object>나 <iframe> 태그를 사용할 경우