LogicalMaster
HTML 레이아웃 만들기 - Part 1 본문
이번시간에는 HTML, CSS 를 이용하여 레이아웃을 만들어 보겠습니다.
HTML 파일로 저장하시고 브라우저로 열면 됩니다.
- HTML 하기 전에 먼저 알아야 할 것들
div - div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다.
style - style 속성은 CSS 처럼 스타일을 적용할 수 있습니다.
예) <div style="color:red;"></div>
- 소스
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#jb-container {
width: 1080px;
margin: 0px auto;
padding: 20px;
}
#jb-header {
margin-bottom: 20px;
}
#jb-content {
width: 580px;
height:600px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar {
width: 400px;
height:600px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h2>사이트 제목</h2>
</div>
<div id="jb-content">
<h3>Content</h3>
내용이 들어가는 곳입니다.
</div>
<div id="jb-sidebar">
<h3>Sidebar</h3>
오른쪽 메뉴입니다.
</div>
<div id="jb-footer">
<p>Copyright 내용이 들어가는 곳입니다.</p>
</div>
</div>
</body>
</html>
- 결과화면
오른쪽 메뉴 부분이 좀 깁니다.
줄여보겠습니다.
#jb-sidebar 쪽의 width 부분을 조정합니다.
- 소스
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>CSS</title>
<style>
#jb-container {
width: 1080px;
margin: 0px auto;
padding: 20px;
}
#jb-header {
margin-bottom: 20px;
}
#jb-content {
width: 750px;
height:600px;
padding: 20px;
margin-bottom: 20px;
float: left;
border: 1px solid #bcbcbc;
}
#jb-sidebar {
width: 230px;
height:600px;
padding: 20px;
margin-bottom: 20px;
float: right;
border: 1px solid #bcbcbc;
}
#jb-footer {
clear: both;
}
</style>
</head>
<body>
<div id="jb-container">
<div id="jb-header">
<h2>사이트 제목</h2>
</div>
<div id="jb-content">
<h3>Content</h3>
내용이 들어가는 곳입니다.
</div>
<div id="jb-sidebar">
<h3>Sidebar</h3>
오른쪽 메뉴입니다.
</div>
<div id="jb-footer">
<p>Copyright 내용이 들어가는 곳입니다.</p>
</div>
</div>
</body>
</html>
- 결과화면
다음 시간에는 반응형 레이아웃에 대해 알아보겠습니다.
감사합니다.
'IT > 개발일기' 카테고리의 다른 글
| HTML "반응형" 레이아웃 만들기 - Part 2 (0) | 2020.08.27 |
|---|---|
| CSS 에 대해 알아보자 (0) | 2020.08.26 |
| 서버 이전 완료 (0) | 2020.08.24 |
| jQuery 에 대해 알아보자 (0) | 2020.08.24 |
| JS 에 대해 알아보자 (0) | 2020.08.23 |
