0. 미디어 쿼리란?
- Media Query
- 반응형 웹을 디자인할 때, 접근하는 기기에 따라 다른 스타일을 적용해주어야 하는데, 이때 활용할 수 있는 스타일 시트
- 단말기의 유형 (출력물 vs 화면)과, 어떤 특성 혹은 수치(화면 해상도, 뷰포트 너비 등)에 따라 웹 사이트나 앱의 각각의 스타일을 설정할 때 유용
- 미디어 유형과 미디어 특성을 기반으로 동작
1. 미디어쿼리 작성 방식
1.1 link 요소 사용
- <link> 요소에 사용하게 되면, 특성이 조건에 맞을 때, css 파일을 불러오게 됨
- media 속성의 "screen and (max-wodth: 768px)"의 의미
: 미디어 타입 : screen / 화면의 최대 너비 : 768px로 지정 => 화면의 너비가 768px 이하 일 때 적용되는 것
<link rel="stylesheet" media="screen and (max-width: 768px)" href="style.css" />
1.2 @media 사용
- 스타일 시트 내에서 @media 사용
- 설정한 조건이 맞으면 { ... } 안의 스타일 적용
@media screen and (max-width: 768px) {
/* 화면 너비가 768px 이하일 때 */
body {
background-color: skyblue;
}
}
2. 미디어 유형
미디어 유형 | 설명 |
all | 모든 미디어 유형 |
screen | 컴퓨터 스크린 (스마트폰 포함) |
인쇄 장치 | |
tv | 음성과 영상이 동시 출력되는 tv |
aural | 음성 합성 장치 (주로 화면을 읽어 소리로 출력해주는 장치 |
braille | 점자 표시 장치 |
handheld | 패드(pad)처럼 손에 들고 다니는 장치 |
projection | 프로젝터 |
tty | 디스플레이 기능이 제한된 장치 (픽셀(px) 단위 사용 불가) |
embossed | 점자 프린터 |
미디어 쿼리에 작성할 수 있는 미디어 유형은 이렇게 다양하게 존재하나, 대체적으로 all, screen, print 이 세 유형을 가장 많이 사용한다.
만약 미디어 유형을 생략하고 작성할 경우, 기본값인 all 이 적용된다.
3. 논리 연산자
연산자 | 설명 |
and | 여러 조건이 모두 사실일 경우 적용 |
, | 앞 뒤 조건 중 하나만 사실이더라도 스타일 적용 |
only | 미디어 쿼리를 지원하는 웹 브라우저에서만 조건을 인식. ( 지원하지 않는 경우, 미디어 쿼리 실행 X ) |
not | not 다음에 지정하는 미디어 유형을 제외 |
/* 뷰 포트의 너비가 768px 이상이고 1024px 이하면 적용 */
@media all and (min-width: 768px) and (max-width: 1024px) { ... }
/* 뷰 포트의 너비가 768px 이상이거나 또는 1024px 이면 적용 */
@media all and (width: 768px), (width: 1024px) { ... }
/* 뷰 포트의 너비가 768px 이상이고 1024px 이하가 아니면 적용 */
@media not all and (min-width: 768px) and (max-width: 1024px) { ... }
이렇게 간단한 코드를 통해 미디어 쿼리의 조건에 사용할 수 있는 논리 연산자를 확인해 볼 수 있다.
4. 미디어 쿼리 조건
조건문 | 설명 | 조건값 | min/max 사용 여부 |
width | 웹페이지의 가로 너비 | width 속성에서 사용할 수 있는 모든 속성 값 | O |
height | 웹페이지의 세로 높이 | ||
Device-width | 기기의 가로 너비 | ||
Device-height | 기기의 세로 높이 | ||
orientation | 기기의 화면 방향 | Portrait (세로) Landscape (가로) |
X |
Aspect-ratio | 화면 비율 | 브라우저 화면 비율 (1) 브라우저 종횡비 (16 / 9) 기기 해상도(640 / 320) |
O |
Device-aspect-ratio | 단말기의 화면 비율 | 브라우저 화면 비율 (1) 브라우저 종횡비 (16 / 9) 기기 해상도(640 / 320) |
|
color | 기기의 비트 수 | 8 (bit 단위) | |
Color-index | 기기의 색상 수 | 128 (색상 수 단위) | |
monochrome | 기기가 흑백일 경우 픽셀당 비트 수 | 1 (bit 단위) | |
resolution | 기기의 해상도 | 300dpi/dpcm | |
scan | TV의 스캔 방식 | Progressive/interlace | X |
grid | 기기의 그리드 / 비트맵 | 0 (비트맵 방식) / 1(그리드 방식) |
조건문은 조건문이 사실일 경우 스타일을 적용하기 위해 작성하는 조건들을 말한다.
앞서 소개한 논리 연산자인 and 혹은 , 기호를 사용해 두 가지 이상도 작성할 수 있으며, 경우에 따라 생략도 가능하다.
5. 주의사항
1) 띄어쓰기
논리 연산자인 and 구문을 사용할 때, and 구문 뒤에는 항상 공백을 한 칸 띄워야 한다.
공백을 넣지 않고 미디어 쿼리 작성 시 정상적으로 작동하지 않는다.
@media all and (min-width:320px){실행문}
/* 띄어쓰기 o => O */
@media all and(min-width:320px){실행문}
/* 띄어쓰기 x => X */
2) min / max 작성 순서
min 사용시에는 반드시 크기(width)가 작은 순으로 작성
( min : 최소 혹은 그 이상 / 크기가 점차 커지는 것을 의미 )
max 사용시에는 반드시 크기(width)가 큰 순으로 작성
( max : 최대 혹은 그 이하 / 크기가 점차 작아지는 것을 의미 )
@media all and (min-width:320px){실행문}
@media all and (min-width:768px){실행문}
@media all and (min-width:1024px){실행문}
@media all and (max-width:1024px){실행문}
@media all and (max-width:768px){실행문}
@media all and (max-width:320px){실행문}
728x90
'CSS' 카테고리의 다른 글
[CSS] 반응형 웹 vs 적응형 웹 (1) | 2023.08.01 |
---|---|
[CSS] flex(flexbox)와 여러 속성들 한 눈에 보기 (0) | 2023.07.25 |
[CSS] CSS의 다양한 선택자 (0) | 2023.07.22 |
[CSS] CSS 정의와 작성 방식 (0) | 2023.07.21 |