WEBSTANDARD
웹 표준
- 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.
- 수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있다.
웹 접근성
- 신체 제약이나 환경 제약에 얽매이지 않고 이용자가 웹 사이트에서 제공하는 정보에 접근해 이용할 수 있어야 한다는 개념. 초기에는 장애인 때문에 생겨난 개념으로 시각장애인에게는 이미지 같은 시각 정보에 대한 설명, 청각장애인에게는 동영상 음성 정보의 자막 제공, 지체장애인에게는 키보드만으로 메뉴 접근과 웹을 쓸 수 있도록 하는 것이다. 그밖에도 환경 제약으로 비표준화된 특정 기술을 쓰지 않고 표준만 준수하면 어떠한 장애 없이 웹을 쓸 수 있도록 해야 한다. 웹 접근성을 고려한 콘텐츠 제작 방법으로는 쉬운 인식, 쉬운 운용, 쉬운 이해와 견고함을 기반으로 한다.
W3C
- 국제 웹 표준화 기구의 하나. WWW의 표준안 제작과 새로운 표준안 제안, 기술의 공유를 통해 WWW 의 기술적, 사회적 확산을 위해 구성된 전세계적 단체로 1994년 10월에 설립됐다. 현재 WWW에 대한 기술 표준은 W3C와 IETF(Internet Engineering Task Force)에서 하고 있는데 IETF는 어느 정도 성숙된 기술에 대해서 표준화를 진행하고 있고 W3C는 현재 시급한 기술들에 표준화를 담당한다.
웹 표준 사이트 만들기
레이아웃 연습
Mockup
html 소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>웹 표준 사이트 만들기</title>
<!-- style -->
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/owl.carousel.css"/>
<link rel="stylesheet" type="text/css" href="css/owl.theme.css"/>
<!-- //style -->
<!-- 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'/>
<!-- //webfont -->
<!-- ichecker -->
<script type="text/javascript" src="js/ie-checker.js"></script>
</head>
<body>
<div id="skip">
<a href="#login-wrap">로그인 바로가기</a>
<a href="#cont-cont">컨텐츠 바로가기</a>
<a href="#footer">푸터 바로가기</a>
</div>
<div id="wrap">
<div id="header">
<div class="container">
<!-- quick -->
<div class="quick">
<a href="#">Designer cafe 디자이너 카페</a>
<a href="#">Publisher cafe 퍼블리셔 카페</a>
</div>
<!-- //quick -->
<!-- title -->
<div class="title">
<h1><a href="#">hyeyeon89.co.kr</a></h1>
<p>hyeyeon homepage</p>
</div>
<!-- //title -->
<!-- icon -->
<div class="icon">
<ul>
<li class="icon_tit1"><a href="#"><span class="ir">icon1</span></a></li>
<li class="icon_tit2"><a href="#"><span class="ir">icon2</span></a></li>
<li class="icon_tit3"><a href="#"><span class="ir">icon3</span></a></li>
<li class="icon_tit4"><a href="#"><span class="ir">icon4</span></a></li>
</ul>
</div>
<!-- //icon -->
</div>
<!-- //container -->
</div>
<!--//header -->
<div id="contents">
<div id="cont-nav">
<div class="container">
<!-- nav -->
<div class="nav">
<div>
<h4>LAYOUT</h4>
<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>
<li><a href="#">layout 유형17</a></li>
<li><a href="#">layout 유형18</a></li>
<li><a href="#">layout 유형19</a></li>
<li><a href="#">layout 유형20</a></li>
</ul>
</div>
<div>
<h4>BASIC</h4>
<ul>
<li><a href="#">basic 유형1</a></li>
<li><a href="#">basic 유형2</a></li>
<li><a href="#">basic 유형3</a></li>
<li><a href="#">basic 유형4</a></li>
<li><a href="#">basic 유형5</a></li>
<li><a href="#">basic 유형6</a></li>
<li><a href="#">basic 유형7</a></li>
<li><a href="#">basic 유형8</a></li>
<li><a href="#">basic 유형9</a></li>
<li><a href="#">basic 유형10</a></li>
<li><a href="#">basic 유형11</a></li>
<li><a href="#">basic 유형12</a></li>
<li><a href="#">basic 유형13</a></li>
<li><a href="#">basic 유형14</a></li>
<li><a href="#">basic 유형15</a></li>
<li><a href="#">basic 유형16</a></li>
<li><a href="#">basic 유형17</a></li>
<li><a href="#">basic 유형18</a></li>
<li><a href="#">basic 유형19</a></li>
<li><a href="#">basic 유형20</a></li>
</ul>
</div>
<div class="last">
<h4>TUTORIAL</h4>
<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>
<li><a href="#">tutorial 유형9</a></li>
<li><a href="#">tutorial 유형10</a></li>
</ul>
</div>
</div>
<!-- //nav -->
</div>
</div>
<!--//cont-nav -->
<!-- cont-tit -->
<div id="cont-tit">
<div class="container">
<div class="tit">
<h2>“나는 강혜연이다”</h2>
<span class="btn"><a href="#d"><span class="ir">전체메뉴버튼</span></a></span>
</div>
</div>
</div>
<!--//cont-tit -->
<!-- cont-ban -->
<div id="cont-ban">
<div class="container">
<div class="ban">
<!-- <p class="ban-prev"><a href="#" title="이전이미지"><span class="ir">이전이미지</span></a></p>
<ul>
<li><a href="#"><img src="img/banner_link1.jpg" alt="배너1"></img></a></li>
<li><a href="#"><img src="img/banner_link2.jpg" alt="배너2"></img></a></li>
<li><a href="#"><img src="img/banner_link3.jpg" alt="배너3"></img></a></li>
</ul>
<p class="ban-next"><a href="#" title="다음이미지"><span class="ir">다음이미지</span></a></p> -->
<div id="owl-demo" class="owl-carousel">
<div class="item"><img class="lazyOwl" src="img/banner_link1.jpg" alt="배너1" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link2.jpg" alt="배너2" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link3.jpg" alt="배너3" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link1.jpg" alt="배너1" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link2.jpg" alt="배너2" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link3.jpg" alt="배너3" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link1.jpg" alt="배너1" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link2.jpg" alt="배너2" /></div>
<div class="item"><img class="lazyOwl" src="img/banner_link3.jpg" alt="배너3" /></div>
</div>
</div>
</div>
</div>
<!--//cont-ban -->
<div id="cont-cont">
<div class="container">
<div class="cont">
<!-- column1 -->
<div class="box column1">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-desc">가장 기본적인 메인페이지 및 서브페이지 게시판 유형입니다.</p>
<!-- notice -->
<div class="notice">
<h4>Graphic Designer</h4>
<ul>
<li><a href="#">깨지는 영역에 똑같이 float:left를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a></li>
<li><a href="#">깨지는 영역에 똑같이 clear:both를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a></li>
<li><a href="#">독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있다.</a></li>
<li><a href="#">인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.</a></li>
</ul>
<a href="#" class="more" title="더보기"><span class="ir">더보기</span></a>
</div>
<!-- //notice -->
<!-- notice2 -->
<div class="notice2 mt15">
<h4>Graphic Designer</h4>
<ul>
<li><a href="#">깨지는 영역에 똑같이 float:left를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a><span class="time">2017-02-28</span></li>
<li><a href="#">깨지는 영역에 똑같이 clear:both를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a><span class="time">2017-02-28</span></li>
<li><a href="#">독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있다.</a><span class="time">2017-02-28</span></li>
<li><a href="#">인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.</a><span class="time">2017-02-28</span></li>
<li><a href="#">인라인 요소에는 블록 요소가 포함 될 수 없지만, 인라인 요소는 포함 될 수 있습니다.</a><span class="time">2017-02-28</span></li>
</ul>
<a href="#" class="more" title="더보기"><span class="ir">더보기</span></a>
</div>
<!-- //notice2 -->
</div>
<!-- //column1 -->
<!-- column2 -->
<div class="box column2">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-desc">가장 기본적인 메인페이지 및 서브페이지 게시판 유형입니다.</p>
<!-- notice3 -->
<div class="notice3">
<h4>Notice Image</h4>
<ul>
<li><a href="#">
<img src="img/tex_img.jpg" alt="이미지" />
<strong>브라우저별 테스트</strong>
<span>브라우저별 테스트를 도와주는 설치형 브라우저별 테스트를 도와주는</span>
</a></li>
<li><a href="#">
<img src="img/tex_img.jpg" alt="이미지" />
<strong>브라우저별 테스트</strong>
<span>브라우저별 테스트를 도와주는 설치형 브라우저별 테스트를 도와주는</span>
</a></li>
<li><a href="#">
<img src="img/tex_img.jpg" alt="이미지" />
<strong>브라우저별 테스트</strong>
<span>브라우저별 테스트를 도와주는 설치형 브라우저별 테스트를 도와주는</span>
</a></li>
<li><a href="#">
<img src="img/tex_img.jpg" alt="이미지" />
<strong>브라우저별 테스트</strong>
<span>브라우저별 테스트를 도와주는 설치형 브라우저별 테스트를 도와주는</span>
</a>
</li>
</ul>
<a href="#" class="more" title="더보기"><span class="ir">더보기</span></a>
</div>
<!-- //notice3 -->
</div>
<!-- //column2 -->
<!-- column3 -->
<div class="box column3">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-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" title="아이디" maxlength="12" class="input-text" /></dd>
<dt><label for="upw">비밀번호</label></dt>
<dd><input type="password" id="upw" title="비밀번호" maxlength="16" 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="submit" />
</p>
</fieldset>
</form>
</div>
<div id="login-footer">
<h5 class="ir">문제 해결</h5>
<ul>
<li><a href="#"><strong>회원가입</strong></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" width="90px" height="90px" /></a></li>
<li><a href="#"><img src="img/h_banner2.jpg" alt="이미지2" width="90px" height="90px" /></a></li>
<li><a href="#"><img src="img/h_banner3.jpg" alt="이미지3" width="90px" height="90px" /></a></li>
</ul>
<a href="#" class="more" title="더보기"><span class="ir">더보기</span></a>
</div>
<!-- //ad -->
</div>
<!-- //column3 -->
<div class="box column4">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-desc">가장 기본적인 메인페이지 및 서브페이지 게시판 유형입니다.</p>
<!-- notice4-1 -->
<div class="notice4-1">
<h4>Notice Hover</h4>
<ul>
<li>
<a href="#">
<span>
<img src="img/h_banner1.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/h_banner1.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/h_banner1.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
</ul>
<a href="#" class="more" title="더보기"><span class="ir">더보기</span></a>
</div>
<div class="notice4-2">
<ul>
<li>
<a href="#">
<span>
<img src="img/h_banner2.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/h_banner2.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/h_banner2.jpg" alt="배너이미지" width="90px" height="90px"/>
<em>Mouse hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
</ul>
</div>
<!-- //notice4-1 -->
<!-- notice4-2 -->
<!-- //notice4-2 -->
</div>
<!-- //column4 -->
<div class="box column5">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-desc">가장 기본적인 메인페이지 및 서브페이지 게시판 유형입니다.</p>
<!-- tab-menu -->
<div class="tab-menu">
<h4 class="ir">공지사항 탭메뉴</h4>
<ul>
<li class="active"><a href="#">공지사항1</a>
<ul>
<li><a href="#">첫 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">첫 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">첫 번째 탭의 공지사항 목록입니다.</a></li>
</ul>
</li>
<li><a href="#">공지사항2</a>
<ul style="display:none;">
<li><a href="#">두 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">두 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">두 번째 탭의 공지사항 목록입니다.</a></li>
</ul>
</li>
<li><a href="#">공지사항3</a>
<ul style="display:none;">
<li><a href="#">세 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">세 번째 탭의 공지사항 목록입니다.</a></li>
<li><a href="#">세 번째 탭의 공지사항 목록입니다.</a></li>
</ul>
</li>
</ul>
</div>
<!-- //tab-menu -->
<!-- notice5 -->
<div class="notice5">
<h4>최신<em> 공지사항</em></h4>
<ul>
<li><a href="#">깨지는 영역에 똑같이 float:left를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a><span class="time">2017-03-01</span></li>
<li><a href="#">깨지는 영역에 똑같이 clear:both를 사용합니다.깨지는 영역에 똑같이 float:left를 사용합니다.</a><span class="time">2017-03-01</span></li>
<li><a href="#">독립된 박스 영역으로, 한 줄에 하나에 블록 요소만 표현 할 수 있다.</a><span class="time">2017-03-01</span></li>
</ul>
<a href="#" class="more" title="더보기"><span>더보기</span></a>
</div>
<!-- //notice5 -->
</div>
<!-- //column5 -->
<div class="box column6">
<h3 class="box_tit"><span class="box-icon ir">아이콘 이미지</span>Notice</h3>
<p class="box-desc">가장 기본적인 메인페이지 및 서브페이지 게시판 유형입니다.</p>
<!-- gallary -->
<div class="gallery slideshow">
<h4>Gallary</h4>
<div class="gallery-btn slideshow-nav">
<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 slideshow-slides">
<ul>
<li><a href="#" class="slide"><img src="img/gallery_img1.jpg" alt="이미지1" width="266" height="208" /></a></li>
<li><a href="#" class="slide"><img src="img/gallery_img2.jpg" alt="이미지2" width="266" height="208" /></a></li>
<li><a href="#" class="slide"><img src="img/gallery_img3.jpg" alt="이미지3" width="266" height="208" /></a></li>
<li><a href="#" class="slide"><img src="img/gallery_img4.jpg" alt="이미지4" width="266" height="208" /></a></li>
<li><a href="#" class="slide"><img src="img/gallery_img5.jpg" alt="이미지5" width="266" height="208" /></a></li>
</ul>
</div>
<div class="slideshow-indicator">
</div>
</div>
<!--// gallary -->
</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="#">hyeyeon89.dothome.co.kr</a>
<span>All Rights Reserved</span>
</address>
<p class="w3c">
<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>
</p>
<p class="w3c">
<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>
<!--//footer -->
</div>
</div>
<!-- script -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script type="text/javascript">
$(".btn").click(function(){
//alert("jquery");
//$("#cont-nav").css("display","none");
//$(".nav div ul li a").css("color","red");
//$(".title p").css("color","red");
//$("#cont-nav").addClass("on");
//$("#cont-nav").toggleClass("on");
//$("#cont-nav").fadeToggle();
$("#cont-nav").slideToggle();
$(".btn").toggleClass("on");
});
// banner_link3
$("#owl-demo").owlCarousel({
items : 3,
lazyLoad : true,
navigation : true,
responsive:false,
pagination:false,
navigationText:["",""],
autoPlay:1000,
stopOnHover:true
});
</script>
<script>
$(".slideshow").each(function(){
var $container=$(this), //슬라이드 전체 영역
$slideGroup = $container.find(".slideshow-slides"), //이미지 슬라이드 집합 영역
$slide=$slideGroup.find(".slide"), //이미지 슬라이드 영역
$nav=$container.find(".slideshow-nav"),
$indicator=$container.find(".slideshow-indicator"),
duration=400, //애니메이션 소요 시간
easing="easeInOutExpo", //애니메이션 이징 종류
interval=1500, //다음 슬라이드로 옮기는 시간
slideCount=$slide.length, //이미지 갯수
currentIndex=0, //현재 이미지 인덱스
indicatorHTML="",
timer;
$slide.each(function(i){
$(this).css({left:100*i+'%'});
indicatorHTML+='<a href="#">'+i+'</a>';
});
$indicator.html(indicatorHTML);
/*
<a href="#" style="left:0;"><img src="assets/img/image1.jpg"></a>
<a href="#"><img src="assets/img/image2.jpg"></a>
<a href="#"><img src="assets/img/image3.jpg"></a>
<a href="#"><img src="assets/img/image4.jpg"></a>
<a href="#"></a>*/
function goToSlide(index){
$slideGroup.animate({ left: -100 * index + '%' }, duration, easing);
currentIndex=index; //현재 이미지의 인덱스 변경
updateNav(); //현재 이미지 상태 및 표시를 업데이트
}
function updateNav(){
var $navPrev=$nav.find(".prev");
var $navNext=$nav.find(".next");
//만약 첫 번째 이미지 슬라이드면 이전 버튼을 숨김
if(currentIndex===0){
$navPrev.addClass("disabled");
} else {
$navPrev.removeClass("disabled")
}
//만약에 마지막번째 이미지 슬라이드라면 다음 버튼 숨김
if(currentIndex===slideCount-1){
$navNext.addClass("disabled");
}else {
$navNext.removeClass("disabled");
}
//현재 인디케이터 표시를 해제 및 활성화
$indicator.find("a").removeClass("active").eq(currentIndex).addClass("active")
}
$nav.on("click","a",function(event){
event.preventDefault();
if($(this).hasClass("prev")){
goToSlide(currentIndex -1);
}else{
goToSlide(currentIndex +1);
}
});
//인디케이터를 클릭했을 때 이미지 이동
$indicator.on("click","a",function(event){
event.preventDefault();
if(!$(this).hasClass("active")){
goToSlide($(this).index());
}
});
//타이머 정지
function stopTimer(){
clearInterval(timer);
}
//마우스 오버하면 정지 떠나면 실행
$container.on({mouseenter:stopTimer, mouseleave:startTimer});
//타이머 설정
function startTimer(){
timer=setInterval(function(){
var nextIndex=(currentIndex+1)%slideCount;
goToSlide(nextIndex);
}, interval);
}
startTimer();
//첫번째 이미지 슬라이드 표시
goToSlide(currentIndex);
});
</script>
</body>
</html>
css 소스
/* 전체 레이아웃 */
body {background:url(../img/body_bg.gif);}
#wrap{ }
#header {width:100%; 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;}
.ie7 #contents {padding-bottom:30px;}
#footer {background: #edf0f3; border-top:1px solid #ccc;}
/* container (가운데 영역) */
.container {position:relative; width:990px; margin:0 auto;}
/* skip */
#skip {position: relative;z-index:9999; }
#skip a {position: absolute;left: 0;top: 0; border:1px solid #0093bd; background-color: #fff; padding: 5px 7px; top: -50px;}
#skip a:focus, #skip a:active {top: 0;}
/* contents 레이아웃(전체 영역) */
#cont-nav {background:url(../img/cont_nav_bg.png) repeat-x center top; display:none;}
#cont-nav.on {display:block;}
#cont-tit { background-color:#fff;}
#cont-ban { background-color:#dceff7;}
#cont-cont {}
/* quick */
.quick {text-align:right; }
.quick a {color:white; padding-left:10px; padding-top:5px; display:inline-block;}
.quick a:hover {color:#ccc}
/* title */
.title h1 {position:absolute; left:390px; top:130px; z-index:20;}
.title h1 a {color:#fff; background-color:#4aa8d4; padding:7px 15px; font-size:16px; display:block;}
.title p {position:absolute; left:320px; top:90px; background-color:#2698cb; font-size:24px; color:#fff;
text-transform:uppercase; padding:5px 15px; z-index:10;}
/* icon */
.icon {position:absolute; left:340px; top:220px;}
.icon ul {overflow:hidden;}
.icon ul li {float:left; margin:0 3px;}
.icon ul li a {width:57px; height:57px; background-image:url(../img/icon.png); display:block;}
.icon ul li.icon_tit1 a {background-position:0 0;}
.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.last {width:20%;}
.nav div.last li {width:100%;}
.nav div h4 {font-size:18px; color:#25a2d0;}
.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;}
/*cont-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 no-repeat;}
/*.tit .btn a:hover {background-position: 0 -480px;}*/
.tit .btn.on a {background-position: 0 -480px;}
/* cont-ban */
.ban {padding: 30px 0 25px 0;}
.ban p a {position: absolute; top:60px; background:url(../img/arrow.gif) no-repeat; width: 23px; height: 43px;}
.ban p.ban-prev a {left:-60px;}
.ban p.ban-next a {right:-60px; background-position: 0 -43px;}
.ban p.ban-prev a:hover {background-position: -23px 0;}
.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 img {border-color: #98bcdc;}
/* cont-cont */
.cont {overflow: hidden; padding-top: 30px;}
.cont .box {position: relative; width: 289px; height: 364px; float: left; margin-right: 30px; margin-bottom: 30px; 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;}
/* con-tit*/
.cont .box .box-icon {position: absolute; left: 0; top: 5px; width: 57px; height: 57px; background:url(../img/icon.png) no-repeat; }
.cont .box .box_tit {font-size: 18px; color: #2c94c4; padding-left: 67px;}
.cont .box .box-desc {color:#878787; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; padding-left: 67px; margin-bottom: 15px;}
.cont .column1 .box-icon {background-position: 0 -600px; cursor: help;}
.cont .column2 .box-icon {background-position: 0 -720px; cursor: pointer;}
.cont .column3 .box-icon {background-position: 0 -840px; cursor: crosshair;}
.cont .column4 .box-icon {background-position: 0 -960px; cursor: no-drop;}
.cont .column5 .box-icon {background-position: 0 -1080px; cursor: progress;}
.cont .column6 .box-icon {background-position: 0 -1200px; cursor: wait;}
.cont .column1 .box-icon:hover {background-position: 0 -660px;}
.cont .column2 .box-icon:hover {background-position: 0 -780px;}
.cont .column3 .box-icon:hover {background-position: 0 -900px;}
.cont .column4 .box-icon:hover {background-position: 0 -1020px;}
.cont .column5 .box-icon:hover {background-position: 0 -1140px;}
.cont .column6 .box-icon:hover {background-position: 0 -1260px;}
/* notice */
.notice {position: relative; }
.notice h4 {font-size: 14px; color:#0093bd; font-weight:bold; margin-bottom: 3px;}
.notice ul {}
.notice ul li {overflow: hidden; text-overflow: ellipsis; white-space:nowrap; padding-left: 8px; background:url(../img/dot.gif) no-repeat 0 8px;}
.notice .more {position: absolute; top: 5px; right: 0; background: url(../img/more.png); width: 16px; height: 16px;}
/* notice2 */
.notice2 {position: relative;}
.notice2 h4 {font-size: 14px; color:#0093bd; font-weight:bold; margin-bottom: 3px;}
.notice2 ul {}
.notice2 ul li {overflow: hidden;}
.notice2 ul li a {float: left; width: 70%; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; padding-left: 8px; background:url(../img/dot.gif) no-repeat 0 8px;}
.notice2 ul li .time {float: right; width: 25%; }
.notice2 .more {position: absolute; top: 5px; right: 0; background: url(../img/more.png); width: 16px; height: 16px;}
/* notice3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color:#0093bd; font-weight:bold; margin-bottom: 3px;}
.notice3 ul li {height: 50px; position: relative; padding: 8px 0 0 60px;}
.notice3 ul li img {position: absolute; left: 0; top: 0; border:1px solid #390;}
.notice3 ul li strong {display:block;}
.notice3 ul li span {display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.notice3 .more {position: absolute; top: 5px; right: 0; background: url(../img/more.png); width: 16px; height: 16px;}
/* notice4-1 */
.notice4-1 {position: relative;}
.notice4-1 h4 {font-size: 14px; color:#0093bd; font-weight:bold; margin-bottom: 3px;}
.notice4-1 ul {overflow: hidden;}
.notice4-1 ul li {float: left; width: 33.333%; text-align: center;}
.notice4-1 ul li span {width: 90px; height: 90px; display: block; background: #000; position: relative; line-height:80px;color:#fff; margin:0 auto;}
.notice4-1 ul li span img {}
.notice4-1 ul li span em {visibility:hidden; position: absolute; left: 0; top: 0px; background: #000; width: 100%; height: 100%; filter: alpha(opacity=60); opacity:0.6;}
.notice4-1 ul li span:hover em {visibility:visible;}
.notice4-1 ul li strong {}
.notice4-1 .more {position: absolute; top: 5px; right: 0; background: url(../img/more.png); width: 16px; height: 16px;}
/* notice4-2 */
.notice4-2 {position: relative; margin-top:10px;}
.notice4-2 ul {overflow: hidden;}
.notice4-2 ul li {float: left; width: 33.333%; text-align: center;}
.notice4-2 ul li span {width: 90px; height: 90px; display: block; background: #000; position: relative; line-height:20px; color:#fff; margin:0 auto;}
.notice4-2 ul li span img {}
.notice4-2 ul li span em {visibility:hidden; position: absolute; left: 0; bottom:0; background: #000; width: 100%; filter:alpha(opacity=60); opacity:0.6;}
.notice4-2 ul li span:hover em {visibility:visible;}
.notice4-2 ul li strong {}
/* tab-mune */
.tab-menu {border:1px solid #ccc; padding: 8px; position: relative; height: 105px;}
.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 {padding: 5px 8px; display: block;}
.tab-menu ul li ul {position: absolute; left: 12px; top: 50px; border-bottom: 0;}
.tab-menu ul li ul li {border:0; float:none;}
.tab-menu ul li ul li a {padding: 0;}
.tab-menu ul li.active {background-color: #2c94c4;}
.tab-menu ul li.active a {color:#fff; background:url(../img/dot.gif) no-repeat 0 8px; padding-left: 5px;}
.tab-menu ul li.active ul li a {color:#333;}
/* notice5 */
.notice5 {position: relative; border:1px solid #ccc; margin-top: 15px;}
.notice5 h4 {border-bottom:1px solid #ccc; padding: 5px 8px;}
.notice5 h4 em {color:#df3292; font-style: normal;}
.notice5 ul {margin: 10px;}
.notice5 ul li {overflow: hidden; padding-left:8px; background:url(../img/dot.gif) no-repeat 0 8px;}
.notice5 ul li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space:nowrap;}
.notice5 ul li .time {float: right; width: 30%; text-align: right; }
.notice5 .more {position: absolute; top: 7px; right: 5px;}
/* gallery */
.gallery {border:1px solid #ccc; height: 264px; position: relative;}
.gallery h4 {font-size: 14px; color:#0093bd; font-weight: bold; border-bottom:1px solid #ccc; padding: 8px 0 6px 11px;}
.ie7 .gallery h4 {margin-bottom: 10px;}
.gallery .gallery-btn {position: absolute; top: 8px; right: 5px;}
.gallery .gallery-btn ul {overflow: hidden;}
.gallery .gallery-btn ul li{ float: left;}
.gallery .gallery-img {width: 266px; height: 208px; overflow: hidden; margin: 10px;}
/* ad */
.ad {position: relative;}
.ad h4 {font-size: 14px; color:#0093bd; font-weight:bold; margin-bottom: 3px;}
.ad ul {overflow: hidden;}
.ad ul li{float:left; width: 33.333%; text-align:center;}
.ad .more{position: absolute; top: 5px; right: 0; background: url(../img/more.png); width: 16px; height: 16px;}
/* login-wrap*/
#login-wrap {border:1px solid #c8c8c8; height: 116px; margin-bottom: 15px; position: relative;}
#login-header {width: 255px; 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: 66px; top: 0;}
#login-header .login-info .ip {position: absolute; left: 136px; 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; top: 38px; left: 15px;}
#login-contents dl 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; margin-right: 2px;}
#login-contents .submit {position: absolute; left: 0; top: 26px;}
#login-footer {position: absolute; left: 15px; top: 92px;}
#login-footer li {display: inline; background:url(../img/bar.gif) no-repeat 0 2px; padding: 0 3px 0 6px;}
#login-footer li:first-child {background:none; padding-left: 0;}
/* footer */
.footer {text-align:center; padding-top: 15px; overflow:hidden;}
.footer ul {margin:5px;}
.footer ul li {display: inline; background:url(../img/bar.gif) no-repeat 0 2px; padding: 0 5px 0 7px; }
#footer address {text-align:center; padding-top: 5px; margin-bottom: 15px;}
.footer li:first-child {background:none; padding-left: 0;}
.footer ul li a:hover {text-decoration: underline;}
#footer address a {color:#444; font-size: 9px; font-weight: bold;}
#footer address a:hover {color:#009bc8;}
#footer .w3c {margin-bottom: 15px; display:inline;}