반응형
2단 레이아웃입니다. 복사하여 사용하세요.
소스 코드에서 float: left/right 부분을 서로 바꾸면 다음과 같은 모양이 됩니다.
|
#contents {
width: 760px;
padding: 10px;
float: left;
margin-bottom: 20px;
}
#sidebar {
width: 200px;
padding: 10px;
float: right;
margin-bottom: 20px;
background:#eee;
}
|
|
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>레이아웃</title>
<style>
div {
/* border: 1px solid #ccc; */
}
#container {
width:1000px;
padding:20px;
margin:0 auto; /* 화면의 중앙에 배치 */
}
#header {
padding:20px;
margin-bottom:1px;
background:#eee;
}
#contents {
width: 760px;
padding: 10px;
float: left;
margin-bottom: 20px;
}
#sidebar {
width: 200px;
padding: 10px;
float: right;
margin-bottom: 20px;
background:#eee;
}
#footer {
clear:both;
padding:10px;
background:#eee;
margin-bottom: 50px;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>2단 레이아웃</h1>
</div>
<div id="sidebar">
<h2>메뉴</h2>
<ul>
<li>메뉴1</li>
<li>메뉴2</li>
<li>메뉴3</li>
<li>메뉴4</li>
<li>메뉴5</li>
</ul>
</div>
<div id="contents">
------------- 본문 내용 생략 -----------
</div>
<div id="footer">
<h2>하단</h2>
<p style="text-align:center">(c) Copyright HTML@css</p>
</div>
</div>
</body>
</html>
|
728x90
반응형
'HTML_CSS' 카테고리의 다른 글
| (HTML CSS) iframe 사용하기 (0) | 2023.09.21 |
|---|---|
| (HTML/CSS) 캘린더 달력 일정관리 (0) | 2023.04.04 |
| HTML 시멘틱 태그를 사용한 2단 레이아웃 (0) | 2022.11.14 |
| (HTML/CSS) 웹 폰트 사용하기: 구글 폰트 사용하기 (0) | 2022.10.09 |