반응형
Q>
CSS를 이용해 다음과 같은 레이아웃을 갖는 HTML 문서를 작성하시오.
A>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
text-align: center;
}
#header {
background-color: lightcoral;
width: 100%;
height: 50px;
}
#nav1 {
background-color: lightblue;
width: 100%;
height: 100px;
}
#nav2 {
background-color: lightcyan;
width: 33.3%;
height: 100vh;
float: left;
}
#section {
background-color: lightgreen;
width: 33.3%;
height: 100vh;
float: left;
}
#aside {
background-color: lightpink;
width: 33.3%;
height: 100vh;
float: left;
}
</style>
</head>
<body>
<header>
<div id="header">
header
</div>
</header>
<nav>
<div id="nav1">
nav-top
</div>
</nav>
<nav>
<div id="nav2">
nav-left
</div>
</nav>
<section>
<div id="section">
section
</div>
</section>
<aside>
<div id="aside">
aside
</div>
</aside>
</body>
</html>
R>
 |
|
반응형
'Python_WEB > HTML' 카테고리의 다른 글
| [Ch7]HTML과 CSS로 웹 사이트 만들기 연습문제 2 (0) | 2020.12.18 |
|---|---|
| [Ch7]HTML과 CSS로 웹 사이트 만들기 연습문제 1 (0) | 2020.12.18 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 6 (0) | 2020.12.06 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 5 (0) | 2020.12.06 |
| [Ch6]CSS3 레이아웃과 애니메이션 연습문제 4 (0) | 2020.12.02 |
