[Html] div 태그 사용법 & 예제
- Web/HTML, CSS
- 2018. 6. 26.
오늘은 div태그에 대해 알아보겠습니다. div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.
div태그 사용법 & 예제
| 태그 | 속성 | 비고 |
| <div> | style | 스타일 |
| width | 가로 크기 | |
| height | 세로 크기 | |
| border | 테두리 굵기 | |
| background-color | 배경 색상 | |
| float | 정렬 | |
| margin | 여백 |
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) 사용법 총정리(만들기,테두리,병합,정렬,배경색 등등)
'Web > HTML, CSS' 카테고리의 다른 글
| [Html] 으로 만드는 간단한 장애물 피하기게임 (2) | 2018.06.28 |
|---|---|
| [Html] Span 태그 사용법 & 예제 (1) | 2018.06.27 |
| [Html] Margin, Padding 속성의 차이점과 사용법 (2) | 2018.06.25 |
| [Html] pre 태그 사용법 & 예제 (0) | 2018.06.24 |