div 태그 사용법 & 예제
페이지 정보
본문
div태그는 Division의 약자로 웹사이트의 레이아웃(전체적인 틀)을 만들때 주로 사용합니다. div는 웹페이지에서 논리적 구분을 정의하는 태그입니다. div 태그를 사용하여 각각의 블록(공간)을 알맞게 배치하고 CSS를 활용하여 스타일을 적용할 수 있습니다. 특히 요즘에는 레이아웃 배치를 거의 Div를 활용해 구성하는 추세이기때문에 그 쓰임새는 더 중요해졌다고 말할 수 있겠습니다.
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)
<!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태그를 적용시켜 간단한 웹사이트의 레이아웃을 만드는 방법에 대해 알아보겠습니다.
<!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>
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)
<!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태그를 적용시켜 간단한 웹사이트의 레이아웃을 만드는 방법에 대해 알아보겠습니다.
<!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>
- 이전글UL 태그, OL태그, DL태그, LI태그 사용법 24.02.27
- 다음글[Html] 테이블(Table) 24.02.27
댓글목록
등록된 댓글이 없습니다.
