반응형
CSS의 float 속성을 이용해서 만든 3단 레이아웃의 예제입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3단 레이아웃</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header, footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
overflow: hidden; /* Clear float */
}
.menu {
float: left;
width: 200px;
box-sizing: border-box;
padding: 15px;
}
.main {
float: left;
width: 760px;
}
.sizebar {
float: left;
width: 200px;
box-sizing: border-box;
padding: 15px;
}
#leftmenu {
list-style: none;
padding-left: 0;
}
#leftmenu li {
width:80px;
margin-bottom:10px;
padding: 5px;
border: 1px solid gray;
box-shadow: 2px 2px 5px 2px gray;
}
a { text-decoration: none;}
</style>
</head>
<body>
<header>
<h1>우리회사</h1>
</header>
<div class="container">
<div class="menu">
<h2>메뉴</h2>
<ul id="leftmenu">
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
<li><a href="#">MENU 4</a></li>
<li><a href="#">MENU 5</a></li>
</ul>
</div>
<div class="main">
<h2>우리회사 소개</h2>
<p>여기에 내용을 작성합니다.</p>
</div>
<div class="sidebar">
<h2>Sidebar</h2>
<p>여기에는 뭘 출력할까요?</p>
</div>
</div>
<footer>
<p>© Copyright 2023 coding-abc.kr. All rights reserved.</p>
</footer>
</body>
</html>
반응형
'HTML_CSS' 카테고리의 다른 글
| (HTML CSS) 구글 웹폰트 사용하기 (0) | 2023.10.12 |
|---|---|
| Visual Studio Code(VSC)에서 Live Server 설치 및 사용하기 (0) | 2023.09.21 |
| (HTML) 교재 소스 다운로드 [HTML5 + CSS3 웹 표준의 정석] (0) | 2023.09.08 |
| (HTML5) 특수문자, 기호 사용하기 (0) | 2023.09.08 |
| HTML5 최신 표준 태그 (0) | 2023.09.07 |