반응형
반응형 웹
PC, 모바일 디바이스 해상도에 따라서 웹사이트의 레이아웃이 유동적으로 바뀌어 사용자에게 최적의 UI를 제공한다.
모바일 해상도 기준
제일 작은 모바일을 기준으로 작업을 해야 모든 기종에 적절한 화면을 만들 수 있다. iphone6가 기준.
@media
반응협 웹에 핵심 @media
@media ( max-width: 768px ) {
body { color: red; }
}가로폭 조정을 위해서 HTML 문서의와사이에 다음의 코드를 넣어야 한다.
width를 device-width로 정하고, initial-scale로 페이지 줌 비율을 정한다.
<meta name="viewport" content="width=device-width, initial-scale=1">모바일 우선, 데스크톱 우선
작은 가로폭부터 큰 가로폭 순서로 만드는 것을 모바일 우선(Mobile First), 큰 가로폭부터 작은 가로폭 순서로 만드는 것을 데스크톱 우선(Desktop First)이라고 한다.
모바일 우선
A
@media ( min-width: 768px ) {
B
}
@media ( min-width: 1024px ) {
C
}데스크톱 우선
A
@media ( max-width: 1023px ) {
B
}
@media ( max-width: 767px ) {
C
}기본 레이아웃
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#jb-container {
width: 940px;
margin: 10px auto;
padding: 20px;
border: 1px solid #bcbcbc;
}
#jb-header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#jb-content {
width: 580px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar {
width: 260px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
@media ( max-width: 480px ) {
#jb-container {
width: auto;
}
#jb-content {
float: none;
width: auto;
}
#jb-sidebar {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>Responsive Layout</h1>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>
<div id="jb-sidebar">
<h2>Sidebar</h2>
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>반응형
