Top
반응형
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout, 2column</title>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* layout */
#wrap {
width: 970px;
margin: 0 auto;
background-color: gray;
}
#header {
padding: 20px;
background-color: lightpink;
}
#container {
padding-bottom: 30px;
*zoom: 1;
background-color: blue;
}
#container:after {
content: '';
display: block;
clear: both;
}
#container #content {
float: right;
width: 600px;
background-color: lightblue;
}
#container #content .inn {
padding: 20px;
}
#container .aside {
float: left;
width: 370px;
background-color: lightgreen;
}
#container .aside .inn {
padding: 20px;
}
#footer {
padding: 20px;
background-color: silver;
}
</style>
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>logo</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore.</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inn">
<h2>content</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
</div>
</div>
<!-- //content -->
<!-- aside -->
<div class="aside">
<div class="inn">
<h2>aside</h2>
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Impedit vitae, perspiciatis porro eveniet delectus ad quibusdam doloribus iste, accusantium ea odit eaque ut in veniam officiis corporis laborum possimus dolores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti atque quidem dolor ipsum corrupti tempore ipsa sit vel quasi magnam doloribus nisi numquam laboriosam officia maxime, incidunt, quia rerum! Ad, odio eveniet est. Vero consequuntur mollitia est veniam assumenda odit in laboriosam, voluptatum ratione veritatis eligendi expedita eum molestias laborum nostrum amet dolore, nulla consequatur non ullam rem officiis sint illo incidunt repellat. Cum, ex? Voluptatibus accusantium cupiditate, sequi asperiores nulla voluptatum in inventore facere quod, et, reprehenderit delectus corporis, eligendi exercitationem? Totam magni similique tempora eos et placeat quos, itaque impedit dolorem, nemo, accusantium doloribus blanditiis eveniet distinctio suscipit.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<address>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, error.</address>
<p>Copyright © </p>
</div>
<!-- //footer -->
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout, 2column</title>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* layout */
#wrap {
background-color: gray;
}
#header {
min-width: 970px;
/* 줄였을 때 최소크기 */
padding: 20px 0;
background-color: lightpink;
}
#header .header-area {
width: 970px;
margin: 0 auto;
}
#container {
width: 970px;
margin: 0 auto;
padding-bottom: 30px;
*zoom: 1;
background-color: blue;
}
#container:after {
content: '';
display: block;
clear: both;
}
#container #content {
float: right;
width: 600px;
background-color: lightblue;
}
#container #content .inn {
padding: 20px;
}
#container .aside {
float: left;
width: 370px;
background-color: lightgreen;
}
#container .aside .inn {
padding: 20px;
}
#footer {
min-width: 970px;
padding: 20px 0;
background-color: silver;
}
#footer .footer-area {
width: 970px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<div class="header-area">
<h1>logo</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore.</p>
</div>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inn">
<h2>content</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
</div>
</div>
<!-- //content -->
<!-- aside -->
<div class="aside">
<div class="inn">
<h2>aside</h2>
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Impedit vitae, perspiciatis porro eveniet delectus ad quibusdam doloribus iste, accusantium ea odit eaque ut in veniam officiis corporis laborum possimus dolores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti atque quidem dolor ipsum corrupti tempore ipsa sit vel quasi magnam doloribus nisi numquam laboriosam officia maxime, incidunt, quia rerum! Ad, odio eveniet est. Vero consequuntur mollitia est veniam assumenda odit in laboriosam, voluptatum ratione veritatis eligendi expedita eum molestias laborum nostrum amet dolore, nulla consequatur non ullam rem officiis sint illo incidunt repellat. Cum, ex? Voluptatibus accusantium cupiditate, sequi asperiores nulla voluptatum in inventore facere quod, et, reprehenderit delectus corporis, eligendi exercitationem? Totam magni similique tempora eos et placeat quos, itaque impedit dolorem, nemo, accusantium doloribus blanditiis eveniet distinctio suscipit.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<div class="footer-area">
<address>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, error.</address>
<p>Copyright © </p>
</div>
</div>
<!-- //footer -->
</div>
</body>
</html>
header와 footer가 윈도우를 늘려도 쭉 늘어나는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout, 2column</title>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* layout */
#wrap {
margin: 0 auto;
background-color: gray;
}
#header {
padding: 20px;
background-color: lightpink;
}
#container {
padding-bottom: 30px;
*zoom: 1;
background-color: blue;
}
#container:after {
content: '';
display: block;
clear: both;
}
#container #content {
float: right;
width: 62%;
background-color: lightblue;
}
#container #content .inn {
padding: 20px;
}
#container .aside {
float: left;
width: 38%;
background-color: lightgreen;
}
#container .aside .inn {
padding: 20px;
}
#footer {
padding: 20px;
background-color: silver;
}
</style>
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>logo</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore.</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inn">
<h2>content</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
</div>
</div>
<!-- //content -->
<!-- aside -->
<div class="aside">
<div class="inn">
<h2>aside</h2>
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Impedit vitae, perspiciatis porro eveniet delectus ad quibusdam doloribus iste, accusantium ea odit eaque ut in veniam officiis corporis laborum possimus dolores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti atque quidem dolor ipsum corrupti tempore ipsa sit vel quasi magnam doloribus nisi numquam laboriosam officia maxime, incidunt, quia rerum! Ad, odio eveniet est. Vero consequuntur mollitia est veniam assumenda odit in laboriosam, voluptatum ratione veritatis eligendi expedita eum molestias laborum nostrum amet dolore, nulla consequatur non ullam rem officiis sint illo incidunt repellat. Cum, ex? Voluptatibus accusantium cupiditate, sequi asperiores nulla voluptatum in inventore facere quod, et, reprehenderit delectus corporis, eligendi exercitationem? Totam magni similique tempora eos et placeat quos, itaque impedit dolorem, nemo, accusantium doloribus blanditiis eveniet distinctio suscipit.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<address>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, error.</address>
<p>Copyright © </p>
</div>
<!-- //footer -->
</div>
</body>
</html>
윈도우 창 폭을 줄이면 본문도 줄어드는 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout, 2column</title>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* layout */
#wrap {
width: 970px;
margin: 0 auto;
background-color: gray;
}
#header {
padding: 20px;
background-color: lightpink;
}
#container {
padding-bottom: 30px;
*zoom: 1;
background-color: blue;
}
#container:after {
content: '';
display: block;
clear: both;
}
#container #content {
float: right;
width: 62%;
background-color: lightblue;
}
#container #content .inn {
padding: 20px;
}
#container .aside {
float: left;
width: 38%;
background-color: lightgreen;
}
#container .aside .inn {
padding: 20px;
}
#footer {
padding: 20px;
background-color: silver;
}
/* 970 보다 창 폭이 작아질때 */
@media screen and (max-width: 970px) {
#wrap {
width: auto;
}
}
/* 970보다 작고 480보다도 작을때 */
@media screen and (max-width: 480px) {
#container #content {
float: none;
width: auto;
}
#container .aside {
float: none;
width: auto;
}
}
</style>
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>logo</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore.</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inn">
<h2>content</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
</div>
</div>
<!-- //content -->
<!-- aside -->
<div class="aside">
<div class="inn">
<h2>aside</h2>
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Impedit vitae, perspiciatis porro eveniet delectus ad quibusdam doloribus iste, accusantium ea odit eaque ut in veniam officiis corporis laborum possimus dolores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti atque quidem dolor ipsum corrupti tempore ipsa sit vel quasi magnam doloribus nisi numquam laboriosam officia maxime, incidunt, quia rerum! Ad, odio eveniet est. Vero consequuntur mollitia est veniam assumenda odit in laboriosam, voluptatum ratione veritatis eligendi expedita eum molestias laborum nostrum amet dolore, nulla consequatur non ullam rem officiis sint illo incidunt repellat. Cum, ex? Voluptatibus accusantium cupiditate, sequi asperiores nulla voluptatum in inventore facere quod, et, reprehenderit delectus corporis, eligendi exercitationem? Totam magni similique tempora eos et placeat quos, itaque impedit dolorem, nemo, accusantium doloribus blanditiis eveniet distinctio suscipit.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<address>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, error.</address>
<p>Copyright © </p>
</div>
<!-- //footer -->
</div>
</body>
</html>
반응형, 윈도우 폭이 줄어들 때 일정치까지는 좁아지기만 하다가
해당 수치를 넘어서면 모바일용으로 바뀌는 경우
모바일용은 딴게 아니고 float를 해제하고 폭을 auto로 준 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>layout, 3column</title>
<style>
/* reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
body,input,textarea,select,button,table{font-family:'Malgun Gothic','돋움',Dotum,AppleGothic,sans-serif;font-size:12px}
img,fieldset{border:0}
img{vertical-align:top}
ul,ol{list-style:none}
em,address{font-style:normal}
a{text-decoration:none}
a:hover,a:active,a:focus{text-decoration:underline}
/* layout */
#wrap {
width: 1170px;
margin: 0 auto;
background-color: gray;
}
#header {
padding: 20px;
background-color: lightpink;
}
#container {
padding-bottom: 30px;
*zoom: 1;
background-color: blue;
}
#container:after {
content: '';
display: block;
clear: both;
}
#container #content {
position: relative;
left: 24%;
float: left;
width: 52%;
background-color: lightblue;
}
#container #content .inn {
padding: 20px;
}
#container .nav {
position: relative;
left: -52%;
float: left;
width: 24%;
background-color: lightyellow;
}
#container .nav .inn {
padding: 20px;
}
#container .aside {
float: right;
width: 24%;
background-color: lightgreen;
}
#container .aside .inn {
padding: 20px;
}
#footer {
padding: 20px;
background-color: silver;
}
</style>
</head>
<body>
<div id="wrap">
<!-- header -->
<div id="header">
<h1>logo</h1>
<p>Lorem ipsum dolor, sit amet, consectetur adipisicing elit. Exercitationem qui reprehenderit incidunt ipsa esse tempore quibusdam impedit, id quidem tenetur consequuntur odio quod inventore in cum magnam pariatur cupiditate dolore.</p>
</div>
<!-- //header -->
<!-- container -->
<div id="container">
<!-- content -->
<div id="content">
<div class="inn">
<h2>content</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima quas quod soluta! Alias quos, a error perspiciatis minus quia totam itaque sapiente architecto veniam ipsum incidunt expedita nam, corrupti. Voluptatibus laboriosam possimus dolores explicabo inventore ipsum quibusdam animi hic eum quisquam nisi quas, iure cumque, tenetur quasi, cum provident voluptas dignissimos. Nisi est quasi quae amet! Sunt, quod commodi, provident assumenda quidem dignissimos reprehenderit esse impedit nihil excepturi reiciendis id illum modi sequi. Nisi eius corrupti, modi! Expedita esse sint, totam perspiciatis minima veritatis deserunt molestiae assumenda, neque maxime eligendi ipsum incidunt quia repudiandae labore delectus voluptate. Explicabo veritatis, rem.</p>
</div>
</div>
<!-- //content -->
<!-- nav -->
<div class="nav">
<div class="inn">
<h2>Nav</h2>
<ul>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</div>
</div>
<!-- //nav -->
<!-- aside -->
<div class="aside">
<div class="inn">
<h2>aside</h2>
<p>Lorem ipsum dolor, sit amet consectetur, adipisicing elit. Impedit vitae, perspiciatis porro eveniet delectus ad quibusdam doloribus iste, accusantium ea odit eaque ut in veniam officiis corporis laborum possimus dolores?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti atque quidem dolor ipsum corrupti tempore ipsa sit vel quasi magnam doloribus nisi numquam laboriosam officia maxime, incidunt, quia rerum! Ad, odio eveniet est. Vero consequuntur mollitia est veniam assumenda odit in laboriosam, voluptatum ratione veritatis eligendi expedita eum molestias laborum nostrum amet dolore, nulla consequatur non ullam rem officiis sint illo incidunt repellat. Cum, ex? Voluptatibus accusantium cupiditate, sequi asperiores nulla voluptatum in inventore facere quod, et, reprehenderit delectus corporis, eligendi exercitationem? Totam magni similique tempora eos et placeat quos, itaque impedit dolorem, nemo, accusantium doloribus blanditiis eveniet distinctio suscipit.</p>
</div>
</div>
<!-- //aside -->
</div>
<!-- //container -->
<!-- footer -->
<div id="footer">
<address>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem, error.</address>
<p>Copyright © </p>
</div>
<!-- //footer -->
</div>
</body>
</html>
3단 레이아웃 relative position을 이용해서
구문의 순서가 Nav보다 content가 먼저라도 더 오른쪽에 배치하도록 할 수 있다.
일단 예제들은 대부분 div로 구역을 나누는 방식인데
요즘엔 또 flex, grid를 많이 쓴다고 하는데 아직 안해봐서 모르겠다.
이제 다섯 가지 강의 중에 첫 번째를 듣고 있는거니까 빨리빨리 공부해서
요즘 트렌드 코드까지 한 번 봐야겠다.
반응형
'Daily Study > Web Dev' 카테고리의 다른 글
| 022 CSS3 공부 (1) css3 선택자, 그림자,말줄임,투명도 지정 (0) | 2021.02.25 |
|---|---|
| 021 웹페이지 만들어보기 실습 (0) | 2021.02.23 |
| 019 CSS 공부 (15) 로그인 페이지 예제 실습 (0) | 2021.02.17 |
| 018 CSS 공부 (14) 다음 부동산 메뉴, 테이블 예제 실습 (0) | 2021.02.16 |
| 017 CSS공부 (13) 이미지 하단 텍스트, 다음 메인 예제 실습 (0) | 2021.02.16 |
Daily Study/Web Dev
