Daily coding

CSS : header 헤더 / main 메인 / footer 푸터 태그 본문

Front-end/Client

CSS : header 헤더 / main 메인 / footer 푸터 태그

sunnnkim 2020. 1. 10. 15:50

 

header / main / footer : 화면 구조에서 가장 많이 사용되는 3가지를 태그로 만듦

 

 

 

<!DOCTYPE html>
<html>
<header>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
header{
	width: 100%;
	height: 100px;
	background-color: #ffcc00;
	border: 1px solid;	
	margin: 10px autog;
}
main{
	background-color: olive; 
	width: 60%; height: 150px; 
	margin-left: 20%;margin-right: 20%;
	margin-bottom: 50px;
}
#box1{
	width: 50%;
	height: 60%;
	background-color: orange;
	float: left;
}
#box2{
	width: 50%;
	height: 60%;
	background-color: purple;
	float: left;
}
footer{
	border: dashed;
	width:100%;
	height: 100px;
	background-color: #81BEF7;
}
</style>

<header>
<p style="margin: 10px;">header 영역</p>
</header>

<main>
	<div style="height: 30%;">main 영역
	</div>
	<div id="box1">
	box1
	</div>
	<div id="box2">
	box2
	</div>
</main>
<footer>
	<p style="margin-left: 3%;">footer 영역</p>
</footer>


</body>
</html>

'Front-end > Client' 카테고리의 다른 글

CSS : 배경이미지 반복  (0) 2020.01.10
CSS : Gradient 만들기 (linear-gradient)  (0) 2020.01.10
CSS : 화면분할과 정렬(float)  (0) 2020.01.10
CSS : 테이블 스타일  (0) 2020.01.10
CSS : list 스타일과 list-style-image 설정  (0) 2020.01.09
'Front-end/Client' Related Articles more