728x90
layout3.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<title>Layout</title>
<style>
* {padding: 0; margin: 0;}
body {background: #f3e5f5;}
#wrap {width: 1200px; margin: 0 auto;}
header {width: 100%; height: 150px; background: #9575cd;}
aside {float:left; width: 30%; height: 700px; background: #7e57c2;}
section {float:left; width: 70%; height: 700px; background: #673ab7;}
footer {clear: both; width: 100%; height: 150px; background: #5e35b1;}
/* 화면 너비 0 ~ 1200px */
@media (max-width: 1200px)
{
/* #wrap {width: 100%;} 100%로 해주게 되면 화면을 줄여도 스크롤바가 생기지 않음*/
#wrap {width: 95%;} /*여백을 주기 위해 95%*/
}
/* 화면 너비 0 ~ 768px */
@media (max-width: 768px)
{
#wrap {width: 100%;}
}
/* 화면 너비 0 ~ 480px */
@media (max-width: 480px)
{
#wrap {width: 100%;}
header {height: 300px;}
aside {float: none; width: 100%; height: 300px;}
section {float: none; width: 100%; height: 300px;}
}
</style>
</head>
<body>
<div id = "wrap">
<header></header>
<aside></aside>
<section></section>
<footer></footer>
</div>
</body>
</html>728x90
'프론트엔드 > 반응형 사이트 만들기' 카테고리의 다른 글
| 반응형 사이트 - 미디어 쿼리 (0) | 2021.11.25 |
|---|---|
| 반응형 사이트 - 시멘틱 태그 (0) | 2021.11.23 |