본문 바로가기

Programming/HTML

레이아웃

Layout.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="myCSS2.css">
</head>
<body>
	<div id=wrap>
		<div id=red>Header</div>
		<div id=yellow>main_nav</div>
		<div id=green>sub_nav</div>
		<div id=purple>content_1</div>
		<div id=skyblue>content_2</div>
		<div id=blue>footer</div>
	</div>
</body>
</html>

 

myCSS2.css

@charset "EUC-KR";

#wrap {
	width: 100%;
	height: 1024px;
}

#red {
	width: 100%;
	height: 8%;
	background-color: red;
}

#yellow {
	width: 100%;
	height: 5%;
	background-color: yellow;
}

#green {
	width: 20%;
	height: 80%;
	float: left;
	background-color: green;
}

#purple {
	width: 80%;
	height: 40%;
	float: left;
	background-color: purple;
}

#skyblue {
	width: 80%;
	height: 40%;
	float: left;
	background-color: skyblue;
}

#blue {
	width: 100%;
	height: 7%;
	float: left;
	background-color: blue;
}

'Programming > HTML' 카테고리의 다른 글

table에서 <a>tag로 사진 불러오기  (0) 2020.02.18
빠른 화면이동  (0) 2020.02.17
이미지 아이콘버튼  (0) 2020.02.17
회원가입2  (0) 2020.02.17
회원 가입  (0) 2020.02.17