8. media query 미디어 쿼리 : 반응형 레이아웃
(모바일, pc등에 따라 사이즈를 다르게 보여줌)
반응형 웹 : 동일한 페이지를 보여주되, 화면 사이즈에 따라 다르게 보여줌.
화면 사이즈에 따라 배치 달라짐 (주소는 동일)
적응형 웹 : 모바일인지 pc인지에 따라 다른 페이지를 보여줌.
m.naver.com / www.naver.com (주소가 다름)
pixel/ viewport
pixel : 화소
viewport : 화면상 표시 영역.
meta viewport : 원하는 너비를 넣으면 해당 너비에 맞게 브라우저가 표시함.
<meta name="viewport" content="width=320">
-> 다양한 디스플레이에 맞는 웹페이지 구현
1) html <meta name="viewport" content="width=device-width">
2) css : 미디어쿼리 : 반응형 레이아웃 구현하기 위한 기술
* 기본 문법
@media media-type and (media-feature-rule){
//CSS코드
}
* media-type (미디어 유형)
all
print 프린트화면
screen 브라우저화면
speeach 음성
* media-feature-rule (미디어 조건)
width viewport의 너비, *min-width, *max width 많이 사용
height viewport의 높이
device-width 디바이스의 물리적 너비
device-height 디바이스의 물리적 높이
*orientation 디바이스의 방향 (가로 = landscape, 세로 = portrait)
apspect-ratio viewport의 가로세로 비율
@media (max-width : 1024px){ccs코드}
->화면 너비가 1024px 이하인 경우까지 해당css적용
@media screen and (max-width:1200px{css코드}
-> 화면너비가 1200px 이하이고, 브라우저 화면이면 해당 css적용
@media screen and (min-width:1200px) and (orientation: landscape){css코드}
-> 화면너비가 1200px 이상이고, 브라우저 화면이면서 가로방향일때만 css적용
<!DOCTYPE html> 미디어쿼리설명
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- media query적용하기 위해 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
header {
background-color: aqua;
}
nav {
background-color: orange;
}
section {
background-color: red;
}
article {
background-color: blue;
}
aside {
float: right;
background-color: brown;
}
footer {
background-color: gray;
}
@media screen and (max-width:750px){ <!-- 폭이 750 이상이어야 aside가 생김 -->
aside{
display: none;
}
}
</style>
</head>
<body>
<header>header</header>
<nav>nav</nav>
<aside> aside <br /><br /> </aside>
<section>
section
<article> artice </article>
</section>
<footer> footer </footer>
</body>
</html>
'WEB Creator > [CSS]' 카테고리의 다른 글
| [CSS + HTML] 간단 사이트 (0) | 2022.06.07 |
|---|---|
| [CSS] 9 - Flexbox (0) | 2022.06.07 |
| [CSS] 7 - 포지셔닝 (0) | 2022.06.07 |
| [CSS] 3 - 적용 스타일과 박스 모델 (0) | 2022.05.31 |
| [CSS] 2 - 선택자 (0) | 2022.05.31 |