[HTML5+CSS] Layout 만들기 06 (반응형)
2021. 2. 11. 06:48ㆍProgram/Layout
반응형HTML layout 06
아래와 같은 레이아웃을 만드는 연습용 코드입니다.
[Sample Image]
이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다.
[Source Code]
아래는 소스코드입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>laout06</title>
<style>
* {margin: 0; padding: 0;}
#wrap {width: 1200px; margin: 0 auto; color: #fff;
font-size: 24px; text-align: center; text-transform: uppercase;}
header {height: 100px; background-color: #ce93d8; line-height: 100px;}
nav {height: 200px; background-color: #ba68c8; line-height: 200px;}
aside {float: left; width: 33%; height: 600px;
background-color: #ce93d8; line-height: 600px;}
article1 {float: left; width: 67%; height: 300px;
background-color: #9c27b0; line-height: 300px;}
article2 {float: left; width: 67%; height: 300px;
background-color: #8e24aa; line-height: 300px;}
section1 {float: left; width: 33%; height: 300px;
background-color: #7b1fa2; line-height: 300px;}
section2 {float: left; width: 33.5%; height: 300px;
background-color: #ba68c8; line-height: 300px;}
section3 {float: left; width: 33.5%; height: 300px;
background-color: #ab47bc; line-height: 300px;}
section4 {float: left; overflow: hidden; clear: both;
padding: 5%; width: 90%;background-color: #9c27b0;}
section4 > div {float: left; margin: 2%; width: 20%;
height: 170px; background-color: #6a1b9a; border-radius: 10px;}
footer {clear: both; width: 100%; height: 100px;
background-color: #6a1b9a; line-height: 100px;}
/* 화면 너비 0 ~ 1200*/
@media (max-width: 1240px){
#wrap {width: 100%;}
aside {height: 1500px; line-height: 1500px;}
section1 {width: 67%;}
section2 {width: 67%;}
section3 {width: 67%;}
}
/* 화면 너비 0 ~ 800*/
@media (max-width: 840px){
aside {width: 100%; height: 300px; line-height: 300px;}
article1 {width: 100%; height: 450px; line-height: 450px;}
article2 {width: 100%; height: 450px; line-height: 450px;}
section1 {width: 100%;}
section2 {width: 100%;}
section3 {width: 100%;}
section4 > div {width: 45%;}
section4 .box3 {display: block;}
}
/* 화면 너비 0 ~ 500*/
@media (max-width: 560px){
section4 > div {width: 90%;}
section4 .box2 {display: block;}
}
</style>
</head>
<body>
<div id="wrap">
<header>header</header>
<nav>nav</nav>
<aside>side</aside>
<article1>article1</article1>
<article2>article2</article2>
<section1>contents1</section1>
<section2>contents2</section2>
<section3>contents3</section3>
<section4>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</section4>
<footer>footer</footer>
</div>
</body>
</html>
REFFERENCE SITE
WEBSTORYBOY님의 온라인 강의 사이트
wtss.tistory.com/210
'Program > Layout' 카테고리의 다른 글
| [HTML5+CSS] Layout 만들기 05 (반응형) (0) | 2021.02.11 |
|---|---|
| [HTML5+CSS] Layout 만들기 04 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 03 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 02 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 01 (0) | 2021.02.10 |