홈페이지 레이아웃을 만드는 방법
오늘도 기초 CSS 학습시간입니다. 가장 기초적이면서 중요한 내용이니 꼭 학습하고 이해하시기 바랍니다.
웹사이트의 레이아웃을 만드는 방법은 크게 두가지가 있습니다. 첫번째는 표(<table>)을 이용하는 것이고, 두번째는 CSS를 이용하는 것입니다.
2000년대 초까지만해도 CSS 보다는 <table>을 주로 사용했습니다. 하지만 <table>을 이용하는 것은 컨텐츠와 디자인의 분리 원칙에도 맞지 않고,
사이드바의 위치를 바꾸는 등 수정을 해야 할 때 편집해야할 코드가 많다는 단점이 있어 요즘에는 거의 사용하지 않습니다.
레이아웃을 만들 때 필요한 속성
CSS로 레이아웃을 만들 때 꼭 알아야 할 속성은 margin, float, clear입니다.
margin은 요소를 가운데 정렬할 때 사용합니다.
margin-left: auto; margin-right: auto;
로 설정하면 선택한 요소를 가운데에 놓을 수 있습니다.
float와 clear는 2단, 3단 등 다단으로 레이아웃을 만들 때 사용합니다.
2단 레이아웃 만들기
다음은 간단한 2단 레이아웃 예제입니다.
<!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-content {
width: 580px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar {
width: 260px;
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>2-신앙인의 기도</h1>
</div>
<div id="jb-content">
<h2>Content</h2>
<p>
성결의 성령 하나님!
네 이웃을 네 몸같이 사랑하라고 하신 주님의 말씀을 입과 머리로는 알면서도 행위로는
실천하지 못했던 한 해였습니다.
말씀을 영과 가슴으로 깨달아 실천하는 산 믿음을 허락하여 주시옵소서.
물질로 인하여 삶의 현장에서 주님의 말씀을 잊고 살아갈 때 마다 생각나게 하시어
하나님의 말씀을 따라 성령님의 인도함에 의지하여 살아가는 우리 형제 자매들이 되게 하여 주시옵소서.
</p>
<p>
우리 모두에게 가난한 심령이 되고, 고통 받는 심령에게는 주님의 말씀으로 자유함을 받는
말씀의 역사가 되게 하여 주시옵소서.
보이지 않는 곳에서 헌신하는 손길을 기억하시고 주님께 입술로 영광을 올리는 성가대에 함께 하여 주시옵소서.
주님의 사랑이 온 땅위에 충만하시길 원하나이다.
한 해를 보내는 아쉬움 속에 다가오는 새해에는 더욱 믿음을 굳건히 세워 성령님의 인도함따라
다시 오실 주님을 기다리며 예수 그리스도 이름으로 기도드립니다. 아멘
</p>
</div>
<div id="jb-sidebar">
<h2>신앙</h2>
<ul>
<li>믿음</li>
<li>사랑</li>
<li>봉사</li>
</ul>
</div>
<div id="jb-footer">
<p>Copyright</p>
</div>
</div>
</body>
</html>
아래는 위 코드 실행결과입니다.
만약 사이드바를 왼쪽으로 옮기고 싶으면
•#jb-content의 float: left;를 float: right;
•#jb-content의 float: right;를 float: left;
로 바꿔주면 됩니다.
'홈페이지제작 > CSS' 카테고리의 다른 글
| [기초CSS 강좌 ] 반응형 레이아웃 만들기(홈페이지만들기) (0) | 2018.01.02 |
|---|---|
| [CSS3기초] 홈페이지 레이아웃 만들기 [웹사이트의 레이아웃](2) (0) | 2018.01.01 |
| [CSS 강좌 ] 박스 모델(Box Model) 구현하기 (0) | 2017.12.22 |
| [CSS 강좌 ] 폰트속성 ( font-family) (0) | 2017.12.13 |
| [CSS 강좌 ] 컨텐트 만들기 ( content ) (0) | 2017.12.12 |
itworldkorea
IT korea가 세상(world)을 변화시킨다.