Web/HTML

[HTML] grouping - <div>, <span>

씨네 2021. 11. 5. 08:10
728x90

1. grouping

grouping이란 여러 요소를 그룹화 하는 것을 의미합니다.

그루핑은 css적용시 많이 사용합니다.

​

<div> : 블록 요소

<span> : 인라인 요소

​

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>grouping</title>

<style type="text/css">
	*{
		padding: 0px;
		margin: 0px;	
	}
	div{
		border:1px dashed blue;
		margin: 10px;
	}
	#body{
		height: 400px;
	}
	#left{
		width: 48%;
		height: 90%;
		float: left;
	}
		#right{
		width: 48%;
		height: 90%;
		float: right;
	}
</style>


</head>
<body>

	<div id="header">
		<h1>제목</h1>
		<div>
			<span><a href="#">메뉴1</a></span>
			<span><a href="#">메뉴2</a></span>
			<span><a href="#">메뉴3</a></span>
			<span><a href="#">메뉴4</a></span>
		</div>	
	</div>
	
	<div id="body">
		<div id="left">
			<p>내용1</p>
		</div>
		<div id="right">
			<p>내용2</p>
		</div>
	</div>
	
	<div id="footer">
		<adress>copyright &copy; all rioght reserved qclass ....</adress>
	</div>
</body>
</html>

<style></style> 영역은 css입니다.

페이지를 보기 편하게 하기 위해 적용하였습니다.

 

728x90