DAY 31 - 페이지 만들기1 (2024.08.14) DAY 32 - 페이지 만들기2 (2024.08.16)

---

Folder: 10_webPage

---

reset.css

@charset "UTF-8";

/* reset css */
html, body {
   width: 100%;
   height: 100%;
}
html {
   overflow-y: scroll;
}
body, div, dl,dt,dd,ul,ol,li, h1,h2,h3,h4,h5,h6, form, fieldset, p, button {
   margin: 0;
   padding: 0;
}
body, h1,h2,h3,h4, input, textarea, button, select, option {
   font-family: '돋움', dotum, Helvetica, sans-serif; 
   font-size: 12px;
   color: #444;
}
img, fieldset {
   border: 0;
}
li {
   list-style: none;
}
input, select, button {
   vertical-align: middle;
}
img {
   vertical-align: top;
}
em, address {
   font-style: normal;
}
a {
   color: #666;
   text-decoration: none;
}
a:hover, a:focus {
   color: #222;
   text-decoration: underline;
}
table {
   border-collapse: collapse;
}

---

<dl class="skip">
	<dt class="blind">skip navigation</dt>
	<dd><a href="#content">skip to content</a></dd>
</dl><!-- skip -->
<hr/>

---

index.html

header 부분

	<div id="header">
		<h1 class="logo"><a href="#">LOGO</a></h1>
		
		<dl class="topnav">
			<dt class="blind">top navigation</dt>
			<dd><a href="#">Login</a></dd>
			<dd><a href="#">Member join</a></dd>
			<dd><a href="#">Sitemap</a></dd>
		</dl>
		
		<h2 class="blind">main navigation</h2>
		<ul class="mainnav">
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div><!-- header -->

---

container 부분

---

snb 부분

 

<div class="snb">
	<h2>About</h2>
	<ul>
		<li><a href="#">Company Info</a></li>
		<li><a href="#">History</a></li>
		<li><a href="#">Location</a></li>
	</ul>
</div><!-- snb -->

---

content 부분

		<div id="content">
			<p class="locate">
				<a href="#">Home</a>
				<a href="#">About</a>
				<a href="#">Company Info</a>
			</p>
			
			<h2>Company Info</h2>
			
			<p>
				<img src="../image/treethum.png" alt="tree thumnail photo">
			</p>
			
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
            pariatur voluptates ipsum!</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
            pariatur voluptates ipsum!</p>
		</div><!-- content -->

---

footer 부분

	<div id="footer">
		<dl class="btmnav">
			<dt>bottom navigation</dt>
				<dd><a href="#">About</a></dd>
				<dd><a href="#">Services</a></dd>
				<dd><a href="#">Potfolio</a></dd>
				<dd><a href="#">Contact us</a></dd>
				<dd><a href="#">Location</a></dd>
		</dl>
		
    	<p class="copy">
			Copyright &copy; COMPANY Design<br>
			Powered by Webazit, e-mail : webmaster@company.com
		</p>
	</div><!-- footer -->

---

* [ main.css 시작 ] *

[ 글씨체 적용하기 ]

main.css

@charset "UTF-8";

@import url("./reset.css");

/* '나눔고딕체'이고, 웹 폰트를 활용 */
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css")

---

index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./main.css">
</head>

원래 적용했던 것들이 다 사라지는 것을 볼 수 있다.

---

[ hr 안 보이게 하기 ]

main.css

hr {
	display: none;
}

hr이 안 보이게 !! 사라진 것은 아니다.

 

---

[ blind 안 보이게 하기 ]

.blind {
	display: none;	
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
}

---

Skip Navigation

Skip Navigation 사용하는 가장 큰 이유는 사용자 편의 및 웹 접근성이다.

 

웹 접근성이라고 하면 우리나라에서는 장애인에 대한 편의를 제공하는 것이다.

 

본문으로 이동하기 위해서는 대 메뉴와 좌측 메뉴 등과 같이 반복적으로 제공되는 링크를 모두 거쳐야만 한다. 즉, Tab키/방향키을 반복적으로 눌러야하는 불필요한 행동을 해야하는 것이다. 이는 웹 접근성을 저해하는 주요인이 된다. 그래서 사용자 특히 장애인이 반복적인 링크들로 인해 불편해 하지 않고, 원하는 영역 즉 ‘본문’으로 바로 이동할 수 있는 건너뛰기 링크를 반드시 제공해야 한다.

 

하지만 더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서도 편의를 제공하는 것이다.

 

가령 내가 마우스가 고장났다면?

또는 키보드를 못쓴다면?

 

여기서 Skip Navigation는 키보드만으로 접근을 하는 사용자를 위한 편의를 제공하는 경우도 있다

마우스로 우리가 보고자 하는 본문 내용 쪽으로 포커스를 움직인다면 편리하겠지만,

키보드만으로 쓰는 경우는 본문으로 가기까지 거쳐야 하는 메뉴들이 많다.

그래서 HTML 가장 상단에 Skip Navigation를 만들어 놓는다.

 

Skip Navigation는 <body>다음으로 나오는 것이 가장 적절하다

 

[본문 바로가기] [메뉴 바로가기] [하단정보 바로가기]

등의 Skip Navigation가 가장 많다.

 

HTML

<div class="skipnav">

<ul>

<li><a href="본문 아이디값">본문으로 이동</a></li>

<li><a href="하단정보 아이디값">하단정보 바로가기</a></li>

</ul>

</div>

 

CSS

.skipnav a {display:none}

.skipnav a:focus,

.skipnav a:active {display:block;}

 

css 는 만들기 나름이다. js나 css3를 써서 움직임을 줄 수도 있고,

position을 이용하여 display:none이 아닌 화면에서 보이지 않게 한 후 포커스가 가면 나오게 할 수도 있다.

---

[ tab 키 ]

/* skip css */
.skip a {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
	z-index: 9999;
	width: 100%;
	background-color: navy;
	color: white;
	font: bold 1.3em Tahoma, sans-serif;
	text-decoration: none;
	text-align: center;
}

.skip a:hover, .skip a:active, .skip a:focus {
	top: 0;
	padding: 0.5em 0;
}

처음에는 -1000을 줘서 안 나오게 하고

마우스를 올리거나 눌렀을 때 top:0으로 줘서 그 때부터 tab키가 실행이 되도록 하는 것이다 !!

 

tab 키 누를 때마다 위치가 변하는 거 확인할 수 있다.

 

 

---

index.html

<dl class="skip">
	<dt class="blind">skip navigation</dt>
	<dd><a href="#content">skip to content</a></dd>
</dl><!-- skip -->

파란색 바를 누르면 content로 가는 것을 확인할 수 있다.

[ wrap 가운데 정렬 ]

/* 가로 너비 지정 및 가운데 정렬 */
#wrap {
	width: 760px;
	margin: 0 auto;
}

가운데로 정렬된 걸 확인할 수 있다.

---

[ container css ] - snb / content

---

[ snb css ]

[ content css ]

/* snb 시작 */
.snb {
	float: left;
	width: 170px;
}
/* snb 끝 */

/* content 시작 */
#content {
	float: right;
	width: 560px;
}

---

float때문에 footer에 있는 값에도 float가 적용되므로 

container 부분에 block단위로 잡아주고 clear을 해줬으므로 footer부분이 내려가는 것을 확인할 수 있다.

/* container 시작 */
#container:after {
	content: '';
	display: block;
	clear: both;
}

---

[ header css ]

 

어떤 영역에 'position: absolute'를 지정할 경우에는,

그 영역을 감싸는 부분에 반드시 'position: relative'를 지정한다.

그 상위 영역이 'absolute' 위치의 기준이 된다.

 

[ topnav ]

#header {
	position: relative;
}

.topnav {
	position: absolute;
	right: 35px;
	top: 18px;
}

---

.topnav dd {
	float: left;
	padding-right: 11px;
	margin-right: 10px;
	background: url("../image/bg_topnav.png") no-repeat 100% 50%;
}

---

옆에 마지막 한 줄은 안나오게 하기 위해서 

.topnav dd:last-child {
	padding-right: 0;
	margin-right: 0;
	background: none;
}

.topnav dd a {
	color: black;
	font-size: 9pt;
}

 

---

[ logo ]

.logo {
	padding: 12px 0 12px 26px;
}

---

.logo a {
	display: block;
	overflow: hidden;
	width: 90px;
	height: 30px;
	background: url("../image/logo.png") no-repeat;
	text-indent: -9999em; /* 들여쓰기, 양수이면 들여쓰기, 음수이면 내어쓰기가 된다. */
}

---

[ mainnav ]

.mainnav {
	padding-left: 50px;
	background-color: #005B9B;
}

.mainnav:after {
	content: '';
	display: block;
	clear: both;
}

.mainnav li {
	float: left;
}

.mainnav li a {
	color: #ffffff;
}

---

.mainnav li a {
	display: block;
	padding: 0 13px;
	background-color: #005B9B;
	color: #ffffff;
	font: bold 16px/40px 'Nanum Gothic', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.mainnav li a:hover {
	color: #660000;
	background-color: #ffcc00;
}

 

[형식]

font : 폰트두께 폰트크기/line-height 서체

---

#header {
	position: relative;
	padding-bottom: 99px;
	border-bottom: 1px solid #cccccc;
	background: url("../image/bg_header.png") no-repeat 50% 100%;
}

---

[ container css ]

#container {
	background: url("../image/bg_snb.png") repeat-y 170px 0;
}

---

[ snb h2 ]

.snb h2 {
	padding: 28px 14px 8px 0;
	margin-left: 11px;
	margin-bottom: 15px;
	border-bottom: 1px solid #cccccc;
	color: #005B8B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}

---

[ snb ul ]

.snb ul {
	margin-left: 11px;
}

.snb ul a {
	display: block;
	padding-right: 14px;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	text-decoration: none;
	line-height: 30px;
}

---

.snb ul a:hover{
	color: #660000;
	text-decoration: underline;
}

---

[ content locate]

#content {
	position: relative;
	float: right;
	width: 560px;
}

.locate {
	position: absolute;
	right: 28px;
	top: 26px;
	color: #ccc;
	font-size: 0.9em;
	word-spacing: 0.3em;
}

.locate a {
	color: #666666;
}

 

---

index.html

<div id="content">
			<p class="locate">
				<a href="#">Home</a> &gt;
				<a href="#">About</a> &gt;
				<strong>Company Info</strong>
			</p>

---

.locate strong {
	font-weight: normal;
	color: #666666;
	word-spacing: 0em;	
}

---

index.html

p태그와 p태그는 중첩이 안되므로 바깥은 div로 감싸야 한다.

			<div class="text">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
	            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
	            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
	            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
	            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
	            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
	            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
	            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
	            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
	            pariatur voluptates ipsum!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
	            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
	            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
	            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
	            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
	            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
	            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
	            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
	            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
	            pariatur voluptates ipsum!</p>
            </div>

---

 

[ content h2 ]

#content h2 {
	padding: 24px 0;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 24px;
	font-weight: bold;
}

---

#content .thum {
	float: left;
	margin-left: 14px;
	
}

#content .thum img {
	width: 114px;
	height: 111px;
	border: 1px solid #cccccc;
}

#content .text{
	margin-left: 148px;
}

#content .text p {
	margin-bottom: 15px;
	line-height: 1.4;
	/* 
	웹브라우저에서 정한 기본값이 보통 1.2이다.
	예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 된다.
	 */
}

---

[ footer css ]

---

#footer {
	border-top: 1px solid #cccccc;
	padding: 18px 30px 40px 20px;
	color: #666;
	font-size: 0.9em;
}

---

#footer:after {
	content: '';
	display: block;
	clear: both;
}

.btmnav {
	float: right;
}

.btmnav dd {
	float: left;
}

---

.btmnav dd:after {
	content: '|';
	padding: 0 0.7em;
	color: #999;
}

---

.btmnav dd:last-child:after {
	content: '';
	padding: 0 0;
}

---

.copy {
	float: left;
	line-height: 1.8;
}

---

    	<p class="copy">
			Copyright &copy; COMPANY Design<br>
			Powered by Webazit, e-mail : <a href="mailto:webmaster@company.com">webmaster@company.com</a>
		</p>

---

[ 최종 코드 + 결과 ]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="./main.css">
</head>
<body>
<dl class="skip">
	<dt class="blind">skip navigation</dt>
	<dd><a href="#content">skip to content</a></dd>
</dl><!-- skip -->
<hr/>

<div id="wrap">
	<div id="header">
		<h1 class="logo"><a href="#">LOGO</a></h1>
		
		<dl class="topnav">
			<dt class="blind">top navigation</dt>
			<dd><a href="#">Login</a></dd>
			<dd><a href="#">Member join</a></dd>
			<dd><a href="#">Sitemap</a></dd>
		</dl>
		
		<h2 class="blind">main navigation</h2>
		<ul class="mainnav">
			<li><a href="#">About</a></li>
			<li><a href="#">Services</a></li>
			<li><a href="#">Portfolio</a></li>
			<li><a href="#">Contact us</a></li>
		</ul>
	</div><!-- header -->
	<hr/>
	
	<div id="container">
		<div class="snb">
			<h2>About</h2>
			<ul>
				<li><a href="#">Company Info</a></li>
				<li><a href="#">History</a></li>
				<li><a href="#">Location</a></li>
			</ul>
		</div><!-- snb -->
		<hr/>
		
		<div id="content">
			<p class="locate">
				<a href="#">Home</a> &gt;
				<a href="#">About</a> &gt;
				<strong>Company Info</strong>
			</p>
			
			<h2>Company Info</h2>
			
			<p class="thum">
				<img src="../image/treethum.png" alt="tree thumnail photo">
			</p>
			
			<div class="text"> <!-- p태그와 p태그는 중첩이 안되므로 바깥은 div로 감싸야 한다. -->
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
	            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
	            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
	            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
	            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
	            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
	            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
	            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
	            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
	            pariatur voluptates ipsum!</p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto, ea, impedit ut 
	            perspiciatis assumenda ipsam minus veritatis tenetur nisi commodi laboriosam 
	            quae sint nulla? Obcaecati, corrupti, placeat, quasi repudiandae deleniti quod 
	            aliquam facere vitae cumque sapiente sequi qui asperiores eos ipsum perferendis 
	            tenetur veritatis nesciunt dolores corporis sint nisi numquam excepturi dolor 
	            aspernatur natus provident et itaque quaerat saepe unde quo quidem odit sunt 
	            soluta animi incidunt beatae. Quod, amet recusandae earum iste debitis! Amet, 
	            expedita, aperiam, sint omnis fuga magnam eos quidem alias soluta nobis sunt 
	            unde incidunt! Ratione, autem eligendi molestiae saepe et numquam facilis 
	            pariatur voluptates ipsum!</p>
            </div>
		</div><!-- content -->
	</div><!-- container -->
	<hr/>
	
	<div id="footer">
		<dl class="btmnav">
			<dt class="blind">bottom navigation</dt>
				<dd><a href="#">About</a></dd>
				<dd><a href="#">Services</a></dd>
				<dd><a href="#">Potfolio</a></dd>
				<dd><a href="#">Contact us</a></dd>
				<dd><a href="#">Location</a></dd>
		</dl>
		
    	<p class="copy">
			Copyright &copy; COMPANY Design<br>
			Powered by Webazit, e-mail : <a href="mailto:webmaster@company.com">webmaster@company.com</a>
		</p>
	</div><!-- footer -->
</div><!--  wrap -->
</body>
</html>
<!-- 
Skip Navigation
Skip Navigation 사용하는 가장 큰 이유는 사용자 편의 및 웹 접근성이다.

웹 접근성이라고 하면 우리나라에서는 장애인에 대한 편의를 제공하는 것이다.

본문으로 이동하기 위해서는 대 메뉴와 좌측 메뉴 등과 같이 반복적으로 제공되는 링크를 모두 거쳐야만 한다. 즉, Tab키/방향키을 반복적으로 눌러야하는 불필요한 행동을 해야하는 것이다. 이는 웹 접근성을 저해하는 주요인이 된다. 그래서 사용자 특히 장애인이 반복적인 링크들로 인해 불편해 하지 않고, 원하는 영역 즉 ‘본문’으로 바로 이동할 수 있는 건너뛰기 링크를 반드시 제공해야 한다.

하지만 더 큰 범위에서는 정상적으로 쓸 수 없는 상황에 대해서도 편의를 제공하는 것이다.

가령 내가 마우스가 고장났다면?
또는 키보드를 못쓴다면? 

여기서 Skip Navigation는 키보드만으로 접근을 하는 사용자를 위한 편의를 제공하는 경우도 있다
마우스로 우리가 보고자 하는 본문 내용 쪽으로 포커스를 움직인다면 편리하겠지만, 
키보드만으로 쓰는 경우는 본문으로 가기까지 거쳐야 하는 메뉴들이 많다. 
그래서 HTML 가장 상단에 Skip Navigation를 만들어 놓는다.

Skip Navigation는 <body>다음으로 나오는 것이 가장 적절하다

[본문 바로가기]  [메뉴 바로가기]  [하단정보 바로가기]
등의 Skip Navigation가 가장 많다.

HTML
<div class="skipnav">
<ul>
    <li><a href="본문 아이디값">본문으로 이동</a></li>
    <li><a href="하단정보 아이디값">하단정보 바로가기</a></li>
</ul>
</div>

CSS
.skipnav a {display:none}
.skipnav a:focus,
.skipnav a:active {display:block;}

css 는 만들기 나름이다. js나 css3를 써서 움직임을 줄 수도 있고, 
position을 이용하여 display:none이 아닌 화면에서 보이지 않게 한 후 포커스가 가면 나오게 할 수도 있다.
 -->

@charset "UTF-8";

@import url("./reset.css");

/* '나눔고딕체'이고, 웹 폰트를 활용 */
@import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");

hr {
	display: none;
}

.blind {
	display: none;	
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
}

/* skip css */
.skip a {
	display: block;
	overflow: hidden;
	position: absolute;
	left: 0;
	top: -1000em;
	z-index: 9999;
	width: 100%;
	background-color: navy;
	color: white;
	font: bold 1.3em Tahoma, sans-serif;
	text-decoration: none;
	text-align: center;
}

.skip a:hover, .skip a:active, .skip a:focus {
	top: 0;
	padding: 0.5em 0;
}

/* 가로 너비 지정 및 가운데 정렬 */
#wrap {
	width: 760px;
	margin: 0 auto;
}

/* header 시작 */
/* 어떤 영역에 'position: absolute'를 지정할 경우에는,
   그 영역을 감싸는 부분에 반드시 'position: relative'를 지정한다.
   그 상위 영역이 'absolute' 위치의 기준이 된다.*/

#header {
	position: relative;
	padding-bottom: 99px;
	border-bottom: 1px solid #cccccc;
	background: url("../image/bg_header.png") no-repeat 50% 100%;
}

.logo {
	padding: 12px 0 12px 26px;
}

.logo a {
	display: block;
	overflow: hidden;
	width: 90px;
	height: 30px;
	background: url("../image/logo.png") no-repeat;
	text-indent: -9999em; /* 들여쓰기, 양수이면 들여쓰기, 음수이면 내어쓰기가 된다. */
}
.topnav {
	position: absolute;
	right: 35px;
	top: 18px;
}

.topnav dd {
	float: left;
	padding-right: 11px;
	margin-right: 10px;
	background: url("../image/bg_topnav.png") no-repeat 100% 50%;

}

.topnav dd:last-child {
	padding-right: 0;
	margin-right: 0;
	background: none;
}

.topnav dd a {
	color: black;
	font-size: 9pt;
}

.mainnav {
	padding-left: 50px;
	background-color: #005B9B;
}

.mainnav:after {
	content: '';
	display: block;
	clear: both;
}

.mainnav li {
	float: left;
}

.mainnav li a {
	display: block;
	padding: 0 13px;
	background-color: #005B9B;
	color: #ffffff;
	font: bold 16px/40px 'Nanum Gothic', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.mainnav li a:hover {
	color: #660000;
	background-color: #ffcc00;
}
/* header 끝 */

/*
[형식]
font : 폰트두께 폰트크기/line-height 서체
*/
/* container 시작 */
#container {
	background: url("../image/bg_snb.png") repeat-y 170px 0;
	padding-bottom: 20px; /* container와 footer의 간격 지정*/
}

#container:after { /* float 해제 */
	content: '';
	display: block;
	clear: both;
}

/* snb 시작 */
.snb {
	float: left;
	width: 170px;
}

.snb h2 {
	padding: 28px 14px 8px 0;
	margin-left: 11px;
	margin-bottom: 15px;
	border-bottom: 1px solid #cccccc;
	color: #005B8B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 18px;
	font-weight: bold;
	text-align: right;
}

.snb ul {
	margin-left: 11px;
}

.snb ul a {
	display: block;
	padding-right: 14px;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 14px;
	font-weight: bold;
	text-align: right;
	text-decoration: none;
	line-height: 30px;
}

.snb ul a:hover{
	color: #660000;
	text-decoration: underline;
}
/* snb 끝 */

/* content 시작 */
#content {
	position: relative;
	float: right;
	width: 560px;
}

.locate {
	position: absolute;
	right: 28px;
	top: 26px;
	color: #ccc;
	font-size: 0.9em;
	word-spacing: 0.3em;
}

.locate a {
	color: #666666;
}

.locate strong {
	font-weight: normal;
	color: #666666;
	word-spacing: 0em;	
}

#content h2 {
	padding: 24px 0;
	color: #005B9B;
	font-family: 'Nanum Gothic', sans-serif;
	font-size: 24px;
	font-weight: bold;
}

#content .thum {
	float: left;
	margin-left: 14px;
	
}

#content .thum img {
	width: 114px;
	height: 111px;
	border: 1px solid #cccccc;
}

#content .text{
	margin-left: 148px;
}

#content .text p {
	margin-bottom: 15px;
	line-height: 1.4;
	/* 
	웹브라우저에서 정한 기본값이 보통 1.2이다.
	예를 들어 글자크기가 40px일 때 line-height의 값을 1.5로 하면, 줄 높이는 40의 1.5배인 60px가 된다.
	 */
}
/* content 끝 */

/* container 끝 */

/* footer 시작*/
#footer {
	border-top: 1px solid #cccccc;
	padding: 18px 30px 40px 20px;
	color: #666;
	font-size: 0.9em;
}
#footer:after {
	content: '';
	display: block;
	clear: both;
}

.btmnav {
	float: right;
}

.btmnav dd {
	float: left;
}

.btmnav dd:after {
	content: '|';
	padding: 0 0.7em;
	color: #999;
}

.btmnav dd:last-child:after {
	content: '';
	padding: 0 0;
}

.copy {
	float: left;
	line-height: 1.8;
}
/* footer 끝*/