반응형
HTML과 CSS를 이용해서 2단 레이아웃을 구성했습니다.
가로 크기: 1000px
화면 가운데 정렬
사이드바(sidebar): 왼쪽 메뉴 바: 200px
컨텐츠 영역: 760px
<!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: right;
margin-bottom: 20px;
}
#sidebar {
width: 200px;
padding: 10px;
float: left;
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>반응형
'HTML_CSS' 카테고리의 다른 글
| HTML5 최신 표준 태그 (0) | 2023.09.07 |
|---|---|
| (강의용) 텍스트 1 - 김소월 진달래꽃, 로렘입숨 (0) | 2023.09.06 |
| (HTML CSS) 버튼 만들기 (0) | 2023.06.09 |
| (HTML CSS) header footer 있는 3단 고정형 레이아웃 (0) | 2023.05.21 |
| (HTML) 테이블(table) 태그와 스타일을 사용하는 예 (0) | 2023.04.18 |