[HTML] Layout 예제 2
- 📕 Programing/HTML-CSS
- 2021. 2. 24. 13:13
참고 URL : webberstudy.com/html-css/css-2/multi-column-layout/
다단 레이아웃 만들기
float 속성을 이용해, 실제로 CSS 다단 레이아웃을 만들어 봅니다. 이를 통해서 기본 HTML 문서를 제작할 때, 기본 레이아웃을 어떻게 잡는지 알아보고, 중급 쳅터에서 다뤘던 스타일 속성들을 다시
webberstudy.com
CSS
body {
font: sans-serif;
}
.frame {
width: 85%;
margin: 0 auto;
border: 1px solid blue;
}
header {
padding: 40px 10px;
text-align: center;
border: 1px solid darksalmon;
/*background-color: darksalmon;*/
margin-bottom: 20px;
}
.logo {
font-size: 2em;
font-weight: bold;
display: inline-block;
padding: 0 8px;
}
.container {
overflow: hidden;
border: 1px solid darksalmon;
display: table;
}
nav {
float: left;
width: 150px;
margin-right: 50px;
border: 1px solid blueviolet;
}
.nav-list {
list-style: none; /*검은거 안보이게*/
margin: 0;
padding: 10px 0;
}
.nav-item {
margin: 4px 0;
}
.nav-link {
display: block;
text-decoration: none;
padding: 4px 10px;
}
.nav-link:hover {
background: #5457de;
}
.content {
float: left;
width: 600px;
}
footer {
text-align: center;
border-top: 1px solid chartreuse;
margin: 20px 20px 0;
font-size: 12px;
}
nav, section {
display: table-cell;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!-- css 추가 -->
<link rel="stylesheet" href="layout.css">
<body>
<script !src="">
</script>
<div class="frame">
<header>
<div class="logo">LOGO</div>
</header>
<div id="container" class="container">
<nav>
<p>Nav</p>
<ul class="nav-list">
<li class="nav-item"><a href="#" class="nav-link">Link 1</a> </li>
<li class="nav-item"><a href="#" class="nav-link">Link 2</a> </li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a> </li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a> </li>
<li class="nav-item"><a href="#" class="nav-link">Link 3</a> </li>
</ul>
</nav>
<section class="content">
<h1>Hello World</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nam error ipsa commodi exercitationem fugiat praesentium tempore inventore voluptate dolore. Ipsa quisquam nemo enim explicabo aut accusantium ex ab perspiciatis.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nam error ipsa commodi exercitationem fugiat praesentium tempore inventore voluptate dolore. Ipsa quisquam nemo enim explicabo aut accusantium ex ab perspiciatis.
</p>
</section>
</div> <!--// container-->
<footer>
<p class="copyright">Footer ©copy</p>
</footer>
</div> <!--// wrap-->
</body>
</html>'📕 Programing > HTML-CSS' 카테고리의 다른 글
| Navigation Bar / DropDown (0) | 2021.08.10 |
|---|---|
| [HTML] Layout 예제 (0) | 2021.02.24 |
| [Javascript] Promise 란? (0) | 2021.02.08 |
| [VS Code] 원하는 서버 브라우저 설정 (0) | 2021.02.08 |
| JSON (JavaScript Object Notation) 사용법 👍 (0) | 2020.12.03 |