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 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 href="https://fonts.googleapis.com/css?family=Amatic+SC|Indie+Flower" rel="stylesheet" />
</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://yuiop354.dothome.co.kr/">http://yuiop354.dothome.co.kr/</a></h1>
                    <p>Can See the Future, Only Dream</p>
                </div>
                <div class="icon">
                    <ul>
                        <li class="icon_tit1"><a href="#"><span class="ir">아이콘1</span></a></li>
                        <li class="icon_tit2"><a href="#"><span class="ir">아이콘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>
                            
                            <!-- 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>Graphic Design2</h4>
                                <ul>
                                    <li><a href="#">W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄</a><span class="time">2017-06-29</span></li>
                                    <li><a href="#">W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄</a><span class="time">2017-06-29</span></li>
                                    <li><a href="#">W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄</a><span class="time">2017-06-29</span></li>
                                    <li><a href="#">W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄</a><span class="time">2017-06-29</span></li>
                                    <li><a href="#">W3C는 1994년 10월 미국의 MIT 컴퓨터 과학 연구소, 정보수학유럽연구 컨소시엄</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> / <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="배너2" />
                                    </a>
                                </li>
                                <li>
                                    <a href="#">
                                        <img src="img/h_banner3.jpg" alt="배너3" />
                                    </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>
                           
                            <!-- notice5 -->
                            <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>                            
                            <!-- //notice5 -->                            
                            <!-- notice5-2 -->
                           <div class="notice-hover2">
                            <ul>
                                    <li>
                                        <a href="#">
                                            <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse Hover</em></span>
                                            <strong>이미지 제목</strong>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse Hover</em></span>
                                            <strong>이미지 제목</strong>
                                        </a>
                                    </li>
                                    <li>
                                        <a href="#">
                                            <span><img src="img/h_banner2.jpg" alt="배너2" /><em>Mouse Hover</em></span>
                                            <strong>이미지 제목</strong>
                                        </a>
                                    </li>                                    
                                </ul>
                              </div> 
                            <!-- //notice5-2-->
                            
                        </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="#">동물들도 증명사진 찍는거 아시나요</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"><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>
                <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://yuiop354.dothome.co.kr">http://yuiop354.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>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>

				
/* 여백 초기화 */
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", helvtica, 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;}
					
/* layout(전체영역) */
body {background: #f1f4fb url(../img/header_bg.gif);}
#warp {}
#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 */
.container {position: relative; width: 990px; height: inherit; margin:0 auto; /*background-color: rgba(0,0,0,0.2);*/ }

/* 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 { }

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

/* title */
.title h1 {position: absolute; left: 390px; top: 145px; 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: 330px; top: 100px; background-color: #2698cb; font-size: 24px; color: #fff; 
 text-transform: uppercase; padding: 5px 15px; z-index: 10; font-family: 'Indie Flower', cursive;}

/* icon */
.icon {position: absolute; left: 380px; top: 220px; }
.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: #25a2de; font-weight: 400; }
.nav div ul {overflow: hidden; }
.nav div ul li {width:50%; float:left; }
.nav div ul li a {color: #333; padding: 3px; }
.nav div ul li a:hover {background-color: #1a96d0; color:#fff; }
.nav div.last {width: 20%; }
.nav div.last ul li {width: 100%; }

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

/* ban */
.ban {padding:30px 0 25px 0; }
.ban p {position: absolute; top: 70px;}
.ban p a {width: 23px; height: 43px; display:block; background-image: url(../img/arrow.gif); }
.ban p.ban-prev {left: -30px; }
.ban p.ban-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 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: url(../img/icon.png); position: absolute; left: 0; top: 0;}
.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.column6 .ico-img:hover {background-position: 0 -1260px; }
.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; }

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

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

/* notice-hover */
.notice-hover {position: relative; }
.notice-hover h4 {font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;  }
.notice-hover ul {overflow: hidden; }
.notice-hover li {float: left; width: 33.3333%; text-align: center; }
.notice-hover li img {width: 90px; height: 90px; }
.notice-hover li span {position: relative; width: 90px; height: 90px; 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; opacity: 0.6;}
.notice-hover li span:hover em{visibility: visible; }
.notice-hover li strong {display: block; padding-top: 3px; }
.notice-hover .more {position: absolute; right: 5px; top: 5px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display: block;  }

/* notice-hover2 */
.notice-hover2 {margin-top: 20px; }
.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; }
.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.3333%; text-align: center; }
.ad li a img {width: 90px; height: 90px; }
.ad .more {position: absolute; right: 5px; top: 0px; background: url(../img/more.png) no-repeat; width: 16px; height: 16px; display: block; }

/* tab_menu */
.tab_menu {position: relative; border: 1px solid #ccc; height: 105px; padding: 8px; }
.tab_menu ul {overflow: hidden; border-bottom: 1px solid #ccc; }
.tab_menu ul li {float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px; }
.tab_menu ul li a {display: block; padding: 5px 10px; }
.tab_menu ul li ul {border-bottom: 0; position: absolute; left: 10px; top: 50px;}
.tab_menu ul li ul li {border: 0; 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: #0096bd; font-weight: bold; border-bottom: 1px solid #ccc; padding: 8px 0 6px 11px;  margin-bottom: 8px; }
.gallery ul { }
.gallery li {}
.gallery .gallery_btn {position: absolute; right: 9px; top: 10px; }
.gallery .gallery_btn ul {overflow: hidden; }
.gallery .gallery_btn li {float: left; width:25%; text-align: center; }
.gallery .gallery_img {width: 266px; height: 208px; overflow: hidden; margin: 10px; }

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

#login-contents {position: absolute; left: 15px; top: 40px; }
#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: 26px;}

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


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

				

웹 표준

웹 표준은 월드 와이드 웹의 측면을 서술하고 정의하는 공식 표준이나 다른 기술 규격을 가리키는 일반적인 용어이다. 최근에 이 용어는 웹 사이트를 작성하는 데 중요도가 높아지고 있으며 웹 디자인, 개발과 관계가 있다.

수많은 상호 의존성이 있는 표준들과 규격들 가운데 일부는 단지 월드 와이드 웹으로만 끝나는 것이 아니라, 인터넷의 관리 측면이기도 하며 이러한 표준들은 직간접적으로 웹 사이트, 웹 서비스 개발과 관리에 영향을 주고 있다. 이러한 것들 모두 "웹 표준"이라고 부르지만 웹 표준으로 이동하는 것을 찬성하는 사람들은 사용성과 접근성에 직접 영향을 미치는 더 높은 수준의 표준에 초점을 두는 경향이 있다. 더 넓은 뜻의 웹 표준은 다음을 이룬다

  • 웹의 힘은 그 보편성에 있다. 장애에 구애 없이 모든 사람이 접근 할 수 있는 것이 필수적인 요소이다.
  • 웹 표준은 장애를 가진 사람들도 웹을 이용할 수 있도록 보장하는 것으로, 장애를 가진 사람들이 웹 콘텐츠를 인지하고, 운용하고, 이해하고, 기술에 상관없이 이용할 수 있도록 견고한 웹 콘텐츠를 만드는 것이다. (WAI)

W3C(World Wide Web Consortium)

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


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

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


프로토 타입

Reference