<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS Tutorial | Layout</title>
<style>
#jb-container {
width: 940px;
margin: 0px auto;
padding: 20px;
height: 600px;
}
#jb-header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
height: 10%
}
#jb-content {
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
height: 80%
}
#jb-footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
height: 10%
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>2-Column Layout</h1>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla. Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada. Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum. Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget, adipiscing risus.</p>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
'프로그래밍 > etc..' 카테고리의 다른 글
| JSTL 문법의 for문 사용법 (0) | 2016.04.12 |
|---|---|
| modal 의 data값이 동적으로 바뀌어야 할 때 참고.. (0) | 2015.11.18 |
| pom.xml (0) | 2015.10.29 |
| MVC Exam (0) | 2015.10.22 |
| json 라이브러리 (0) | 2015.10.21 |