CSS3 - 반응형 웹 만들기 @media
@media 속성을 이용한 화면 크기에 따른 css 적용
screen width 값에 따른 속성을 정의해서 스마트폰, 태블릿, PC 화면 등을 구별하여 정의한다.
사용법
모바일 환경: @media screen and (max-width:767px) { ... } /* 최대 크기가 767 인 것 */
태블릿 환경: @media screen and (min-width:767px) and (max-width:959) { ... }
컴퓨터 환경: @media screen and (min-width:960) { ... } /* 최소 크기가 960 인 것, 즉 960 이상인 것 */
max-width 에 따라서 적용되게끔 작성한다.
아래 예시
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
<title></title>
<style>
@media screen and (max-width:767px) {
#wrap { width:100%; }
#content_wrap #content p { font-size:3em; font-weight:bold; color:blue;}
}
@media screen and (min-width:768px) and (max-width:959px) {
#wrap { width:100%; }
#content_wrap #content p { font-size:1.5em; font-weight:bold; color:green;}
}
@media screen and (min-width:960px) {
#wrap { width:80%; }
#content_wrap #content p { font-size:1em; font-weight:bold; color:red;}
}
* { margin:0; padding:0; }
li { list-style:none; }
#wrap { margin:0 auto; }
#header { border:1px solid #cccccc; height:100px; }
#header > h1 { text-align:center; }
#nav { border:1px solid #cccccc; }
#nav ul { overflow:hidden; }
#nav ul li { float:left; text-align:center; width:20%; height:60px; line-height:60px; border:1px solid #cccccc; box-sizing:border-box; }
#content_wrap { border:1px solid #cccccc; }
#content_wrap #content { padding:10px; }
#content_wrap #content > h2 { border-bottom:1px solid #cccccc; margin-bottom:10px; height:100px; line-height: 100px; text-align: center;}
#content_wrap #content > p { border-bottom:1px solid #cccccc; margin-bottom:10px; height:300px; line-height: 300px; text-align: center;}
#footer { height:100px; line-height:100px; text-align:center; font-size:1.5em; font-weight:bold; margin:0 auto; border:1px solid #cccccc; }
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<h1>HEADER</h1>
</div>
<div id="nav">
<ul>
<li>menu1</li>
<li>menu2</li>
<li>menu3</li>
<li>menu4</li>
<li>menu5</li>
</ul>
</div>
<div id="content_wrap">
<div id="content">
<h2>Nye의 IT세상</h2>
<p>
반응형 웹 만들기
</p>
</div>
</div>
<div id="footer">
우진아빠
</div>
</div>
</body>
</html>
각 사이즈 별로 적용 되어 달라진 색깔을 확인한다.
모바일 = 파랑, 태블릿 = 초록, PC = 빨강
모바일 환경
@media screen and (max-width:767px) {
#wrap { width:100%; }
#content_wrap #content p { font-size:3em; font-weight:bold; color:blue;}
}
태블릿 환경
@media screen and (min-width:768px) and (max-width:959px) {
#wrap { width:100%; }
#content_wrap #content p { font-size:1.5em; font-weight:bold; color:green;}
}
컴퓨터 환경
@media screen and (min-width:960px) {
#wrap { width:80%; }
#content_wrap #content p { font-size:1em; font-weight:bold; color:red;}
}
'IT > Web' 카테고리의 다른 글
| HTML5 & CSS3 - 웹접근성 스킵 메뉴 만들기 (0) | 2019.07.24 |
|---|---|
| HTML5 - 기본 레이아웃 만들기 (0) | 2019.07.23 |
| CSS3 - 반응형 웹 만들기 @media 규칙 (0) | 2019.07.18 |
| CSS3 - 웹 폰트, 구글 폰트, font 적용 (0) | 2019.07.16 |
| CSS3 - CSS 드롭다운 가로 메뉴 만들기 (0) | 2019.07.16 |
댓글