<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>HTML5 BASIC PAGE</title>
<style>
*{
margin:0; padding:0;
font-family: '맑은 고딕','Malgun Gothic', Gothic, sans-serif;
}
body{
width: 960px; margin:0 auto;
background:#e6e6e6;
}
#page-wrapper{
background: white;
margin: 40px 0; padding:10px 20px;
}
#main-header{padding: 40px 50px;}
#main-navigation{
border-top:1px solid #c8c8c8;
border-bottom:9px solid #c8c8c8;
margin-bottom: 20px; height:40px;
}
#content{overflow:hidden;}
#main-section{float:left; width:710px;}
#main-aside{float:right; width:200px;}
</style>
</head>
<body>
<div id="page-wrapper">
<header id="main-header">
<hgroup>
<h1 class="master-title">HTML Example preview</h1>
<h2 class="master-description">한빛아카데미</h2>
</hgroup>
</header>
<nav id="main-navigation">
<div class="pull-left">
<ul class="outer-menu">
<li class="outer-menu-item">
<span class="menu-title">HTML5</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">CSS3</span>
<ul class="inner-menu">
<li class="inner-menu-item"><a href="#">데이터</a></li>
<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">JavaScript</span>
<ul class="inner-menu">
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</a></li>
<li class="inner-menu-item"><a href="#">데이터</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="검색" />
</form>
</div>
</div>
</nav>
<div id="content">
<section id="main-section">
<article>
<div class="article-header">
<h1 class="article-title">HTML5 개요와 활용</h1>
<p class="article-date">2013년 02월 14일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430X280" />
<br />
<br />
<p>Lorem ipsum dolor sit amet.</p>
<br />
<p>Proin ut fringilla sapien..</p>
</div>
</article>
<article>
<div class="article-header">
<h1 class="article-title">HTML5 응용와 실습</h1>
<p class="article-date">2013년 02월 17일</p>
</div>
<div class="article-body">
<img src="http://placehold.it/430X280" />
<br />
<br />
<p>Lorem ipsum dolor sit amet.</p>
<br />
<p>Proin ut fringilla sapien..</p>
</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 Team-HeXagon</a>
</footer>
</div>
</body>
</html>
margin: 상자 밖 여백을 조절
padding 상자 안 여백을 조절
border-top:위에서부터 선을 1px 긋는다.
border-bottom:아래에서부터 선은 9px 긋는다.
margin-bottom:아래로 margin값을 준다.
float:컨텐츠의 영역을 잡는다
'프로그래밍 > HTML5' 카테고리의 다른 글
| 후손 선택자 (0) | 2017.09.20 |
|---|---|
| 클래스,속성 선택자 (0) | 2017.09.20 |
| 선택자 태그 (0) | 2017.09.20 |
| css전체 선택자 태그 (0) | 2017.09.20 |
| 선택옵션,다중선택옵션,textarea (0) | 2017.09.20 |
