[Html] Div 태그 사용법 & 예제

오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.


DIv태그 사용법 & 예제


 태그

속성 

비고 

 <div>

 style

스타일 

 width

가로 크기 

height

세로 크기 

border 

테두리 굵기 

background-color 

배경 색상 

 float

정렬 

 margin

여백 


div 속성입니다.


1. style은 <div>태그의 스타일을 지정해주는 것으로 다른 속성들을 사용할 수 있게끔 해줍니다. <div style="">

2. width는 <div>의 가로 크기를 정해줍니다. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있습니다.

3. height는 <div>의 세로 크기를 정해줍니다. px(픽셀)단위로도 정할 수 있고 %(비율)단위로도 정할 수 있습니다.

4. border은 <div>의 테두리의 굵기를 정해줍니다. 숫자가 클수록 굵기가 굵어집니다.

5. background-color은 <div>태그의 배경색상을 정하는 속성입니다.

6. float은 div의 정렬(좌,우)을 하는 속성입니다. 가운데정렬은 안됩니다.

7. margin은 div의 정렬기준 끝에서부터 여백을 주는 속성입니다. (margin-top,margin,-bottom,margin-left,margin-right)


예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<body>
<div style="background-color:red">첫번째 영역</div>
<div style="width:100px; height:100px; background-color:#CF0">두번째 영역</div>
<div style="width:50px; height:50px; border:1px solid black; background-color:yellow">세번째 영역</div>
<div style="width:100px; height:50px; border:3px solid black; float:right">네번째 영역</div>
<div style="width:30; height:30px background-color:green; float:left; margin:30px;">네번째 영역</div>
</body>
</html>


결과

 

첫번째 영역
두번째 영역
세번째 영역
네번째 영역
다섯번째 영역








DIv태그 CSS 적용하기

지금까지 기본적인 <div> 태그의 사용법에 대해 알아보았습니다. 하지만 웹사이트를 만들때 저런식으로 레이아웃을 짜지는 않겠죠? 대부분 CSS를 적용시켜 레이아웃을 만듭니다. 아래 예제를 통해 Div에 CSS태그를 적용시켜 간단한 웹사이트의 레이아웃을 만드는 방법에 대해 알아보겠습니다.


예제

<%@ page language="java" contentType="text/html; charset=EUC-KR"
    pageEncoding="EUC-KR"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<style type ="text/css">
div#side_left{
width:200px;
height:400px;
background-color:yellow;
float:left;
margin:5px;
}
#side_left_box{
width:95%;
height:45%;
background-color:blue;
float:left;
margin:5px;
}
#mid_content{
width:400px;
height:400px;
background-color:green;
float:left;
margin:5px;
}
#side_content_box{
display: inline;
background-color:white;
margin:5px;
}
#side_rigth{
width:200px;
height:400px;
background-color:red;
float:left;
margin:5px;
}
#side_rigth_box{
width:95%;
height:45%;
background-color:skyblue;
margin:5px;
margin-top:95%;
}
</style>
</head>
<body>
<div id = "side_left">사이드바 왼쪽
    <div id = "side_left_box">사이드바 왼쪽 위</div>
    <div id = "side_left_box">사이드바 왼쪽 아래</div>
</div>
<div id = "mid_content">
    <div id = "side_content_box">첫번째 공간</div>
    <div id = "side_content_box">두번째 공간</div>
</div>
<div id = "side_rigth">사이드바 오른쪽
    <div id = "side_rigth_box">사이드바 오른쪽 아래</div>
</div>
</body>
</html>

결과

결과


[Html] 테이블(Table) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)

[Html] Pre태그 사용법 & 예제

[Html] Margin, Padding 속성의 차이점과 사용법

[Html] Span태그 사용법 & 예제

[Html] Font 속성/스타일 (굵기,기울기,밑줄,취소선)등등


댓글(3)

  • 123213
    2019.04.29 03:49

    https://roachsblog.tistory.com/ 이거블로그 들어가면 알거에요~~
    Category
    Notice
    Guestbook
    이부분쪽에 카테고리만 하고싶는데

    • ?????
      2020.01.10 13:47

      ???????????

  • 2021.01.08 13:12 신고

    Div가 웹페이지의 논리적 경계를 구분하는 단위였군요.

    블로그에 좋은 정보가 많은 것 같아요.

    구독하고갑니다!!

Designed by JB FACTORY