티스토리 뷰

 <!DOCTYPE html>
<html>
<head>
<title>THE SYLMOOP's SITE</title>
<!-- 초기화 -->
<style>
* {
	margin: 0;
	padding: 0;
	font-family: '맑은 고딕', 'Malgun Gothic', Gothic, sans-serif;
}

a {
	text-decoration: none;
}

li {
	list-style: none;
}
</style>
<!-- 기본 클래스 -->
<style>
.pull-left {
	float: left;
}

.pull-right {
	float: right;
}
</style>
<!-- 페이지 -->
<style>
body {
	width: 960px;
	margin: 0 auto;
	background: #E6E6E6;
}

#page-wrapper {
	background: white;
	margin: 40px 0;
	padding: 10px 20px;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
</style>
<!-- 헤더 -->
<style>
#main-header {
	padding: 40px 50px;
}

.master-title {
	font-size: 30px;
	color: #181818;
}

.master-description {
	font-size: 15px;
	font-weight: 500;
	color: #383838;
}
</style>
<!-- 네비게이션 -->
<style>
#main-navigation {
	border-top: 1px solid #C8C8C8;
	border-bottom: 1px solid #C8C8C8;
	margin-bottom: 20px;
	height: 40px;
}

.outer-menu-item {
	float: left;
	position: relative;
}

.outer-menu-item:hover {
	background: black;
	color: white
}

.menu-title {
	display: block;
	height: 30px;
	line-height: 30px;
	text-align: center;
	padding: 5px 20px;
}

.inner-menu {
	display: none;
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	background: white;
	box-shadow: 0 2px 6px rgba(5, 5, 5, 0.9);
	z-index: 1000;
	text-align: center
}

.inner-menu-item>a {
	display: block;
	padding: 5px 10px;
	color: black
}

.inner-menu-item>a:hover {
	background: black;
	color: white;
}
</style>
<!-- 네비게이션 내부의 검색 -->
<style>
.search-bar {
	height: 26px;
	padding: 7px;
}

.input-search {
	display: block;
	float: left;
	background-color: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 15px 0 0 15px;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
	width: 120px;
	height: 24px;
	padding: 0 0 0 10px;
	font-size: 12px;
	color: #555555;
}

.input-search:focus {
	border-color: rgba(82, 168, 236, 0.8);
	outline: 0;
	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}

.input-search-submit {
	display: block;
	float: left;
	width: 50px;
	height: 26px;
	border-radius: 0 15px 15px 0;
	border: 1px solid #CCCCCC;
	margin-left: -1px;
	vertical-align: top;
	display: inline-block;
}
</style>
<!-- 중앙 내용 -->
<style>
/* body 태그의 너비: 960픽셀 */
/* #page-wrapper 태그의 padding 속성으로 내용물 너비는 920픽셀 */
#content {
	overflow: hidden;
}

#main-section {
	float: left;
	width: 710px;
}

#main-aside {
	float: right;
	width: 200px;
}
</style>
<!-- 좌측 내용물 -->
<style>
article {
	padding: 0 10px 20px 10px;
	border-bottom: 1px solid #C8C8C8;
}

.article-header {
	padding: 20px 0;
}

.article-title {
	font-size: 25px;
	font-weight: 500;
	padding-bottom: 10px;
}

.article-date {
	font-size: 13px;
}

.article-body {
	font-size: 14px;
}
</style>
<!-- 우측 구성 -->
<style>
.aside-list {
	padding: 10px 0 30px 0;
}

.aside-list>h3 {
	font-size: 15px;
	font-weight: 600;
}

.aside-list li a {
	margin-left: 8px;
	font-size: 13px;
	color: #6C6C6C;
}
</style>
<script></script>
<script></script>
</head>
<body>
	<div id="page-wrapper">
		<header id="main-header">
			<hgroup>
				<h1 class="master-title">SITE EXAMPLE</h1>
				<h2 class="master-description">충북대학교 청년취업아카데미 2기</h2>
			</hgroup>
		</header>
		<nav id="main-navigation">
			<div class="pull-left">
				<ul class="outer-menu">
					<li class="outer-menu-item"><span class="menu-title">HOME</span>
						<ul class="inner-menu">
							<li class="inner-menu-item"><a href="#">공지사항</a></li>
							<li class="inner-menu-item"><a href="#">자료실</a></li>
						</ul></li>
					<li class="outer-menu-item"><span class="menu-title">웹표준</span>
						<ul class="inner-menu">
							<li class="inner-menu-item"><a href="#">HTML</a></li>
							<li class="inner-menu-item"><a href="#">CSS3</a></li>
							<li class="inner-menu-item"><a href="#">JAVA SCRIPT</a></li>
							<li class="inner-menu-item"><a href="#">JQUERY</a></li>
						</ul></li>
					<li class="outer-menu-item"><span class="menu-title">JAVA-DB</span>
						<ul class="inner-menu">
							<li class="inner-menu-item"><a href="#">JAVA 기초</a></li>
							<li class="inner-menu-item"><a href="#">JAVA 중급</a></li>
							<li class="inner-menu-item"><a href="#">JAVA 고급</a></li>
							<li class="inner-menu-item"><a href="#">DB 기초</a></li>
							<li class="inner-menu-item"><a href="#">Oracle DBMS</a></li>
							<li class="inner-menu-item"><a href="#">응용</a></li>
							<li class="inner-menu-item"><a href="#">예제</a></li>
						</ul></li>
				</ul>
			</div>
			<div class="pull-right">
				<div class="search-bar">
					<form>
						<input type="text" class="input-search" /> <input type="submit"
							class="input-search-submit" value="search" />
					</form>
				</div>
			</div>
		</nav>
		<div id="content">
			<section id="main-section">
				<article>
					<div class="article-header">
						<h1 class="article-title">웹표준 개요와 응용</h1>
						<p class="article-date">2013년 8월 1일</p>
					</div>
					<div class="article-body">
						<img src="https://t1.daumcdn.net/cfile/blog/194F57335057D46B29" /> <br /> <br />
						<p>으아아아악</p>
						<br />
						<p>어어어어억</p>
					</div>
				</article>
				<article>
					<div class="article-header">
						<h1 class="article-title">자바 복습</h1>
						<p class="article-date">2013년 8월 1일</p>
					</div>
					<div class="article-body">
						<img src="http://www.vaio.or.kr/files/attach/images/9979/195/792/5d296375f2a6b1096cb062f22ee7e046.jpg" /> <br /> <br />
						<p>웹표준은 어려운 거 같다.</p>
						<br />
					</div>
				</article>
			</section>
			<aside id="main-aside">
				<div class="aside-list">
					<h3>카테고리</h3>
					<ul>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
					</ul>
				</div>
				<div class="aside-list">
					<h3>최근 글</h3>
					<ul>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
						<li><a href="#">데이터</a></li>
					</ul>
				</div>
			</aside>
		</div>
		<footer id="main-footer">
			<a href="#">Created By PINEAPPLE</a>
		</footer>
	</div>
</body>
</html>

 


'java,web study > 5주차 (7월 29일~8월 4일)' 카테고리의 다른 글

Alert Test  (0) 2013.08.02
데이터타입  (0) 2013.08.02
html+css3 실습  (0) 2013.08.01
Transition  (0) 2013.08.01
Image Marker  (0) 2013.08.01
z-index 비슷한 예제 2  (0) 2013.08.01
TAG
,
댓글
댓글쓰기 폼