홈페이지 레이아웃을 만드는 방법 (2)
오늘은 기초 CSS 학습시간으로 홈페이지 레이아웃을 만드는 방법 을 다른 레이아웃을 시도해봅니다.
지난시간에도 언급한 내용입니다만
레이아웃을 만들 때 필요한 속성으로
CSS로 레이아웃을 만들 때 꼭 알아야 할 속성은 margin, float, clear입니다.
margin은 요소를 가운데 정렬할 때 사용합니다.
margin-left: auto; margin-right: auto;
로 설정하면 선택한 요소를 가운데에 놓을 수 있습니다.
float와 clear는 2단, 3단 등 다단으로 레이아웃을 만들 때 사용합니다.
오늘은 3단 레이아웃 만들기로
다음은 간단한 3단 레이아웃 예제입니다.
<!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;
border: 1px solid #bcbcbc;
}
#jb-header {
padding: 20px;
margin-bottom: 20px;
border: 1px solid #bcbcbc;
}
#jb-sidebar-left {
width: 160px;
padding: 20px;
margin-right: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-content {
width: 450px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar-right {
width: 160px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
padding: 20px;
border: 1px solid #bcbcbc;
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h1>주일예배대표기도문</h1>
</div>
<div id="jb-sidebar-left">
<h2>Sidebar</h2>
<ul>
<li>믿음</li>
<li>소망</li>
<li>사랑</li>
</ul>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>
은혜로우신 하나님 아버지!
죄에 빠진 저희들을 부르셔서 구원의 확신을 주시고
진리의 말씀을 따라 살 수 있게 하시니 감사합니다.
오늘 이 복되고 즐거운 날
믿음의 권속들이 한 자리에 모여
신령과 진정으로 예배하기를 원합니다.
</p>
<p>
경건한 마음으로 마치는 시간까지 온전히 주님만 높이는
저희 모두가 되게 하여 주시고
성령님 뜨거운 은혜로 부어주시옵소서.
이 모든 말씀 예수 그리스도의 이름으로
기도 드리옵나이다. 아멘.
</p>
</div>
<div id="jb-sidebar-right">
<h2>Sidebar</h2>
<ul>
<li>믿음</li>
<li>소망</li>
<li>사랑</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
위 코드 실행 결과는 아래와 같습니다
'홈페이지제작 > CSS' 카테고리의 다른 글
| [CSS강좌] 전체 선택자(Universal Selector) (0) | 2018.01.04 |
|---|---|
| [기초CSS 강좌 ] 반응형 레이아웃 만들기(홈페이지만들기) (0) | 2018.01.02 |
| [CSS 기초] 홈페이지 레이아웃 만들기 [웹사이트의 레이아웃] (0) | 2017.12.30 |
| [CSS 강좌 ] 박스 모델(Box Model) 구현하기 (0) | 2017.12.22 |
| [CSS 강좌 ] 폰트속성 ( font-family) (0) | 2017.12.13 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.