※ 미디어쿼리의 개요
반응형 웹을 구현할 때 여러가지 해상도를 가지고 있는 디바이스에 맞춰서 스타일 시트를 적용할 수 있도록 한다.(디바이스의 해상도에 맞게 스타일시트를 적용)
※ 디바이스의 웹 브라우저 해상도
1. 데스크탑: 모니터 해상도와 웹 브라우저 해상도가 같다.
4k: 3840px
FHD: 1920px
Notebook: 1920px
Laptop: 1440px
19인치 LCD: 1280px
17인치 LCD: 1024px
2. 모바일: 디스플레이 해상도와 웹 브라우저 해상도가 다르다.
태블릿: 768px, 820px
스마트폰: 360px, 420px
※ 미디어쿼리 중단점 지정
첫번째 영역: 1600px 이상
두번째 영역: 1000px 이상 1599px 이하
세번째 영역: 760px 이상 999px 이하(600px 이상 759px 이하)
네번째 영역: 360px 이상 599px 이하
※ 미디어쿼리 적용
1. @media 를 사용해서 미디어쿼리 중단점을 지정하는 방법
2. link 태그를 사용하여 미디어쿼리 중단점에 맞는 외부 스타일 시트 파일을 html 문서에 포함하는 방법