2. 미디어 쿼리
페이지 정보
작성자 관리자 댓글 0건 조회 465회 작성일 22-01-12 20:32본문
2. 미디어 쿼리
* 미디어 쿼리를 작성 순서와 규칙 (대소문자를 구분하지 않는다.)
[only 또는 not]@media[미디어타입/유형] [and 또는,](조건문){실행문}
@media only screen and (min-width:400px){....}
only : 뒤의 조건만 사용, 미디어 쿼리를 지원하지 않는 브라우저는 쿼리안의 내용이 무시된다.
not : 뒤의 조건을 제외한 미디어 디바이스에만 적용하겠다는 의미
@media : 미디어 쿼리의 시작을 알림.
조건문 : 조건문이 사실일 경우 뒤에 따라오는 것을 해석하라는 의미(생략 가능)
미디어 쿼리의 타입
all: 모든 디바이스
print: 인쇄용 디바이스
screen: 화면 디바이스(모바일기기 및 컴퓨터 모두 해당됨)
tv : 영상과 음성이 동시에 출력되는 디바이스
projection: 프로젝터 디바이스
handheld: 손에 들고 다니는 소형 디바이스(모바일기기가 아님)
speech: 음성 출력 디바이스
aural: 음성 합성 디바이스(화면을 읽어 소리로 출력하는 장치)
embossed: 점자 인쇄 디바이스
tty: 디스플레이가 제한된 디바이스(터미널)
braile: 점자 표시 디바이스
조건문
-------------------------------------------------------------------------------------
width : 가로 너비값 |
height: 세로 높이값 |
device-width : 기기의 가로 너비값 | min/ max 사용가능
device-height : 기기의 세로 높이값 |
-----------------------------------------------------------------------------
orientation : 기기의 화면 방향 (portrait , landscape)
aspect-ratio : 화면 비율 (브라우저 화면비율 (1), 해상도 1280/720, 종횡비 16/9 )
device-aspect-ratio : 단말기 화면비율
color : 기기의 비트수 (8 : bit단위)
color-index : 기기의 색상수 (128 색상)
monochrome : 흑백칼러만을 사용하는 단말기에서 흰색과 검은색 사이이의 단계를 판단
resolution : 기기의 해상도를 판단 300dpi, dpcm 단위로 표시한다.
scan : TV 스캔방식 (progressive, interlace)
grid : 기기의 그리드 / 비트맵 (1, 0)
--------------------------------------------------------------------------------------
실습 : mediaQuery2.html
<!DOCTYPE html>
<html>
<head>
<title>반응형 웹</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap{
border:4px solid #000;
}
#wrap div{
width:50%;
height:100px;
margin:0 auto;
display: inline-block;
}
@media all and (max-width:400px){
#wrap div{
width:100%;
}
}
@media all and (min-width:768px) and (max-width:1023px) {
#wrap div{
width:50%;
}
#wrap div:last-child{
width:100%;
}
}
@media all and (min-width:1024px){
#wrap div{
width:20%;
}
}
</style>
</head>
<body>
<div id="wrap">
<div style="background: #00fa00"></div><div style="background: cornflowerblue"></div><div style="background: #ea2f10"></div><div style="background: #e99b8f"></div><div style="background: gray"></div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.