뇌운동일지

[ HTML ] 기본 UI 구현 연습 본문

HTML

[ HTML ] 기본 UI 구현 연습

purpleduck 2020. 8. 3. 18:10

결과 페이지 

 

source code

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>hedgehogBakery</title>
<style type="text/css">
	div {
		border:1px solid #ccc;
	}
	#container {
		width:960px; height:auto;
		padding:20px;
		margin:0 auto;
	}

	#header {
		padding:20px;
		margin-bottom:20px;
	
	}
	
	#contents {
		width:620px; 
		border:1px solid black;
		float:left;
		background-color:#ccccff;
		padding:20px;
		margin-bottom:20px;
		
		-webkit-column-width:190px;
		-moz-column-width:190px;
		column-width:190px;
		column-count:3;
		column-gap:20px;
		column-rule:2px dotted #000;
		text-align:justify;
	}
	
	.no-col {column-span:all;}

	#sidebar {
		width:250px; 
		border:1px solid black;
		float:right;
		background-color:#c6f3f7;
		
		padding:20px;
		box-sizing:border-box;
		margin-bottom:20px;
	}

	#footer {
		padding:20px;
		clear:both;
	}

body {
	margin:0px;
}
header {
	position:relative;
	height: 280px;
	background-image: url('./image/hedgehog.jpg');
	background-repeat: repeat;
	background-position: right top;
}
header h1{
	position:absolute;
	right:500px;
	bottom:70px;
	font-size:3em;		
	color:#0099ff;	
	text-shadow:1px 2px 2px #66ffff;		
}
header h2{
	position:absolute;
	right:500px;
	bottom:30px;
	font-size:2em;
	color:#0066ff;	
	text-shadow:0px 1px 1px #3399cc;	
}
.navi{
	position:relative;
	background:#660066;
	margin-top:-15px;
	width:100%;
	height:60px;
}

.navi ul{
	list-style: none; 
	height:40px;
	padding-top:10px;
	padding-bottom:5px;
}
.navi ul li {
	display:inline;	
	font-size:15px;
}
.navi a, .navi a:visited {
	padding: 10px 5px 5px 35px;
	display: inline;
	color:#fff;
	width: 150px; 
	text-decoration: none;

}
.navi a:hover, .navi a:active, .navi a:focus {
		text-shadow:0px 2px 2px #000;
		color:#FC0;
}
.asi ul {list-style:none; }
.asi a, .asi a:visited {
	padding: 10px 5px 5px 35px;
	display: inline;
	color:#336600;
	width: 150px; 
	text-decoration: none;

}
.asi a:hover, .asi a:active, .asi a:focus {
		text-shadow:0px 2px 2px #000;
		color:#cc0000;
}
	#block img {
		display:block;
		margin:10px;
	}

	footer {
		background:#660066;
		clear:both;
		padding:20px;
		float:bottom;
		text-align:center;
		color:white;
	}

	header, section, footer, aside, article, figure {
		display: block;
	}

</style>
 </head>
 <body>
  <div id="container" class="">

	<div id="header" class="">
	 <header>
		<h1>고슴도치네</h1>
		<h2>가장 맛있는 빵집</h2>
	  </header>
		<nav class="navi">
			<ul>
				<li><a href="#">모카번</a></li>
				<li><a href="#">완두콩빵</a></li>
				<li><a href="#">카스테라</a></li>
				<li><a href="#">초코케이크</a></li>
			</ul>
		</nav>
	</div>

	<div id="sidebar" class="">
		<aside class="asi">
		<ul>
			<li><a href="#">아메리카노</a></li><br>
				<p>따뜻한 아메리카노와 아이스 아메리카노가 있습니다.</p>
			<li><a href="#">바닐라라떼</a></li><br>
				<p>따뜻한 바닐라라떼와 아이스 바닐라라떼가 있습니다.</p>
			<li><a href="#">돌체라떼</a></li><br>
				<p>따뜻한 돌체라떼와 아이스 돌체라떼가 있습니다.</p>
			<li><a href="#">녹차라떼</a></li><br>
				<p>따뜻한 녹차라떼와 아이스 녹차라떼가 있습니다.</p>
		</ul>
		</aside>
	</div>

	<div id="contents" class="">
<section>
	<article>
				<h2>고슴도치네는 빵굽기를 좋아합니다</h2>
		<p>대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다. 국회에 제출된 법률안 기타의 의안은 회기중에 의결되지 못한 이유로 폐기되지 아니한다. 다만, 국회의원의 임기가 만료된 때에는 그러하지 아니하다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다.</p>

<p>국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 의원을 제명하려면 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 조국의 평화적 통일을 위한 성실한 의무를 진다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다.</p>
	</article>
	<article>
				<h2>고슴도치들은 고슴고슴 돌아다닙니다</h2>
		<p>대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다. 국회에 제출된 법률안 기타의 의안은 회기중에 의결되지 못한 이유로 폐기되지 아니한다. 다만, 국회의원의 임기가 만료된 때에는 그러하지 아니하다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다.</p>

<p>국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 의원을 제명하려면 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 조국의 평화적 통일을 위한 성실한 의무를 진다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다.</p>
	</article>
	<article>
				<h2>고슴도치들은 참새들에게 빵을 나누어 줍니다</h2>
		<p>대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다. 국회에 제출된 법률안 기타의 의안은 회기중에 의결되지 못한 이유로 폐기되지 아니한다. 다만, 국회의원의 임기가 만료된 때에는 그러하지 아니하다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다.</p>

<p>국방상 또는 국민경제상 긴절한 필요로 인하여 법률이 정하는 경우를 제외하고는, 사영기업을 국유 또는 공유로 이전하거나 그 경영을 통제 또는 관리할 수 없다. 의원을 제명하려면 국회재적의원 3분의 2 이상의 찬성이 있어야 한다. 대통령은 조국의 평화적 통일을 위한 성실한 의무를 진다. 제안된 헌법개정안은 대통령이 20일 이상의 기간 이를 공고하여야 한다.</p>
	</article>
<article class="no-col">
<br><br><br>
				<h2>고슴도치 특제 모카번</h2>
		<p>대통령은 국무총리·국무위원·행정각부의 장 기타 법률이 정하는 공사의 직을 겸할 수 없다. 국회에 제출된 법률안 기타의 의안은 회기중에 의결되지 못한 이유로 폐기되지 아니한다. 다만, 국회의원의 임기가 만료된 때에는 그러하지 아니하다. 국토와 자원은 국가의 보호를 받으며, 국가는 그 균형있는 개발과 이용을 위하여 필요한 계획을 수립한다.</p>
	</article>
</section>
	</div>

	<div id="footer" class="">
		<footer>
		<address>
			<p>숲속 작은 집 창가에 작은 아이가 섰는데</p>
			<p>qwerty@qwerty.com</p>
		</address>
			<p>published by earlgreybutter</p>
	</footer>
	</div>

  </div>
 </body>
</html>
저작자표시 비영리 변경금지

'HTML' 카테고리의 다른 글

HTML 소소한 개념  (0) 2020.09.22
[ HTML ] 간단한 유효성 검사를 추가한 회원가입 예제  (0) 2020.08.03
[HTML5] 시맨틱 태그  (0) 2020.04.16
[HTML5] html5에서 지원되지 않는 속성  (0) 2020.04.08
[HTML5] 폼 관련 태그들  (0) 2020.04.08
'HTML' Related Articles more
Comments