히바리 쿄야 와 함께 하는 Developer Cafe
[5일차] DO IT HTML5&CSS3/p490 ~ 550/반응형웹디자인 본문
반응형 웹 장,단점
모든 스마트 기기에서 접속가능
가로 모드에 맞춰 레이아웃 변경 가능
사이트 유지 관리 용이
고정 그리드 레이아웃
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<style>
#wrapper {
width:960px;
margin:0 auto;
}
header { /* 헤더 */
width:960px; //너비값을 고정
height:120px;
background-color:#066cfa;
border-bottom:1px solid black;
}
.header-text{
font-size:40px;
color:white;
text-align:center;
line-height:120px;
}
.content { /* 본문 */
float:left;
width:600px;
height:400px;
padding:15px;
background-color:#ffd800;
}
.right-side { /* 사이드 바 */
float:right;
width:300px;
height:400px;
padding:15px;
background-color:#00ff90;
}
footer { /* 푸터 */
clear:both;
height:120px;
background-color:#c3590a;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">고정 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
(요소의 너비 / 콘텐츠 전체를 감싸는 요소의 너비) * 100
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper {
width:96%;
margin:0 auto;
}
header { /* 헤더 */
width: 100%;
height: 120px;
background-color: #066cfa;
border-bottom: 1px solid black;
}
.header-text{
font-size:32px;
color:white;
text-align:center;
line-height:120px;
}
.content { /* 본문 */
float:left;
width:62.5%;
height:400px;
padding:1.5625%;
background-color:#ffd800;
}
.right-side { /* 사이드 바 */
float:right;
width:31.25%;
height:400px;
padding:1.5625%;
background-color:#00ff90;
}
footer { /* 푸터 */
clear:both;
width:100%;
height:120px;
background-color:#c3590a;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">가변 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
em 단위 = 글자크기(px)/16px - 부모요소의 글꼴을 기준으로 하기 때문에 부모요소의 글자 크기의 영향을 받음
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper {
width:96%;
margin:0 auto;
}
header {
width: 100%;
height: 120px;
background-color: #066cfa;
border-bottom: 1px solid black;
}
.header-text{
font-size:2em;
color:white;
text-align:center;
line-height:120px;
}
.content {
float: left;
width: 62.5%;
height: 400px;
padding: 1.5625%;
background-color: #ffd800;
text-align: center;
line-height: 380px;
font-size: 1.5em;
}
.right-side {
float: right;
width: 31.25%;
height: 400px;
padding: 1.5625%;
background-color: #00ff90;
text-align: center;
line-height: 380px;
font-size: 1.5em;
}
footer {
clear: both;
width: 100%;
height: 120px;
background-color: #c3590a;
text-align:center;
line-height:120px;
font-size: 1.5em;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">가변 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper {
width:96%;
margin:0 auto;
font-size:12px;
}
.header-text{
font-size:2em;
text-align:center;
}
.fluid-text {
font-size:1.5em;
}
</style>
</head>
<body>
<div id="wrapper">
<header class="header-text">
<p> 가변 그리드 레이아웃 </p>
<p class="fluid-text"> 가변 폰트 </p>
</header>
</div>
</body>
</html>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size:16px;
}
#wrapper {
width:96%;
margin:0 auto;
font-size:12px;
}
.header-text{
font-size:2rem;
text-align:center;
}
.fluid-text {
font-size:1.5rem;
}
</style>
</head>
<body>
<div id="wrapper">
<header class="header-text">
<p> 가변 그리드 레이아웃 </p>
<p class="fluid-text"> 가변 폰트 </p>
</header>
</div>
</body>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Fluid Grid Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#wrapper {
width:96%;
margin:0 auto;
}
header {
width: 100%;
height: 120px;
background-color: #066cfa;
border-bottom: 1px solid black;
}
.header-text{
font-size:32px;
color:white;
text-align:center;
line-height:120px;
}
.content {
float:left;
width:62.5%;
height:400px;
padding:1.5625%;
background-color:#ffd800;
}
.content img {
max-width:100%;
height:auto;
}
.right-side {
float:right;
width:31.25%;
height:400px;
padding:1.5625%;
background-color:#00ff90;
}
footer {
clear:both;
width:100%;
height:120px;
background-color:#c3590a;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1 class="header-text">가변 그리드 레이아웃</h1>
</header>
<section class="content">
<h4>본문</h4>
<img src="images/fireworks.png">
</section>
<aside class="right-side">
<h4>사이드바</h4>
</aside>
<footer>
<h4>푸터</h4>
</footer>
</div>
</body>
</html>
미디어 쿼리
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background: url(images/bg0.jpg) no-repeat fixed;
background-size: cover;
}
@media screen and (max-width:1024px) {
body {
background: url(images/bg1.jpg) no-repeat fixed;
background-size: cover;
}
}
@media screen and (max-width:768px) {
body {
background: url(images/bg2.jpg) no-repeat fixed;
background-size:cover;
}
}
@media screen and (max-width:320px) {
body {
background: url(images/bg3.jpg) no-repeat fixed;
background-size: cover;
}
}
</style>
</head>
<body>
</body>
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>Media Queries</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-color:#eee;
}
@media screen and (orientation:landscape) {
body {background-color:orange;}
}
@media screen and (orientation:portrait) {
body {background-color:yellow;}
}
</style>
</head>
<body>
<h1>Meida Query</h1>
</body>
</html>
플렉스 박스 레이아웃
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width:500px;
height:300px;
margin:0 auto;
display:flex;
border:2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
flex-direction: column;
border: 2px solid black;
}
#container div {
width: 200px;
border: 1px solid black;
background: #ccc;
}
h2 {
font-size: 20px;
font-weight: bold;
padding: 20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
border: 2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
</html>
row - 주축을 가로로 교차축을 세로로 지정 플렉스 항목은 주축 시작점에서 끝점으로 (왼->오) 배치
row-inverse : row 하고 반대
column - 주축을 세로로 교차축을 가로로 인식 플렉스 항목은 추축 시작점에서 끝점 (위->아래) 배치
column-inverse : column 하고 반대
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width: 500px;
height: 300px;
margin: 0 auto;
display: flex;
-ms-flex-wrap: wrap-reverse;
-webkit-flex-wrap: wrap-reverse;
flex-wrap: wrap-reverse;
border: 2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><h2>1</h2></div>
<div id="box2"><h2>2</h2></div>
<div id="box3"><h2>3</h2></div>
</div>
</body>
</html>
flex-wrap : 플렉스 항목을 한줄 또는 여러 줄로 배치
no-wrap : 플렉스 항목들을 한줄에 표시 . 기본값
wrap : 플렉스 항목을 여러 줄에 표시
wrap-reverse : 플렉스 ㅡ항목을 여러 줄에 표시하되 기존 방향과 반대로 배치
flex-flow - 플렉스 방향과 여러 줄의 배치를 한꺼번에 지정
order - 플렋 항목의 배치 순서 바꾸기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width:500px;
height:300px;
margin:0 auto;
display:flex;
border:2px solid black;
}
#container div {
width:200px;
border: 2px solid black;
background:#ccc;
}
#box1 {
order:2;
}
#box2 {
order:3;
}
#box3 {
order:1;
}
h2 {
font-size:20px;
font-weight:bold;
padding:20px;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><h2>box1</h2></div>
<div id="box2"><h2>box2</h2></div>
<div id="box3"><h2>box3</h2></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>플렉스 박스</title>
<style>
#container {
width: 500px;
height: 100px;
margin: 0 auto 20px;
display: flex;
align-items:center;
border: 2px solid black;
}
#container div {
width:100px;
border: 2px solid black;
background:#ccc;
}
#box1 {
align-self:flex-start;
}
h1 {
text-align:center;
}
p {
font-weight:bold;
text-align:center;
font-weight:bold;
}
</style>
</head>
<body>
<div id="container">
<div id="box1"><p>1</p></div>
<div id="box2"><p>2</p></div>
<div id="box3"><p>3</p></div>
</div>
</body>
</html>
justify-content - 주축 기준의 배치 방법 지정
flex-start - 주축의 시작점을 기준으로 배치
flex-end - 주축의 끝점을 기준ㅇ로 배치
center - 중앙을 기준으로
space-between - 첫번째 플렉스 항목과 마지막 플렉스 항목은 시작점과 끝점에 배치한 후 중앙 항목들은 같은 간격으로 배치
space-around - 모든 플렉스 항목들을 같은 간격으로 배치
align-items , align-self - 교차축 기준의 배치 방법 지정
