Semantic.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>semantic</title>
<link rel="stylesheet" href="style.css" type="text/css"> 
<!-- style.css 파일을 참고 -->
</head>
<body>
	<div id="wrap">
		<!-- header: 회사의 로고 , 검색 상자 등 -->
		<header id="page_header">
			<!-- 제목 -->
			<h1>Star Blog</h1>
			<!-- nav:페이지 연결 링크,메뉴 -->
			<nav>
				<ul>
					<li><a href="1.html">최근글</a></li>
					<li><a href="2.html">이전글</a></li>
					<li><a href="3.html">공헌자 글</a></li>
					<li><a href="4.html">연락처</a></li>
				</ul>
			</nav>
		</header>
		<!-- section 페이지의 논리적영역(내용부분) -->
		<section id="posts">
			<!-- article 내용부분 -->
			<article clasas="post">
				<!-- 내용의 머릿말 -->
				<header>
					<!-- 내용의 작은 제목 -->
					<h2>얼마나 많이 기록해 둬야 되겠습니까?</h2>
					<p>Posted by Brain on 2018.12.10</p>
				</header>
				<!-- aside:인용구,덧붙이고 싶은 생각, 관련된 링크 -->
				<aside> 
				<p>&quot;물건을 팔 때는 거절할 기회를 주어선 안 됩니다.&quot;</p>	
				</aside>
				<p>10일 오전 황광희는 자신의 인스타그램에 짧은 영상 하나를 올렸다. 황광희가 입을 벌리면, 입 속에서 마치 ‘보고 싶었어’라는 단어가 쏟아져 나오는 듯한 CG가 재생되는 코믹 영상이다. 황광희는 그동안 자신을 기다려준 팬들을 위한 인사로 이 영상을 올려 웃음을 자아내고 있다.</p>
			<!-- 내용의 꼬리말 -->
			<footer>
			<p>
				<a href="comments.html">25 Comments</a>
			</p>
			</footer>
			</article>
		</section>
			<!-- 사이드바 -->
			<section id="sidebar">
			<nav>
			<h3>이전 글</h3>
			<ul>
				<li><a href="1.html">2018년1월</a></li>
				<li><a href="2.html">2018년2월</a></li>
				<li><a href="3.html">2018년3월</a></li>
				<li><a href="4.html">2018년4월</a></li>
				<li><a href="5.html">2018년5월</a></li>
			</ul>
			</nav>
			</section>
			<!-- footer : 저작권이나 사이트 소유자에 대한 정보 ,메뉴 등 -->
			<footer id="page_footer">
				<p>&copy; Star Blog</p>
				<nav>
				<ul> 
					<li><a href="#">홈페이지</a></li>
					<li><a href="#">회사소개</a></li>
					<li><a href="#">연락처</a></li>
					<li><a href="#">게시판</a></li>
				</ul>
				</nav>
			</footer>
	</div>
</body>
</html>

















style.css


@charset "UTF-8";
/*여백 및 기본적인 폰트를 설정*/
body{
	margin:0;
	padding:0;
	font-family: Arial,"MS Trebuchet",sans-serif;
}
/* 페이지의 내용을 가운데 놓음*/
#wrap{
	width: 960px;
	margin:0 auto;
}
/*헤더의 넓이를 정함*/
header#page_header{
	width: 100%
}
/* 내비게이션의 리스트 점 제거 */
header#page_header nav ul, footer#page_footer nav ul{
	list-style:none;
	margin: 0;
	padding:0;
}
/* 내비게이션을 가로 바 형태로 만듦 */
header#page_header nav ul li, footer#page_footer nav ul li{
	 padding:0;
	 margin: 0 20px 0 0;
	 display: inline;
}
p{
	margin: 0 0 20px 0;
}
/* 가로 방향으로 표시*/
section#posts{
	float:left;
	width: 74%;
}
section#posts aside{
	float:right;
	width: 35%;
	margin-left: 5%;
	font-size: 20px;
	line-height: 40px;
}
section#sidebar{
	float: left;
	width: 25%;
}
/*float를 해제해서 페이지 하단에 안착시킴*/
footer#page_footer{
	clear: both;
	width: 100%;
	text-align: center;
}








CSS 를 잘 분석해 보시기 바랍니다.

'프로그래밍 > html,css,javascript,jsp' 카테고리의 다른 글

HTML5 예제와 연습 캔버스 그리기 fillRect(1)  (0) 2018.12.19
HTML5 예제와 연습 vidio audio 추가하기.  (0) 2018.12.19
HTML5 예제와 연습 시멘틱태그와 HTML폼(1)  (0) 2018.12.19
FastBoot 스킨  (0) 2018.10.29
에디터 추천 NotePad++ 와 Atom  (0) 2018.10.25

+ Recent posts

티스토리툴바