HRD_훈련/실습
[CSS] Float 실습 (27일차)
리드미.
2023. 6. 22. 14:46
728x90
반응형
문제 1
다음 화면을 보고 코드를 작성하시오.
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="sidebar">
<h2>사이드바</h2>
</div>
<div id="contents">
<h2>본문</h2>
</div>
<div id="footer">
<h2>푸터</h2>
<div>
</div>
</body>
▶ 코드
<style>
#container {
width: 1000px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: grey;
}
#sidebar {
width: 25%;
height: 500px;
background-color: darkgray;
float: left;
}
#contents {
width: 75%;
height: 500px;
background-color: #ccc;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: dimgrey;
clear: left;
}
</style>
문제 2
다음 화면을 보고 코드를 작성하시오.
▶ 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>2단 레이아웃</title>
<style>
#container {
width: 1000px;
margin: 0 auto;
}
#header {
width: 100%;
height: 100px;
background-color: grey;
}
#sidebar {
width: 25%;
height: 500px;
background-color: darkgray;
float: left;
}
#sidebar2 {
width: 25%;
height: 500px;
background-color: darkgray;
float: right;
}
#contents {
width: 50%;
height: 500px;
background-color: #ccc;
float: left;
}
#footer {
width: 100%;
height: 100px;
background-color: dimgrey;
clear: left;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>사이트 제목</h1>
</div>
<div id="sidebar">
<h2>사이드바</h2>
</div>
<div id="sidebar2">
<h2>사이드바</h2>
</div>
<div id="contents">
<h2>본문</h2>
</div>
<div id="footer">
<h2>푸터</h2>
<div>
</div>
</body>
</html>
728x90
반응형