[HTML5+CSS] Layout 만들기 03 (반응형)
2021. 2. 10. 20:26ㆍProgram/Layout
반응형HTML layout 03
아래와 같은 레이아웃을 만드는 연습용 코드입니다.
[Sample Image]
이미지를 클릭하시면 새창에서 완성된 페이지를 확인하실 수 있습니다.
[Source Code]
아래는 소스코드입니다.
<!DOCTYPE html>
<html lang="ko" dir="ltr">
<head>
<meta charset="utf-8">
<title>layout04</title>
<style>
* {margin: 0; padding: 0;}
#wrap {width: 100%; font-size: 24px; text-transform:
uppercase; color: #fff; text-align: center;}
header {width: 100%; height: 150px;
background: #90caf9; line-height: 150px;}
aside {float: left; width: 25%; height: 700px;
background: #64b5f6; line-height: 300px;}
section {float: left; width: 50%; height: 700px;
background: #42a5f5; line-height: 300px;}
article {float: left; width: 25%; height: 700px;
background: #1e88e5; line-height: 300px;}
footer {clear: both; width: 100%; height: 150px;
background: #0d47a1; line-height: 150px;}
/* 화면 너비 0 ~ 1280 */
@media (max-width: 1280px){
aside {width: 35%;}
section {width: 65%;}
article {clear: both; float: left; width: 100%; height: 300px;}
}
/* 화면 너비 0 ~ 800 */
@media (max-width: 800px){
aside {width: 100%; height: 300px;}
section {width: 100%; height: 500px;}
}
/* 화면 너비 0 ~ 500 */
@media (max-width: 500px){
aside {width: 100%; height: 300px;}
section {width: 100%; height: 500px;}
}
</style>
</head>
<body>
<div id="wrap">
<header>header</header>
<aside>side</aside>
<section>contents</section>
<article>article</article>
<footer>footer</footer>
</div>
</body>
</html>
REFFERENCE SITE
WEBSTORYBOY님의 온라인 강의 사이트
wtss.tistory.com/207
'Program > Layout' 카테고리의 다른 글
| [HTML5+CSS] Layout 만들기 06 (반응형) (0) | 2021.02.11 |
|---|---|
| [HTML5+CSS] Layout 만들기 05 (반응형) (0) | 2021.02.11 |
| [HTML5+CSS] Layout 만들기 04 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 02 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 01 (0) | 2021.02.10 |