WEBSTANDARD

사이트 만들기


					<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
	<meta name="author" content="flvns" />
	<meta name="description" content="웹 표준을 준수한 사이트 제작 수업입니다." />
	<meta name="keywords" content="웹스토리보이,웹퍼블리셔,웹표준,웹접근성" />
	<title>Webstandard</title>

	<!-- style -->
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />

	<!-- webfont -->
	<link href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' rel='stylesheet' type='text/css' />
	<link href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' rel='stylesheet' type='text/css' />
	<link href="https://fonts.googleapis.com/css?family=Audiowide" rel="stylesheet" />
</head>


<body>
	<div id="warp">
		<div id="header">
			<div class="container">
				<div class="qucik">
					<a href="#">Designer Cafe 디자이너 카페</a>
					<a href="#">Publisher Cafe 퍼블리셔 카페</a>
				</div>
				<div class="title">
					<h1><a href="http://flvns.dothome.co.kr" target="_blank">flvns.dothome.co.kr</a></h1>
					<p>Can See the Future, Only Dream</p>
				</div>
				<div class="icon">
					<ul>
						<li class="icon_tit1"><a href="#"><span class="ir">아이콘1</span></a></li>
						<li class="icon_tit2"><a href="#"><span class="ir">아이콘1</span></a></li>
						<li class="icon_tit3"><a href="#"><span class="ir">아이콘1</span></a></li>
						<li class="icon_tit4"><a href="#"><span class="ir">아이콘1</span></a></li>
					</ul>
				</div>
			</div>
		</div>
		<!-- //header -->
		<div id="contents">
			<div id="cont-nav">
				<div class="container">
					<div class="nav">
						<div>
							<h3>Layout</h3>
							<ul>
								<li><a href="#">layout유형1</a></li>
								<li><a href="#">layout유형2</a></li>
								<li><a href="#">layout유형3</a></li>
								<li><a href="#">layout유형4</a></li>
								<li><a href="#">layout유형5</a></li>
								<li><a href="#">layout유형6</a></li>
								<li><a href="#">layout유형7</a></li>
								<li><a href="#">layout유형8</a></li>
								<li><a href="#">layout유형9</a></li>
								<li><a href="#">layout유형10</a></li>
								<li><a href="#">layout유형11</a></li>
								<li><a href="#">layout유형12</a></li>
								<li><a href="#">layout유형13</a></li>
								<li><a href="#">layout유형14</a></li>
								<li><a href="#">layout유형15</a></li>
								<li><a href="#">layout유형16</a></li>
							</ul>
						</div>
						<div>
							<h3>Basic</h3>
							<ul>
								<li><a href="#">Basic01</a></li>
								<li><a href="#">Basic02</a></li>
								<li><a href="#">Basic03</a></li>
								<li><a href="#">Basic04</a></li>
								<li><a href="#">Basic05</a></li>
								<li><a href="#">Basic06</a></li>
								<li><a href="#">Basic07</a></li>
								<li><a href="#">Basic08</a></li>
								<li><a href="#">Basic09</a></li>
								<li><a href="#">Basic10</a></li>
								<li><a href="#">Basic11</a></li>
								<li><a href="#">Basic12</a></li>
								<li><a href="#">Basic13</a></li>
								<li><a href="#">Basic14</a></li>
								<li><a href="#">Basic15</a></li>
								<li><a href="#">Basic16</a></li>
							</ul>
						</div>
						<div class="last">
							<h3>Tutorial</h3>
							<ul>
								<li><a href="#">Tutorial 유형1</a></li>
								<li><a href="#">Tutorial 유형2</a></li>
								<li><a href="#">Tutorial 유형3</a></li>
								<li><a href="#">Tutorial 유형4</a></li>
								<li><a href="#">Tutorial 유형5</a></li>
								<li><a href="#">Tutorial 유형6</a></li>
								<li><a href="#">Tutorial 유형7</a></li>
								<li><a href="#">Tutorial 유형8</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!-- cont-nav -->

			<div id="cont-tit">
				<div class="container">
					<div class="tit">
						<h2>“나는 박수호다”</h2>
						<span class="btn"><a href="#"><span class="ir">전체메뉴버튼</span></a>
						</span>
					</div>
				</div>
			</div>
			<!-- cont-tit -->
			<div id="cont-ban">
				<div class="container">
					<div class="ban">
						<p class="ban-prev"><a href="#"><span class="ir">이전 이미지</span></a></p>
						<ul>
							<li>
								<a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기" /></a>
							</li>
							<li>
								<a href="#"><img src="img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기" /></a>
							</li>
							<li>
								<a href="#"><img src="img/banner_link3.jpg" alt="HTML5를 위한 로그인 폼 만들기" /></a>
							</li>
						</ul>
						<p class="ban-next"><a href="#"><span class="ir">다음 이미지</span></a></p>
					</div>
				</div>
			</div>
			<!-- cont-ban -->
			<div id="cont-cont">
				<div class="container">
					<div class="cont">
						<div class="box colum1">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- notice -->
							<div class="notice">
								<h4>Graphic Design</h4>
								<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>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
							</div>
							<!-- //notice -->

							<!-- notice2 -->
							<div class="notice2 mt20">
								<h4>Graphic Design2</h4>
								<ul>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
								</ul>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
							</div>
							<!-- //notice2 -->
						</div>
						<!-- /colum1/-->

						<div class="box colum2">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- notice3 -->
							<div class="notice3">
								<h4>Notice Image</h4>
								<ul>
									<li>
										<a href="#">
											<img src="img/tex_img.jpg" alt="이미지1" />
											<strong>브라우저 테스트</strong>
											<em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="img/tex_img.jpg" alt="이미지1" />
											<strong>브라우저 테스트</strong>
											<em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="img/tex_img.jpg" alt="이미지1" />
											<strong>브라우저 테스트</strong>
											<em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em>
										</a>
									</li>
									<li>
										<a href="#">
											<img src="img/tex_img.jpg" alt="이미지1" />
											<strong>브라우저 테스트</strong>
											<em>브라우저 테스트를 도와주는 설치형 브라우저 브라우저 테스트를 도와주는 설치형 브라우저</em>
										</a>
									</li>
								</ul>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
							</div>
							<!-- //notice3 -->
						</div>
						<!-- /colum2/-->

						<div class="box colum3">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- login -->
							<div id="login-warp">
								<h4 class="ir">로그인</h4>
								<div id="login-header">
									<h5 class="ir">로그인 설정</h5>
									<ul class="login_level">
										<li>
											<a href="#"><img src="img/btn_security1_on.gif" alt="보완1단계" /></a>
										</li>
										<li>
											<a href="#"><img src="img/btn_security2_off.gif" alt="보완2단계" /></a>
										</li>
										<li>
											<a href="#"><img src="img/btn_security3_off.gif" alt="보완3단계" /></a>
										</li>
									</ul>
									<h5 class="ir">로그인 안내</h5>
									<ul class="login_info">
										<li class="info">보안<img src="img/h_security1_txt.gif" alt="1" /> 단계</li>
										<li class="ip">IP보안 <span>on</span></li>
									</ul>
								</div>
								<div id="login-contents">
									<h5 class="ir">로그인</h5>
									<form action="#" method="post">
										<fieldset>
											<legend class="ir">보안1단계</legend>
											<dl>
												<dt><label for="uid">아이디</label></dt>
												<dd><input type="text" id="uid" maxlength="12" title="아이디" class="input_text" /></dd>
												<dt><label for="upw">비밀번호</label></dt>
												<dd><input type="password" id="upw" maxlength="16" title="비밀번호" class="input_text" /></dd>
											</dl>
											<p class="keep">
												<input type="checkbox" id="keeping" class="input_check" /><label for="keeping"> 아이디 저장</label>
												<input type="image" src="img/btn_login.gif" alt="로그인" class="sumit" />
											</p>
										</fieldset>
									</form>
								</div>
								<div id="login-footer">
									<h5 class="ir">문제 해결</h5>
									<ul>
										<li><a href="#">회원가입</a></li>
										<li><a href="#">아이디</a> / <a href="#">비밀번호</a></li>
									</ul>

								</div>
							</div>
							<!-- //login -->

							<!-- ad -->
							<div class="ad">
								<h4>Advertisement</h4>
								<ul>
									<li>
										<a href="#"><img src="img/h_banner1.jpg" alt="광고배너1" /></a>
									</li>
									<li>
										<a href="#"><img src="img/h_banner2.jpg" alt="광고배너1" /></a>
									</li>
									<li>
										<a href="#"><img src="img/h_banner3.jpg" alt="광고배너1" /></a>
									</li>
								</ul>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
							</div>
							<!-- //ad -->
						</div>


						<!-- /colum3/-->

						<div class="box colum4">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- notice-hover -->
							<div class="notice-hover">
								<h4>Notice Hover</h4>
								<ul>
									<li>
										<a href="#">
											<span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner1.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
								</ul>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
							</div>
							<!-- //notice-hover -->

							<!-- notice-hover2 -->
							<div class="notice-hover2">
								<ul>
									<li>
										<a href="#">
											<span><img src="img/h_banner2.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner2.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner2.jpg" alt="배너1" /><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
								</ul>
							</div>
							<!-- //notice-hover2 -->
						</div>
						<!-- /colum4/-->

						<div class="box colum5">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- tab_menu -->
							<div class="tab_menu">
								<h4 class="ir">공지사항 탭메뉴</h4>
								<ul>
									<li class="active"><a href="#">공지사항1</a>
										<ul>
											<li><a href="#">첫 번째 탭의 공지사항1 입니다</a></li>
											<li><a href="#">첫 번째 탭의 공지사항1 입니다.</a></li>
											<li><a href="#">첫 번째 탭의 공지사항1 입니다.</a></li>
										</ul>
									</li>
									<li><a href="#">공지사항2</a>
										<ul style="display: none;">
											<li><a href="#">두 번째 탭의 공지사항2 입니다.</a></li>
											<li><a href="#">두 번째 탭의 공지사항2 입니다.</a></li>
											<li><a href="#">두 번째 탭의 공지사항2 입니다.</a></li>
										</ul>
									</li>
									<li><a href="#">공지사항3</a>
										<ul style="display: none;">
											<li><a href="#">세 번째 탭의 공지사항3 입니다.</a></li>
											<li><a href="#">세 번째 탭의 공지사항3 입니다.</a></li>
											<li><a href="#">세 번째 탭의 공지사항3 입니다.</a></li>
										</ul>
									</li>
								</ul>


							</div>
							<!-- //tab_menu -->

							<!-- notice4 -->
							<div class="notice4">
								<h4>최신 <em>공지사항</em></h4>
								<ul>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
									<li><a href="#">웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다.</a><span class="time">2017-06-29</span></li>
								</ul>
								<a href="#" title="더보기" class="more">더보기</a>
							</div>
							<!-- //notice4 -->
						</div>
						<!-- /colum5/-->

						<div class="box colum6">
							<h3>
								<span class="ico-img ir">아이콘 이미지</span> 
								<span class="ico-tit">Notice</span>
							</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형 입니다.</p>

							<!-- gallery -->
							<div class=" gallery">
								<h4>gallery</h4>
								<div class="gallery_btn">
									<ul>
										<li>
											<a href="#"><img src="img/btn_play_on.gif" alt="재생" /></a>
										</li>
										<li>
											<a href="#"><img src="img/btn_stop_off.gif" alt="정지" /></a>
										</li>
										<li>
											<a href="#"><img src="img/btn_prev_off.gif" alt="이전 이미지" /></a>
										</li>
										<li>
											<a href="#"><img src="img/btn_next_off.gif" alt="다음 이미지" /></a>
										</li>
									</ul>
								</div>
								<div class="gallery_img">
									<ul>
										<li>
											<a href="#"><img src="img/gallery_img1.jpg" alt="이미지1" /></a>
										</li>
										<li>
											<a href="#"><img src="img/gallery_img2.jpg" alt="이미지2" /></a>
										</li>
										<li>
											<a href="#"><img src="img/gallery_img3.jpg" alt="이미지3" /></a>
										</li>
										<li>
											<a href="#"><img src="img/gallery_img4.jpg" alt="이미지4" /></a>
										</li>
									</ul>
								</div>
							</div>
							<!-- //gallery -->
						</div>
						<!-- /colum6/-->
					</div>
				</div>
			</div>
			<!-- cont-cont -->
		</div>
		<!-- //contents -->
		<div id="footer">
			<div class="container">
				<div class="footer">
					<ul>
						<li><a href="#">사이트 도움말</a></li>
						<li><a href="#">사이트 이용약관</a></li>
						<li><a href="#">사이트 운영 원칙</a></li>
						<li><a href="#"><strong>개인정보취급방침</strong></a></li>
						<li><a href="#">책임의 한꼐화 법적고지</a></li>
						<li><a href="#">게시중단요청서비스</a></li>
						<li><a href="#">고객센터</a></li>
					</ul>
					<address>
						<em>Copyright © </em>
						<a href="http://http://flvns.dothome.co.kr/">flvns.dothome.co.kr</a>
						<span>All Right Reserved</span>
					</address>
					<p style="padding=top:20px;">
						<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
						<a href="http://jigsaw.w3.org/css-validator/check/referer"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="올바른 CSS입니다!" /></a>
					</p>
				</div>
			</div>
		</div>
		<!-- //footer -->
	</div>
</body>

</html>
					
								/* layout(전체영역) */
body {background: #f1f4fb url(../img/body_bg.gif);}
#warp {}
#header {height: 327px; background-image: url(../img/header_bg.jpg);
         background-repeat: repeat-x; 
         background-position: center top;}
#contents {}
#footer {border-top: 1px solid #ccc; background-color: #edf0f5; margin-top:90px;}

/* container(가운데영역) */
.container {position: relative; width: 990px; height:inherit; margin:0 auto;  /* background-color: rgba(0,0,0,0.2); */  } 


/* content lyout(전체영역) */
#cont-nav {background: url(../img/cont_nav_bg.png) repeat-x; display:none;}
#cont-tit {background-color: #fff;}
#cont-ban {background-color: #dceff7;}
#cont-cont {}

/* qucik */
/* .qucik {text-align: right;}
div.qucik {text-align: right;}
.container div.qucik {text-align: right;}
div.container div.qucik {text-align: right;}
#header div.container div.qucik {text-align: right;}
div#header div.container div.qucik {text-align: right;}
#wrap div#header div.container div.qucik {text-align: right;}
div#wrap div#header div.container div.qucik {text-align: right;}*/
.qucik {text-align: right;}
.qucik a {color: #fff; padding-left: 10px; padding-top: 5px; display: inline-block; }
.qucik a:hover {color : #ccc;}

/* title */
.title h1 {position: absolute; left: 370px; top: 150px; z-index: 100;}
.title h1 a {background-color: #4aa8d4; font-size: 16px; color:#fff; padding: 7px 15px; z-index: 100; text-transform: capitalize; display: block; }
.title p  {position: absolute; left: 200px; top: 100px; background-color: #2698cb; font-size: 25px; color:#fff; text-transform: uppercase; padding: 7px 18px; z-index: 10; font-family: 'Audiowide', cursive;}

/* icon */
.icon {position: absolute; left: 340px; top: 230px; }
.icon ul {overflow: hidden;}
.icon ul li {float:left; margin:0 3px;}
.icon ul li a {width: 57px; height: 57px; display:block;  background-image: url(../img/icon.png);}
.icon ul li.icon_tit1 a {}
.icon ul li.icon_tit2 a {background-position : 0 -120px;}
.icon ul li.icon_tit3 a {background-position : 0 -240px;}
.icon ul li.icon_tit4 a {background-position : 0 -360px;}
.icon ul li.icon_tit1 a:hover {background-position : 0 -60px;}
.icon ul li.icon_tit2 a:hover {background-position : 0 -180px;}
.icon ul li.icon_tit3 a:hover {background-position : 0 -300px;}
.icon ul li.icon_tit4 a:hover {background-position : 0 -420px;}


/* nav */
.nav {overflow: hidden; padding: 20px 0 }
.nav div {float:left; width: 40%;}
.nav div h3 {font-size: 18px; color : #25a2d0; font-weight: 400;}
.nav div ul {overflow: hidden;}
.nav div ul li {width: 50%; float:left;}
.nav div ul li a {color: #333; padding: 3px;}
.nav div ul li a:hover {background-color: #1a96d0; color: #fff;}
.nav div.last {width: 20%;}
.nav div.last ul li {width: 100%;}

/* tit */
.tit {text-align: center; }
.tit h2 {font-size: 39px; font-family: 'Nanum Brush Script'; color: #2c94c4; letter-spacing: 2px;}
.tit .btn {position: absolute; right:0; ; top:5px;}
.tit .btn a {width: 57px; height: 57px; display:block; background:url(../img/icon.png) 0 -540px ;}

/* ban */
.ban {padding : 30px 0 25px 0;}
.ban p {position: absolute; top:70px;}
.ban p a {width: 23px; height: 43px; display:block; background-image: url(../img/arrow.gif);}
.ban p.ban-prev { left:-30px; }
.ban p.ban-next { right:-30px; }
.ban p.ban-prev a {background-position: 0 0; }
.ban p.ban-prev a:hover {background-position: -23px 0; }
.ban p.ban-next a { background-position: 0 -43px; }
.ban p.ban-next a:hover {background-position: -23px -43px;}
.ban ul {overflow: hidden;}
.ban ul li {float:left; width: 330px; text-align: center;}
.ban ul li a img {border: 4px solid #dcdcdc;}
.ban ul li a:hover {border-color: #98bcdc; }

/* cont */
.cont {overflow: hidden; padding-top: 30px;}
.cont .box {width: 289px; height: 364px; float:left; margin:0 30px 30px 0; padding-right: 30px; position: relative;}
.cont .colum1 {border-right: 1px solid #c8c8c8;}
.cont .colum2 {border-right: 1px solid #c8c8c8;}
.cont .colum3 {padding-right: 0; margin-right: 0;}
.cont .colum4 {border-right: 1px solid #c8c8c8;}
.cont .colum5 {border-right: 1px solid #c8c8c8;}
.cont .colum6 {padding-right: 0; margin-right: 0;}

.cont .box .ico-img {width: 57px; height: 57px; background-image: url(../img/icon.png); display:block; position: absolute; left: 0; top: 6px;}
.cont .box .ico-tit {padding: 67px; font-size: 18px; color: #2c94c4;}
.cont .box .ico-desc {padding: 0 0 15px 67px; margin-bottom: 15px; color: #878787; border-bottom: 1px solid #d0d0d0;}

.cont .box.colum1 .ico-img {background-position: 0 -600px;}
.cont .box.colum2 .ico-img {background-position: 0 -720px;}
.cont .box.colum3 .ico-img {background-position: 0 -840px;}
.cont .box.colum4 .ico-img {background-position: 0 -960px;}
.cont .box.colum5 .ico-img {background-position: 0 -1080px;}
.cont .box.colum6 .ico-img {background-position: 0 -1200px;}

.cont .box.colum1 .ico-img:hover {background-position: 0 -660px;}
.cont .box.colum2 .ico-img:hover {background-position: 0 -780px;}
.cont .box.colum3 .ico-img:hover {background-position: 0 -900px;}
.cont .box.colum4 .ico-img:hover {background-position: 0 -1020px;}
.cont .box.colum5 .ico-img:hover {background-position: 0 -1140px;}
.cont .box.colum6 .ico-img:hover {background-position: 0 -1260px;}


/* notice */
.notice {position: relative;}
.notice h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px; }
.notice li {overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice .more {position:absolute; right: 0; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display:block;}

/* notice2 */
.notice2 {position: relative;}
.notice2 h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;}
.notice2 ul {}
.notice2 li {overflow: hidden; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice2 li a {width: 65%; float: left;  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice2 li .time {width: 30%; float: right;  text-align: right; }
.notice2 .more {position:absolute; right: 0; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display:block;}

/* notice3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;}
.notice3 li {position: relative; height: 55px; padding:5px 0 0 60px;}
.notice3 li a img {position: absolute; left: 0; top: 0; border: 1px solid #390;}
.notice3 li a strong {display: block;}
.notice3 li a em {display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice3 .more {position:absolute; right: 0; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display:block;}

/* notice4 */
.notice4 {position: relative; border: 1px solid #ccc; margin-top: 10px; }
.notice4 h4 {border-bottom: 1px solid #ccc; padding: 8px 10px;}
.notice4 h4 em {color: #cf3292;}
.notice4 ul {margin: 10px; }
.notice4 li {overflow: hidden;  background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice4 li a {float: left; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 li .time {float: right; width: 30%; text-align: right;}
.notice4 .more {position: absolute; right: 8px; top: 8px;}


/* notice-hover */
.notice-hover {position: relative; }
.notice-hover h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;  }
.notice-hover ul {overflow: hidden; }
.notice-hover li {float: left; width: 33.3333%; text-align:center; }
.notice-hover li img {width: 90px; height: 90px;}
.notice-hover li span {position: relative; width: 90px;height: 90px; display:block; line-height:90px; margin: 0 auto;}
.notice-hover li span em { visibility: hidden; position: absolute; left: 0; top:0; background-color: #000; width: 100%; height: 100%; color:#fff; opacity: 0.6; filter:alpha(opacity=60);}
.notice-hover li span:hover em {visibility: visible;}
.notice-hover li strong { }
.notice-hover .more {position: absolute; right: 0; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display: block; }

/* notice-hover2 */
.notice-hover2 {margin-top: 15px; }
.notice-hover2 ul {overflow: hidden; }
.notice-hover2 li {float: left; width: 33.33333%; text-align: center;}
.notice-hover2 li img {width: 90px; height: 90px;}
.notice-hover2 span {position: relative; display: block; width: 90px; height: 90px; margin: 0 auto; }
.notice-hover2 span em {visibility: hidden; position: absolute; left: 0; bottom: 0; background-color: #000; opacity: 0.6; width: 100%; color: #fff;  }
.notice-hover2 span:hover em {visibility: visible;}
.notice-hover2 strong {display: block; padding-top: 3px;  }

/* ad */
.ad {position: relative; }
.ad h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;  }
.ad ul {overflow: hidden; }
.ad li {float: left; width: 33.33333%; text-align: center; }
.ad li img {width: 90px; height: 90px;}
.ad .more {position: absolute; right: 0; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display: block;  }

/* tab_menu */
.tab_menu {position: relative; border:1px solid #ccc; height: 105px; padding: 8px;}
.tab_menu ul {overflow: hidden; border-bottom: 1px solid #ccc;}
.tab_menu ul li {float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px;}
.tab_menu ul li a {display: block; padding: 5px 10px; }
.tab_menu ul li ul {border-bottom: 0; position: absolute; left: 10px; top: 50px;;}
.tab_menu ul li ul li {border: 0;}
.tab_menu ul li ul li a {padding: 0; color: #333; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.tab_menu ul li.active {background-color: #2c94c4;}
.tab_menu ul li.active a {color: #fff;}
.tab_menu ul li.active ul li a {color: #333;}

/* gallery */
.gallery {position: relative; border: 1px solid #ccc;}
.gallery h4 {font-size: 14px; color: #0093bd; font-weight: bold; border-bottom: 1px solid #ccc; padding: 8px 0 6px 11px; margin-bottom: 8px;}
.gallery .gallery_btn {position:absolute; right: 9px; top: 8px;}
.gallery .gallery_btn ul {overflow: hidden;}
.gallery .gallery_btn li {float: left; }
.gallery .gallery_img {width: 266px; height: 208px; overflow: hidden; margin: 10px;}

/* login-warp */
#login-warp {position: relative; border : 1px solid #c8c8c8; height: 118px; margin-bottom: 15px;}
#login-header {width: 257px; height: 25px;  position:absolute; left: 15px; top: 10px;}
#login-header .login_level {overflow: hidden; margin-top: 3px;}
#login-header .login_level li {float: left;}
#login-header .login_info {position: absolute; left: 65px; top: 0;}
#login-header .login_info .ip {position: absolute; left: 135px; top: 0; width: 60px;}
#login-header .login_info .ip span {font-weight: bold; color: #0093db; text-decoration: underline; text-transform: uppercase;}

#login-contents {position: absolute; left: 15px; top: 38px;}
#login-contents dt label {width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top: 0;}
#login-contents .input_text {width: 170px;height: 16px; color: #444; border: 1px solid #bebebe; padding: 2px 2px 3px 4px; margin-bottom: 3px; }
#login-contents .keep {position: absolute; left: 183px; top: 0; width: 80px;}
#login-contents .input_check {vertical-align: -3px;}
#login-contents .sumit {position: absolute; left: 0; top: 26px;}

#login-footer {position: absolute; left: 15px; top: 92px;}
#login-footer li {display: inline; padding: 0 3px 0 6px; background: url(../img/bar.gif) no-repeat 0 2px;}
#login-footer li:first-child {font-weight: bold; background: none; padding-left: 0;}

/* footer */
.footer {text-align:center; padding: 30px 0;}
.footer li {display: inline-block; padding: 0 16px; background: url(../img/bar.gif) no-repeat 0 2px; }
.footer li:first-child {background: none;}
.footer address {padding-top: 20px;}

					
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, al, h1, h2, h3, h4, h5, h6, form, input, legend, textarea, select, fieldset, p, button {margin:0; padding:0;}

/* a 링크 초기화 */
a {color:#2f3743; text-decoration: none;}
a:hover {color : #390;}

/* 기본 폰트 설정 */
body, input, textarea, select, buttun, table {font-family:"나눔 고딕", "Nanum Gothic", "돋움", "Dotum", helevtica, sans-serif; font-size: 12px; line-height: 1.7;}

/* 폰트 스타일 초기화 */
em, address {font-style: normal;}

/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 12px; font-weight: normal;}

/* 블릿 기호 초기화 */
ul, li, ol {list-style: none;}

/* IR 효과 */
.ir {width:0; height:0; overflow:hidden; font-size: 0; line-height:0; position: absolute; left:0; top: 0;}

/* 태두리 초기화 */
img, fieldset {border: 0;}





/* padding, margin setting */
.pt00 {padding-top: 0px !important;}
.pt05 {padding-top: 5px !important;}
.pt10 {padding-top: 10px !important;}
.pt15 {padding-top: 15px !important;}
.pt20 {padding-top: 20px !important;}
.pt25 {padding-top: 25px !important;}
.pt30 {padding-top: 30px !important;}
.pt35 {padding-top: 35px !important;}
.pt40 {padding-top: 40px !important;}
.pt45 {padding-top: 45px !important;}
.pt50 {padding-top: 50px !important;}
.pt55 {padding-top: 55px !important;}
.pt60 {padding-top: 60px !important;}

.pl00 {padding-left: 0px !important;}
.pl05 {padding-left: 5px !important;}
.pl10 {padding-left: 10px !important;}
.pl15 {padding-left: 15px !important;}
.pl20 {padding-left: 20px !important;}
.pl25 {padding-left: 25px !important;}
.pl30 {padding-left: 30px !important;}
.pl35 {padding-left: 35px !important;}
.pl40 {padding-left: 40px !important;}
.pl45 {padding-left: 45px !important;}
.pl50 {padding-left: 50px !important;}
.pl55 {padding-left: 55px !important;}
.pl60 {padding-left: 60px !important;}

.pr00 {padding-right: 0px !important;}
.pr05 {padding-right: 5px !important;}
.pr10 {padding-right: 10px !important;}
.pr15 {padding-right: 15px !important;}
.pr20 {padding-right: 20px !important;}
.pr25 {padding-right: 25px !important;}
.pr30 {padding-right: 30px !important;}
.pr35 {padding-right: 35px !important;}
.pr40 {padding-right: 40px !important;}
.pr45 {padding-right: 45px !important;}
.pr50 {padding-right: 50px !important;}
.pr55 {padding-right: 55px !important;}
.pr60 {padding-right: 60px !important;}

.pb00 {padding-bottom: 0px !important;}
.pb05 {padding-bottom: 5px !important;}
.pb10 {padding-bottom: 10px !important;}
.pb15 {padding-bottom: 15px !important;}
.pb20 {padding-bottom: 20px !important;}
.pb25 {padding-bottom: 25px !important;}
.pb30 {padding-bottom: 30px !important;}
.pb35 {padding-bottom: 35px !important;}
.pb40 {padding-bottom: 40px !important;}
.pb45 {padding-bottom: 45px !important;}
.pb50 {padding-bottom: 50px !important;}
.pb55 {padding-bottom: 55px !important;}
.pb60 {padding-bottom: 60px !important;}

.mt00 {margin-top: 0px !important;}
.mt05 {margin-top: 5px !important;}
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
.mt55 {margin-top: 55px !important;}
.mt60 {margin-top: 60px !important;}

.ml00 {margin-left: 0px !important;}
.ml05 {margin-left: 5px !important;}
.ml10 {margin-left: 10px !important;}
.ml15 {margin-left: 15px !important;}
.ml20 {margin-left: 20px !important;}
.ml25 {margin-left: 25px !important;}
.ml30 {margin-left: 30px !important;}
.ml35 {margin-left: 35px !important;}
.ml40 {margin-left: 40px !important;}
.ml45 {margin-left: 45px !important;}
.ml50 {margin-left: 50px !important;}
.ml55 {margin-left: 55px !important;}
.ml60 {margin-left: 60px !important;}

.mr00 {margin-right: 0px !important;}
.mr05 {margin-right: 5px !important;}
.mr10 {margin-right: 10px !important;}
.mr15 {margin-right: 15px !important;}
.mr20 {margin-right: 20px !important;}
.mr25 {margin-right: 25px !important;}
.mr30 {margin-right: 30px !important;}
.mr35 {margin-right: 35px !important;}
.mr40 {margin-right: 40px !important;}
.mr45 {margin-right: 45px !important;}
.mr50 {margin-right: 50px !important;}
.mr55 {margin-right: 55px !important;}
.mr60 {margin-right: 60px !important;}

.mb00 {margin-bottom: 0px !important;}
.mb05 {margin-bottom: 5px !important;}
.mb10 {margin-bottom: 10px !important;}
.mb15 {margin-bottom: 15px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb25 {margin-bottom: 25px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb35 {margin-bottom: 35px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb45 {margin-bottom: 45px !important;}
.mb50 {margin-bottom: 50px !important;}
.mb55 {margin-bottom: 55px !important;}
.mb60 {margin-bottom: 60px !important;}
							

웹 표준

웹표준이란 웹페이지 제작에 있어서 브라우저 종류 및 버전에 따른 기능차이에 대하여 호환이 가능하도록 하는 표준안을 적용하는 것을 이야기합니다. 현재 인터넷을 사용하는데 있어서 다양한 브라우저들이 있습니다. 익스플로어를 쓰는 사람도 있고, 구글의 크롬을 쓰는 사람도 있고 기타 다른 것을 사용하는 사람도 있겠죠. 이렇듯 모든 사람들이 하나의 브라우저를 사용하고 있지는 않습니다. 웹페이지를 만들었는데 다른 곳에서는 제대로 보이는데 다른 곳에서는 이상하게 보인다면 그것은 웹페이지로서의 활용도가 없다고 봐야 할 것입니다.

W3C(World wide web Consortium)

  • W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄, 그리고 일본의 게이오 대학이 연합아여 만든 국제적인 웹 기술 표준 기구를 말합니다.

웹접근성 이니셔티브(WAl : Web Accessibility Initiative)

  • WAI는 시각, 청각 기능 등에 장애를 지닌 사람도 일반인과 동등하게 웹에 접근하여 이용할 수 있도록 관련 지침을 개발하고 웹 접근성 향상을 위한 노력을 기울이는 W3C의 산하 단체를 말합니다.

프로토 타입

프로토 타입

Reference