[HTML+CSS] 레이아웃을 잡아주는 <div> 태그

2020. 4. 5. 21:32

안녕하세요, 여행벌입니다.

오늘은 웹 문서의 레이아웃을 짤 때 사용하는 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

굳건하게