기록

*53일차 실습 본문

학원/실습

*53일차 실습

pringspring 2022. 4. 13. 00:22 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
div, section,header,aside,footer {padding:10px;}
div#container	{ background-color:#F0F0F0; width:960px; margin:0 auto;}
header {background-color:#908886; height:100px; }
nav	{float:right; transform: translateY(-10px); }
nav ul {display: flex;}
nav ul li	{list-style:none; }
nav ul li a {text-decoration:none;color:black; padding:0 10px;}
nav ul li:not(:last-of-type)::after {content: "|"}	
nav ul li a:hover	{color:white;}
section#content	{background-color:#F5F5F5; float:left; width:640px; min-height:500px; }
aside	{background-color:#DCDAD9; float:right; width:280px; min-height:500px; }
footer {background-color:#555555; clear:both;  text-align:center; padding-bottom: 30px; } 
footer h3 { text-align: left; }
</style>
<title>HTML5 레이아웃</title>
</head>
	<body>
		<div id="container">
			<header>
				<h2>Header</h2>
				<nav>
					<ul class="navi">
						<li><a href="#">Home</a></li>
						<li><a href="#">HTML5</a></li>
						<li><a href="#">CSS3</a></li>
						<li><a href="#">JQuery</a></li>
						<li><a href="#">Mobile</a></li>
						<li><a href="#">Profile</a></li>
					</ul>
				</nav>
			</header>
			<section id="content">
				<article>
					<h3>Article1</h3>
					<p>동력은 역사를 끝까지 사라지지 생명을 사막이다. 귀는 풀이 맺어, 산야에 안고, 아니다. 아니한 가치를 끓는 어디 같은 간에 희망의 커다란 이것이다. 인생을 가장 어디 아니한 사랑의 석가는 몸이 교향악이다.</p>
				</article>
				<article>
					<h3>Article2</h3>
					<p>동산에는 살았으며, 반짝이는 불어 곳이 그들은 것이다.보라, 영원히 것이다. 행복스럽고 낙원을 옷을 하였으며, 살았으며, 아름다우냐?</p>
				</article>
			</section>
			<aside>
				<h4>Aside</h4>

			</aside>
			<footer>
				<h3>Footer</h3>
				<p>&lt;Copyright 2017. <strong>KH정보교육원</strong>. All rights reserved.&gt;</p>
			</footer>
		</div>
	</body>
</html>

'학원 > 실습' 카테고리의 다른 글

*55일차 실습  (0) 2022.04.14
*54일차 실습  (0) 2022.04.13
*52일차 실습  (0) 2022.04.11
*51일차 실습  (0) 2022.04.07
*50일차 실습  (0) 2022.04.06
'학원/실습' Related Articles more