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="meada212" />
	<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 rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/earlyaccess/nanumgothic.css' />
	<link rel='stylesheet' type='text/css' href='http://fonts.googleapis.com/earlyaccess/nanumbrushscript.css' />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans" />
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Josefin+Sans:100i,400" />



</head>

<body>
	<div id="wrap">
		<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://meada212.dothome.co.kr">meada212.dothome.co.kr</a></h1>

					<p>wake me up september ends,Greenday</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">아이콘2</span></a></li>
						<li class="icon_tit3"><a href="#"><span class="ir">아이콘3</span></a></li>
						<li class="icon_tit4"><a href="#"><span class="ir">아이콘4</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="#">Basic1</a></li>
								<li><a href="#">Basic2</a></li>
								<li><a href="#">Basic3</a></li>
								<li><a href="#">Basic4</a></li>
								<li><a href="#">Basic5</a></li>
								<li><a href="#">Basic6</a></li>
								<li><a href="#">Basic7</a></li>
								<li><a href="#">Basic8</a></li>
								<li><a href="#">Basic9</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_title">
				<div class="container">
					<div class="title">
						<h2>“Boulevard Of Broken Dreams”</h2>
						<span class="btn"><a href="#"><span class="ir">전체메뉴버튼</span></a>
						</span>
					</div>
				</div>
			</div>
			<!-- //cont_title -->

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

							<!-- notice2 -->

							<div class="notice2 mt20">
								<h4>Notice2</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>
						<!--//column1-->

						<div class="box column2">
							<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>
						<!--//column2-->

						<div class="box column3">
							<h3>
									<span class="ico-img ir">아이콘 이미지</span>
									<span class="ico-tit">Notice</span>
								</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p>
							<!--login -->
							<div id="login-wrap">
								<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></li>
									</ul>
								</div>
							</div>

							<!-- //login -->

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

							<!--//ad-->

						</div>
						<!--//column3-->

						<div class="box column4">
							<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="배너"/><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner1.jpg" alt="배너"/><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner1.jpg" alt="배너"/><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="배너"/><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner2.jpg" alt="배너"/><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
									<li>
										<a href="#">
											<span><img src="img/h_banner2.jpg" alt="배너"/><em>Mouse Hover</em></span>
											<strong>이미지 제목</strong>
										</a>
									</li>
								</ul>
								<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>

							</div>
							<!-- //notice-hover2 -->

						</div>
						<!--//column4-->

						<div class="box column5">

							<h3>
									<span class="ico-img ir">아이콘 이미지</span>
									<span class="ico-tit">Notice</span>
								</h3>
							<p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p>
							<!-- Tap_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="#">첫 번째 탭의 공지사항2 입니다.</a></li>
											<li><a href="#">첫 번째 탭의 공지사항3 입니다.</a></li>
										</ul>
									</li>
									<li><a href="#">공지사항2</a>
										<ul style="display:none;">
											<li><a href="#">두 번째 탭의 공지사항1 입니다.</a></li>
											<li><a href="#">두 번째 탭의 공지사항2 입니다.</a></li>
											<li><a href="#">두 번째 탭의 공지사항3 입니다.</a></li>
										</ul>
									</li>
									<li><a href="#">공지사항3</a>
										<ul style="display:none;">
											<li><a href="#">세 번째 탭의 공지사항1 입니다.</a></li>
											<li><a href="#">세 번째 탭의 공지사항2 입니다.</a></li>
											<li><a href="#">세 번째 탭의 공지사항3 입니다.</a></li>
										</ul>
									</li>
								</ul>
							</div>
							<!-- // Tap_menu -->

							<!-- notice4 -->
							<div class="notice4">
								<h4>최신 <em>공지사항</em></h4>
								<ul>
									<li><a href="#">동물들도 증명사진 찍는거 알고계십니까?</a><span class="time">2017.06.30</span></li>
									<li><a href="#">동물들도 증명사진 찍는거 알고계십니까?</a><span class="time">2017.06.30</span></li>
									<li><a href="#"> 동물들도 증명사진 찍는거 아시나요</a><span class="time">2017.06.30</span></li>
								</ul>
								<a href="#" title="더보기" class="more">더보기</a>
							</div>

							<!--// notice4 -->
						</div>
						<!--//column5-->

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

							<!--gallry -->
							<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>

							<!-- //gallry -->
						</div>
						<!--//column6-->
					</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://meada212.dothome.co.kr">meada212.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>
/* 레이아웃 */ 
body {background: #f1f4fb url(../img/header_bg.gif);}
#wrap {  }
#header { height: 327px; 
    /*background-image: url(../img/header_bg.jpg);
    background-repeat : repeat-x;
    background-position: center top; */
    background:url(../img/header_bg.jpg) repeat-x center top;
}
#contents {}
#footer {border-top:1px solid #ccc; background-color: #edf0f5; margin-top: 30px;}

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

/* 컨테이너(부분)*/
#cont_nav {display:none; background: url(../img/cont_nav_bg.png) repeat-x;}
#cont_title {background-color: #fff;}
#cont_ban {background-color: #dceff7;}
#cont_cont {}

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


/* title */
.title h1{position: absolute; left: 350px; top: 135px; z-index:100; font-family: 'Josefin Sans', sans-serif;}
.title h1 a {background-color: #4aa8d4; font-size: 18px; color:#fff; text-transform: capitalize; padding: 2px 15px; display: block;}
.title p{position: absolute; left: 210px; top: 100px; background-color: #2698cb; font-size: 24px; color:#fff; text-transform: uppercase; padding: 1px 10px; z-index:10; font-family: 'Josefin Sans', sans-serif} 


/* icon */
.icon {position: absolute; left: 330px; top: 200px;}
.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: 3%;}
.nav div ul li a:hover {background-color: #1a96d0; color:#fff;}
.nav div.last {width: 20%;}
.nav div.last ul li {width: 100%;}

/* tit */
.title {text-align:center;}
.title h2 {font-size: 39px; font-family:'Nanum Brush Script'; color: #2c94c4; letter-spacing: 2px;}
.title .btn {position:absolute; right:0; top:5px;}
.title .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: url(../img/arrow.gif) } 
.ban p.ban-prev {position: absolute; left: -30px; top: 60px;}
.ban p.ban-prev a {}
.ban p.ban-prev a:hover {background-position: -23px 0;}
.ban p.ban-next {position: absolute; right: -30px; top: 60px;}
.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 img {border: 4px solid #dcdcdc;}
.ban ul li a:hover img {border-color: #98bcdc;}


/* cont */
.cont {overflow:hidden; padding-top: 30px;} 
.cont .box {
    position: relative;
    width: 289px; height: 364px; float:left;
    margin: 0 30px 30px 0; padding-right:30px;
    }
.cont .column1 {border-right: 1px solid #c8c8c8;}
.cont .column2 {border-right: 1px solid #c8c8c8;}
.cont .column3 {padding-right:0; margin-right:0;}
.cont .column4 {border-right: 1px solid #c8c8c8;}
.cont .column5 {border-right: 1px solid #c8c8c8;}
.cont .column6 {padding-right:0; margin-right:0;}

.cont .box .ico-img {width: 57px; height:57px; display:block; background-image: url(../img/icon.png); position: absolute; left: 0; top: 6px;}
.cont .box .ico-tit {padding-left : 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.column1 .ico-img {background-position: 0 -600px;}
.cont .box.column2 .ico-img {background-position: 0 -720px;}
.cont .box.column3 .ico-img {background-position: 0 -840px;}
.cont .box.column4 .ico-img {background-position: 0 -960px;}
.cont .box.column5 .ico-img {background-position: 0 -1080px;}
.cont .box.column6 .ico-img {background-position: 0 -1200px;}

.cont .box.column1 .ico-img:hover {background-position: 0 -660px;}
.cont .box.column2 .ico-img:hover {background-position: 0 -780px;}
.cont .box.column3 .ico-img:hover {background-position: 0 -900px;}
.cont .box.column4 .ico-img:hover {background-position: 0 -1020px;}
.cont .box.column5 .ico-img:hover {background-position: 0 -1140px;}
.cont .box.column6 .ico-img:hover {background-position: 0 -1320px;}


/* notice */
.notice {position: relative;}
.notice h4 { font-size: 14px; color:#0093bd; font-weight: bold; margin-bottom: 3px;}
.notice ul {}
.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: 70%; 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; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.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 {padding: 8px 10px; border-bottom:1px solid #ccc; }
.notice4 h4 em {color : #cf3292;}
.notice4 ul { margin:10px;}
.notice4 ul li {overflow: hidden;background: url(../img/dot.gif) no-repeat 0 8px; padding-left:8px;}
.notice4 ul li a {width: 65%; float: left; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 ul li.time {width: 30%; float: right; 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.333%; text-align:center;}
.notice-hover li img {width: 90px; height: 90px; }
.notice-hover li span {position: relative; width: 90px; height: 90px; line-height:90px; display: block; 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; filter:alpha(opacity=60);;}
.notice-hover li span:hover em {visibility: visible;}
.notice-hover li strong{display: block; padding-top: 3px;}
.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 {position: relative;}
.notice-hover2 ul {overflow:hidden;  }
.notice-hover2 li {float:left; width: 33.333%; text-align:center; }
.notice-hover2 li img {width: 90px; height: 90px;}
.notice-hover2 li span {position: relative; width: 90px; height: 90px;  display: block; margin: 0 auto;  }
.notice-hover2 li span em {visibility:hidden; position: absolute; bottom: 0; left: 0; background-color: #000; color:#fff; filter:alpha(opacity=60); width: 100%; }
.notice-hover2 li span:hover em {visibility:visible;}
.notice-hover2 li 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.333%; 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;}



/* tap_menu */
.tab_menu {position: relative; border:1px solid #ccc; height: 95px; 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;  background: url(../img/dot.gif) no-repeat 0 8px; padding-left:8px;}
.tab_menu ul li ul li a {padding:0; color:#333;}
.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:#000;}


/* 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; top: 10px; right:5px;}
.gallery .gallery_btn ul {overflow:hidden;}
.gallery .gallery_btn li {float: left;}
.gallery .gallery_img {width: 266px; height: 208px; overflow:hidden;  margin: 10px;}



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

.footer address {padding-top: 20px;}




/* login-wrap */
#login-wrap {position: relative; border: 1px solid #c8c8c8; height: 118px; margin-bottom: 15px;}
#login-header {width: 257px; height: 35px; 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:#0093bd; 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: -2px;}
#login-contents .sumit {position: absolute; left: 0; top: 21px;}


#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;}
/* 여백 초기화 */
body, div, dl, dd, dt, ul, li, ol, 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, button, table {font-family: "나눔 고딕", "Nanum Gothic", "돋움","Dothum", 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;}

웹 표준

  • 월드 와이드 웹에서 규현하기 위해 따라야 할 표준 또는 규격'을 의미하며, 이는 특정 브라우저에서만 사용되는 비 표준화된 기술은 배제하고 W3C의 토론을 통해 나온 권고안(recomendation)을 사용하는 것을 말하며, 웹 문서의 구조와 표현, 그리고 동작을 구분해서 사용하는 것을 뜻한다.
  • 다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려한 웹 기술의 표준화가 필요하게 되었다. 국제 표준화 기구로 월드 와이드 웹 컨소시엄(W3C)이 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다.

W3C(World Wide Web Consortium)

  • 국제 웹 표준화 기구의 하나. WWW의 표준안 제작과 새로운 표준안 제안, 기술의 공유를 통해 WWW 의 기술적, 사회적 확산을 위해 구성된 전세계적 단체로 1994년 10월에 설립됐다.[네이버 지식백과]

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

  • 줄여서 WAI는 장애인들의 월드 와이드 웹에 대한 접근성을 향상시키기 위해 W3C에서 만든 개념이다. 일반적으로 장애인들은 컴퓨터나 웹을 이용할 때 많은 어려움을 겪게 되며, 따라서 장애인들은 비표준 장치나 웹사이트에 대한 접근성이 증대되도록 설계된 브라우저, 한정된 자원만을 사용하는 사용자 에이전트와 무선 단말기에 부여할 수 있는 광범위한 이득을 필요로 한다.

사이트 만들기

Reference

프로토 타입

웹 표준

1차

2차

3차