[HTML5+CSS] Layout 만들기 04 (반응형)
2021. 2. 10. 21:17ㆍProgram/Layout
반응형HTML layout 04
아래와 같은 레이아웃을 만드는 연습용 코드입니다.
[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: 1200px; margin: 0 auto; font-size: 24px;
text-transform: uppercase; color: #fff; text-align: center;}
.header {width: 100%; height: 150px;
background: #f48fb1; line-height: 150px;}
.aside {float: left; width: 30%; height: 900px;
background: #f06292; line-height: 900px;}
.article1 {float: left; width: 70%; height: 300px;
background: #ec407a; line-height: 300px;}
.article2 {float: left; width: 70%; height: 300px;
background: #e91e63; line-height: 300px;}
.article3 {float: left; width: 70%; height: 300px;
background: #c2185b; line-height: 300px;}
.footer {clear: both; width: 100%; height: 150px;
background: #880e4f; line-height: 150px;}
/* 화면 너비 0 ~ 1200 */
@media (max-width: 1240px){
#wrap {width: 100%;}
.aside {height: 600px; line-height: 600px;}
.article3 {width: 100%;}
}
/* 화면 너비 0 ~ 800 */
@media (max-width: 800px){
.aside {width: 100%; height: 300px; line-height: 300px;}
.article1 {width: 50%; height: 450px; line-height: 450px;}
.article2 {width: 50%; height: 450px; line-height: 450px;}
}
/* 화면 너비 0 ~ 500 */
@media (max-width: 560px){
.article1 {width: 100%;}
.article2 {width: 100%;}
}
</style>
</head>
<body>
<div id="wrap">
<header class="header">header</header>
<aside class="aside">side</aside>
<section class="article1">article1</section>
<section class="article2">article2</section>
<section class="article3">article2</section>
<footer class="footer">footer</footer>
</div>
</body>
</html>
REFFERENCE SITE
WEBSTORYBOY님의 온라인 강의 사이트
wtss.tistory.com/208
'Program > Layout' 카테고리의 다른 글
| [HTML5+CSS] Layout 만들기 06 (반응형) (0) | 2021.02.11 |
|---|---|
| [HTML5+CSS] Layout 만들기 05 (반응형) (0) | 2021.02.11 |
| [HTML5+CSS] Layout 만들기 03 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 02 (반응형) (0) | 2021.02.10 |
| [HTML5+CSS] Layout 만들기 01 (0) | 2021.02.10 |