HTML

HTML 예제

기련이 2020. 5. 18. 18:24

위 예제를 보고 만든 페이지

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>예제</title>
<style type="text/css"> 
h6 {
	border: 1px dashed black;
	background-color: yellow;
	position: absolute;
	bottom:0;
	width:98%;
}
h2 {
	display: inline-block;
	border: 2px solid blue;
	background-color: yellow;
	width: 100%;
	padding: 10px 0px;
}
h5 {
	position: absolute;
	background-color: lime;
	border: 2px solid orange;
	top: 37px;
	right: 10px;
	width: 250px;
}
.i {
	border: 1px solid black;
	background-color: #D5D5D5;
	width: 70%;
}
div.i p {
	border: 1px solid black;
	margin:10px 15px;
	padding: 10px 10px;
	border-radius: 5px 5px 5px 5px;
	background-color: #FAF4C0;
}
h6 + p {
	position: absolute;
	right: 10px;
	top: 100px;
	width: 180px;
	background-color: orange;
	padding: 10px 10px;
}

</style>
</head>
<body>
<h2>머리말 입니다.</h2>
<h5>내비게이션 영역, 이전, 이후, 홈</h5>
<div class="i">
	<p>첫 번째 기사</p>
	<p>두 번째 기사</p>
	<p>세 번째 기사</p>
</div>

<h6>꼬리말 입니다. 회사 연락처 등</h6>
<p>광고입니다. 계란 사세요, 계란~~</p>
</body>
</html>