1. 미디어 쿼리
ㅇ 미디어 쿼리 이란?
- 개발자가, 반응형 웹 디자인을, CSS 만으로 구현하기 위해,
- 사용자의 현재 사용 중인, 입출력 미디어의 유형,특성에 대한,
- 쿼리(질의) 및 그에따른 스타일 지정
ㅇ 적용 방법
- CSS 스타일 구문에 기술하는 방법
. @media 규칙 : 例) @media screen and (max-width: 768px) { 스타일 설정 내용 }
. @import 규칙 : 例) @import url(스타일 설정된 파일명) screen and (max-width: 768px);
- HTML link 요소를 이용하는 방법
. 例) <link rel="stylesheet" type="text/css" media="screen and (max-width: 768px)" href="스타일 설정된 파일명">
2. @media 규칙
ㅇ 형식) @media (특정 미디어 조건) { 스타일 설정 내용 }
- @media : 미디어 종별(특정 조건)에 따라, 다른 스타일 설정을 줄 수 있음
- `특정 미디어 조건` = `미디어 유형` and `미디어 특성`
- `미디어 유형 (media type)`
. 종별 : print, screen, handheld, braille, projection, tty, tv
. 모든 미디어 유형 : all
- `미디어 특성 (media feature)`
. 종별 : device-width, height, orientaion, color, resolution 등
. min-,max- 접두사 : 이를 이용하여 최대값,최소값 이하/이상인지를 확인 가능
ㅇ 例) @media screen and (max-width: 768px) { 스타일 설정 내용 }
- 만일, @media (min-width: 768px) { 스타일 설정 내용 } 이면,
. all인 경우로써, 모든 미디어 유형(screen,print,handheld 등)에 해당
- 스크린 미디어 유형으로, 최대 768 픽셀 이하이면 (즉, 모바일), { } 안의 설정 내용을 적용
. 통상적으로,
. 스마트폰 : 768px 미만
. 테블릿 : 768px ~ 1720px 사이
. 데스크톱 : 1720px 이상