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="webstoryboy" />

    <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=Nothing+You+Could+Do" rel="stylesheet" />

</head>



<body>

    <div id="wrap">



        <div id="header">

            <div class="container">

                <div class="quick">

                    <a href="#">Designer Cafe 디자이너 카페</a>

                    <a href="#">Publisher Cafe 퍼블리셔 카페</a>

                </div>

                <div class="title">

                    <h1><a href="http://seola94.dothome.co.kr">seola94.dothome.co.kr</a></h1>

                    <p>romantic universe</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="#">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 column1">

                            <h3><span class="ico-img ir">아이콘 이미지</span>

                                <span class="ico-tit">Notice</span>

                            </h3>

                            <p class="ico-desc">가장 기본이 되는 메인 페이지의 게시판 유형입니다.</p>



                            <!-- notice1 -->

                            <div class="notice">

                                <h4>Graphic Design</h4>

                                <ul>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a></li>

                                </ul>

                                <a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>

                            </div>

                            <!-- //notice1 -->



                            <!-- notice2 -->

                            <div class="notice2 mt20">

                                <h4>Graphic Design</h4>

                                <ul>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a><span class="time">2017-06-29</span></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a><span class="time">2017-06-29</span></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a><span class="time">2017-06-29</span></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</a><span class="time">2017-06-29</span></li>

                                    <li><a href="#">프로젝트의 최종 목표(Goal) 및 성격을 정하고 문제, 목표, 방향을 규명하기 위해 간략하게 정리한 문서를 말한다.</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>



                            <!-- notice 3 -->

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

                            <!-- //notice 3 -->



                        </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="submit" />

                                                </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>

                        <!-- //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="배너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>

                        <!-- //column4 -->

                        <div class="box column5">

                            <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="#">첫번째 탭의 공지사항1입니다. 첫번째 탭의 공지사항1입니다.</a><span class="time">2017-06-30</span></li>

                                        <li><a href="#">첫번째 탭의 공지사항1입니다. 첫번째 탭의 공지사항1입니다.</a><span class="time">2017-06-30</span></li>

                                        <li><a href="#">첫번째 탭의 공지사항1입니다. 첫번째 탭의 공지사항1입니다.</a><span class="time">2017-06-30</span></li>

                                    </ul>

                                <a href="#" title="더보기" class="more"><span>더보기</span></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>

                            

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

                        <!-- //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://seola94.dothome.co.kr">seola94.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);

}



#wrap {}



#header {

    height: 327px;

    background: url(../img/header_bg.jpg) repeat-x center top;

    /*background-image: url(../img/header_bg.jpg);

    background-repeat: repeat-x;

    background-position: center top;*/

}



#footer {

    border-top: 1px solid #ccc;

    background-color: #edf0f5;

    margin-top: 30px;

}



/* container(가운데 영역) */



.container {

    position: relative;

    width: 990px;

    height: inherit;

    /*  background-color: rgba(0,0,0,0.2); */

    margin: 0 auto;

}



/* Contents layout(전체영역) */



#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 {}





/* quick */

/* div.quick {text-align:right;}

.container div.quick {text-align: right;}

div.container div.quick{text-align: right;}

#header div.container div.quick{text-align: right;}

div#header div.container div.quick{text-align: right;}

#wrap div#header div.container div.quick{text-align: right;}

div#wrap div#header div.container div.quick {text-align: right;}*/



.quick {

    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: 395px;

    top: 180px;

    z-index: 100;

}



.title h1 a {

    background-color: #4aa8d4;

    font-size: 16px;

    color: #fff;

    padding: 7px 15px;

    text-transform: capitalize;

    display: block;

}



.title p {

    position: absolute;

    left: 360px;

    top: 130px;

    background-color: #2698cb;

    font-size: 24px;

    color: #fff;

    text-transform: uppercase;

    padding: 5px 15px;

    z-index: 10;

    font-family: 'Nothing You Could Do', cursive;

}





/* icon */



.icon {

    position: absolute;

    top: 230px;

    left: 370px;

}



.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;

}



.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;

}



.tit .btn a:hover {

    background: url(../img/icon.png) 0 -480px;

}





/* 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-prev a {

    background-position: -0 0;

}



.ban p.ban-prev a:hover {

    background-position: -23px 0;

}



.ban p.ban-next {

    right: -30px;

}



.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 img {

    border-color: #98bcdc;

}



/* cont */

.cont {

    overflow: hidden;

    padding-top: 30px;

}



.cont .box {

    width: 289px;

    height: 364px;

    overflow: hidden;

    float: left;

    margin: 0 30px 30px 0;

    padding-right: 30px;

    position: relative;

}



.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 {

    background-image: url(../img/icon.png);

    width: 57px;

    height: 57px;

    display: block;

    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;

    color: #878787;

    border-bottom: 1px solid #d0d0d0;

    margin-bottom: 15px;

}



.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 -1260px;

}





/* 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;

    top: 0;

    right: 0;

    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 li {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    background: url(../img/dot.gif) no-repeat 0 8px;

    padding-left: 8px;

}



.notice2 li a {

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    width: 65%;

    float: left;

}



.notice2 li .time {

    width: 30%;

    float: right;

    text-align: right;

}



.notice2 .more {

    position: absolute;

    top: 0;

    right: 0;

    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 ul {}



.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;

    top: 0;

    right: 0;

    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 {

    display: block;

    padding-top: 3px;

}

.notice-hover .more {

    position: absolute;

    top: 0;

    right: 0;

    background: url(../img/more.png) no-repeat;

    width: 16px;

    height: 16px;

    display: block;

}

.notice-hover2 {

    margin-top: 15px;

}





.notice-hover2 ul {

    overflow: hidden;

}

.notice-hover2 li {

    float: left;

    width: 33.3333%;

    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;

    left: 0;

    bottom: 0;

    background-color: #000;

    width: 100%;

    color: #fff;

    opacity: 0.6;

    filter:alpha(opacity=60);

}

.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 li{

    float: left;

    width: 33.3333%;

    text-align: center;

}



.ad li img {

    width: 90px;

    height: 90px;

}

.ad .more {

    position: absolute;

    top: 0;

    right: 0;

    background: url(../img/more.png) no-repeat;

    width: 16px;

    height: 16px;

    display: block;

}



/* tab_menu */

.tab_menu{

    position: relative;

    border:1px solid #ccc;

    padding: 8px;

    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{

    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: #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;

    top: 8px;

    right: 9px;   

}

.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-block;

    padding: 0 10px;

    background: url(../img/bar.gif) no-repeat 0 5px;

}

.footer li:first-child{

    background: none;



}

.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 .submit {

    position: absolute;

    left: 0;

    top: 26px;

}

#login-footer {

    position: absolute;

    left: 15px;

    top: 92px;

}



#login-footer li {

    display: inline;

    padding: 0 6px 0 5px;

    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", "돋움", "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;}			

웹 표준

월드 와이드 웹(WWW)을 구현하기 위해 따라야 할 표준 또는 규격. 다양한 웹 기술을 통해 수많은 콘텐츠가 공유되고 확산되면서, 웹 접근성, 사생활 보호, 보안, 국제화 등을 고려한 웹 기술의 표준화가 필요하게 되었다. 국제 표준화 기구로 월드 와이드 웹 컨소시엄(W3C)이 있으며, 대표적 웹 표준으로 하이퍼텍스트 생성 언어(HTML), 확장성 하이퍼텍스트 생성 언어(XHTML), 종속형 시트(CSS: Cascading Style Sheets), 자바스크립트(JavaScript), 웹 사용에 대한 웹 콘텐츠 접근성 지침 등이 있다.

  • 모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준안입니다.
  • 웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어입니다. (위키백과)
  • 웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근 할 수 있는 것이 필수적인 요소이다. (웹 창시자)
  • 웹 표준은 장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 운용하고, 이해하고, 기술에 상관없이 이용할 수 있도록 견고한 웹 콘텐츠를 만드는 것이다. (WAI)

W3C(World Wide Web Consortium)

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

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

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

Reference

프로토 타입