[HTML5+CSS] Layout 만들기 05 (반응형)
2021. 2. 11. 00:08ㆍProgram/Layout
반응형HTML layout 05
아래와 같은 레이아웃을 만드는 연습용 코드입니다.
[Sample Image]
이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다.
[Source Code]
아래는 소스코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>laout5</title>
<style>
* {margin: 0; padding: 0;}
body {background-color: #fffde7;}
#wrap {width: 1200px; margin: 0 auto; color: #fff;
font-size: 24px; text-align: center; text-transform: uppercase;}
header {width: 100%; height: 100px;
background-color: #ffe082; line-height: 100px;}
article {width: 100%; height: 300px;
background-color: #ffd54f; line-height: 300px;}
section {overflow: hidden; padding: 5%;
width: 90%; background-color: #ffca28;}
section > div {margin: 2%; width: 16%; height: 170px;
background-color: #ff9800; float: left; border-radius: 10px;}
footer {width: 100%; height: 100px; background-color: #ffb300; line-height: 100px;}
/* 화면 너비 0 ~ 1200*/
@media (max-width: 1220px) {
#wrap {width: 100%;}
section > div {width: 20%;}
section > div:nth-child(5n) {display: none;}
}
/* 화면 너비 0 ~ 800*/
@media (max-width: 800px) {
section > div {width: 29%;}
section > div:nth-child(5) {display: block;}
}
/* 화면 너비 0 ~ 500*/
@media (max-width: 560px) {
section > div {width: 45%;}
section > div:nth-child(5n) {display: block;}
}
</style>
</head>
<body>
<div id="wrap">
<header>header</header>
<article>article</article>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<footer>footer</footer>
</div>
</body>
</html>
REFFERENCE SITE
WEBSTORYBOY님의 온라인 강의 사이트
wtss.tistory.com/209
'Program > Layout' 카테고리의 다른 글
| [HTML5+CSS] Layout 만들기 06 (반응형) (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 |