[CSS] Media Query(미디어 쿼리)
2019. 3. 21. 23:02ㆍWeb/css
1. @Media 규칙
Media 규칙이란?
@Media 규칙은 다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙
Media 속성
Media 속성을 사용하면 음성 장치부터 점자는 물론 프린터와 텔레비전에 맞게 스타일 시트를 사용할 수 있다.
<head>
<title>Media Query Basic</title>
<link rel="stylesheet" href="desktop.css" media="screen" />
<link rel="stylesheet" href="print.css" media"print" />
</head>2. 반응형 웹
미디어 쿼리는 밑의 표와 같이 장치를 구분하는 것은 물론 장치의 크기나 비율을 구분할 수 있다.
| 속성 | 설명 |
|---|---|
| width | 화면의 너비 |
| height | 화면의 높이 |
| device-width | 장치의 너비 |
| device-height | 장치의 높이 |
| orientation | 장치의 방향 |
| device-aspect-ratio | 화면의 비율 |
| color | 장치의 색상 비트 |
| color-index | 장치에서 표현 가능한 최대 색상 개수 |
| monochrome | 흑백 장치의 픽셀당 비트 수 |
| resolution | 장치의 해상도 |
위 표의 속성에서 orientation 속성을 제외한 모든 속성은 min 접두사와 max 접두사를 사용할 수 있다.
이것을 이용하여 반응형 웹을 만들 수 있다.
미디어 쿼리 기본(?) 구성
<style>
/* 화면 너비 0픽셀 ~ 767픽셀 */
@media screen and (max-width: 767px) {
}
/* 화면 너비 768픽셀 ~ 959픽셀 */
@media screen and (min-width: 768px) and (max-width: 959px) {
}
/* 화면 너비 960픽셀 ~ 무한 픽셀 */
@media screnn and (min-width: 960px) {
}
</style>화면 방향 전환
화면 방향 전환을 확인하고 싶다면 orientation 속성을 사용
<style>
/* 세로방향 */
@media screen and (orientation: portrait) {
}
/* 가로방향 */
@media screen and (orientation: landscape) {
}
</style>'Web > css' 카테고리의 다른 글
| [CSS] 기본 레이아웃 구성 & 벤더 프리픽스 & 도움되는 사이트 (0) | 2019.03.20 |
|---|