안녕하세요, 여행벌입니다.
오늘은 웹 문서의 레이아웃을 짤 때 사용하는 div 태그에 대해서 포스팅해보겠습니다.
<div> 태그
div 태그는 division 의 약자로 말 그대로 영역을 나누는 데 사용되는 태그입니다. 웹 페이지에서 논리적인 공간 구분을 정의하는 태그로 웹 사이트의 레이아웃을 만들 때 주로 사용합니다. 블록 라인 레벨 태그로 혼자 한 줄을 차지합니다.
예시 1) Header / Body / Footer
div 태그를 이용해서 여러 가지 웹 사이트의 구조를 만들어보겠습니다.
가장 심플한 웹 문서 구조는 Header / Body / Footer 3개의 영역으로 나눈 구조입니다. div 태그를 이용해서 나눠보도록 하겠습니다. 정확한 예시를 위해 CSS를 적용해서 예시를 다뤄보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width : 100%;
height : 500px;
font-size : 3.5em;
text-align : center;
}
.header{
width : 100%;
height : 20%;
background-color : #C55A11;
}
.body{
width : 100%;
height : 60%;
background-color : #F4B183;
}
.footer{
width : 100%;
height : 20%;
background-color : #F8CBAD;
}
</style>
</head>
<body>
<div class="header">Header영역</div>
<div class="body">Body영역</div>
<div class="footer">Footer영역</div>
</body>
</html>
div 태그를 이용해서 Header, Body, Footer 영역을 설정하고 블록 레벨 태그이므로 width, height 속성을 적용해서 위의 예시와 같이 영역을 나눌 수 있습니다.
예시 2) Header / Body / LeftSideBar / RightSideBar / Footer
다음으로는 웹 문서 구조로 자주 쓰이는 Header / Body / LeftSideBar / RightSideBar / Footer 구조를 div 태그를 이용해서 나눠보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
width : 100%;
height : 500px;
font-size : 3.5em;
text-align : center;
}
.header{
width : 100%;
height : 20%;
background-color : #C55A11;
}
.body{
display : flex;
height : 60%;
}
.content{
width : 60%;
background-color: #F4B183;
}
.leftSideBar, .rightSideBar{
width : 20%;
background-color: #ED7D31;
}
.footer{
width : 100%;
height : 20%;
background-color : #F8CBAD;
}
</style>
</head>
<body>
<div class="header">Header영역</div>
<div class="body">
<div class="leftSideBar">LeftSideBar영역</div>
<div class="content">Body영역</div>
<div class="rightSideBar">RightSideBar영역</div>
</div>
<div class="footer">Footer영역</div>
</body>
</html>
이상으로 div 태그 포스팅을 마치도록 하겠습니다.
'Dev > HTML5 + CSS3' 카테고리의 다른 글
| [HTML+CSS] 전체 선택자(*) 와 태그 선택자 - travelbeeee (0) | 2020.04.06 |
|---|---|
| [HTML+CSS] 클래스(class) 와 아이디(id) 선택자 - travelbeeee (0) | 2020.04.06 |
| [HTML+CSS] 드롭다운 목록 만들기 <select> 태그 (0) | 2020.04.04 |
| [HTML+CSS] 사용자의 입력을 받는 <input> 태그 (0) | 2020.04.03 |
| [HTML+CSS] 블록 레벨 요소 vs 인라인 레벨 요소 - travelbeeee (0) | 2020.04.02 |
