본문 바로가기
Html&CSS/html4,5 예제

0311_html5/css3_ex.main-2_html작성-1

by .Epona. 2020. 7. 4.

position:absolute 해서 위로 올린것이돠

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>0305_css3_예제_main</title>
    <meta name="robots" content="noindex, nofollow" />
    <meta name="keywords" content="-" />
    <meta name="description" content="-" />
    <meta name="author" content="-" />

    <style>
        /* #1. reset*/

    </style>
</head>


<body>
<!-- #퀵 메뉴 #            -->
 <div id="skipMenu">
     <a href="#container">본문바로가기</a>
     <a href="#gnb">주메뉴바로가기</a> 
 </div>

<!-- # 헤더 #             -->
    
    <!--#1 -->
 <div id="wrapper">
        <header id="header_group"> <!-- w 100%-->
            
            <div class="header_wrap"> <!-- w1240 -->
            
              <div class="info_header">
                <h1 class="h1_logo">KIOST</h1>
                <div class="menu_tab">
                    <ul>
                        <!--하단 라인 보여지면서 시작해야 됭게 클래스 두개 쓴거임-->
                        <li><a href="#" class="mtbm mtbm_on">KIOST<span>ABOUT</span></a></li>
                        <li><a href="#" class="mtbm">연구<span>RESEARCH</span></a></li>
                        <li><a href="#" class="mtbm">교육<span>EDUCATION</span></a></li>       
                    </ul>  
                </div>      
                  
                  <!-- # 검색 form 요소 -->
                  <div class="site_search">
                      <form method="post" action="#" 
                            name="searchFrm" class="search">
                          <input type="text" class="input_val"
                                 name="inval" plaseholder="검색어를 입력하세요"
                                 title="검색어 입력" />
                      <button class="search_btn">검색</button>
                      </form>
                  </div>
                  
              </div>
            </div>
<!--#2 주메뉴-->            
            <div id="header_navi">
                <div class="nav_wrapper">
                    <!--좌측 -->
                    <span class="hm_wrap">
                        <a href="#" class="hm_home">HOME</a>
                        <a href="#" class="hm_ENG">ENGLISH</a>
                    </span>
                    <!-- 주메뉴 -->
                    <nav id="gnb" class="deth_1">
                        <a href="#">정보공개</a>
                        <a href="#">소식</a>
                        <a href="#">참여</a>
                        <a href="#">소개</a>
                    </nav>
                    <!--우측 햄버거버튼 영역-->
                    <div class="hm_line_wrap">
                        <a href="#" class="hm_link">
                            <span>연구사업 linksite</span>
                        </a>
                        <a href="#" class="hm_sitemap">
                            <span class="skip">사이트맵 바로가기</span>
                            <span class="finger">
                                <span class="bar1">1</span>
                                <span class="bar1">2</span>
                                <span class="bar1">3</span>
                            </span>                        
                        </a>
                    </div>                                                    
                </div>            
            </div>
            
<!--#3 서브메뉴-->               
            <nav id="submenu" class="clearfix">
                <div id="animate">
                    
                    <!--#3-1: 좌측 -->
                    <div class="title">
                        <h2 class="ti">NEWS &amp; ISSUE</h2>
                        <p class="text">해양과학 기술의 글로벌 리더 KIOST 기관 소개 및 뉴스 &amp;이슈를 안내해 드립니다</p>
                        <p class="btn_text"><a href="#">메인바로가기</a></p>
                        
                    </div>
                    <!--#3-2: 가운데 메뉴-->
                    <ul id="tm" class="clearfix">
                        <!--/1 1차메뉴 -->
                        <li class="th1">
                            <a href="#" class="link_1th">정보공개</a>
                            <!--/1 2차메뉴 -->
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                        </li>
                        
                        <!--/1 1차메뉴 -->
                        <li class="th1">
                            <a href="#" class="link_1th">소식</a>
                            <!--/1 2차메뉴 -->
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                        </li>
                        
                        
                        <!--/1 1차메뉴 -->
                        <li class="th1">
                            <a href="#" class="link_1th">참여</a>
                            <!--/1 2차메뉴 -->
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>                        
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                        </li>
                        
                        <!--/1 1차메뉴 -->
                        <li class="th1">
                            <a href="#" class="link_1th">소개</a>
                            <!--/1 2차메뉴 -->
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>                        
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                            <ul class="th2">
                                <a href="#"> 정보공개제도안내</a>
                            </ul>  
                        </li>
                        
                    </ul>
                    <!--#3-2: 우측 링크-->
                    <div class="gnb_link">
                        <a href="#">
                            <span class="icon_gnb gnb1">오시는길</span>
                            <span class="icon_gnb gnb1">사이버 투어</span>
                            <span class="icon_gnb gnb1">온라인사보</span>
                        </a>  
                    </div>
                </div>
            </nav>
            
            
            
            
            
        </header>
    
<!-- # 콘텐츠 #             -->
    <div id="container">
        <!--영상 & 영상위에 올라갈 것들이 들어감-->
        <section class="mvisual">
            <div class="bg_area">
                <!--영상들어감-->
                <div class="fullbox">
                
                </div>
                <!--배경 넣을 것-->
                <div class="pattern_bg"></div>
            </div>
        </section>
        
        <!--가운데 띄어져 있는 popup-->
        <section class="popup_zone"></section>
        
        <!--뉴스 부터 마지막 콘텐츠까지 영역-->
        <div class="mbgwrap clearfix">
            <section class="section_box_1 clearfix">
            </section>        
            
            <section class="section_box_2 clearfix">
            </section>
            
            <section class="section_box_3 clearfix">
            </section>
            <!--하단 배너 -->
            <aside class="banner clearfix"></aside>
        </div>
        
        <!--하단 컨텐츠-->
        <div class="mnewsletterwrap clearfix">
            <div class="mnewsletter">
                <!--왼쪽-->
                <section class="today_wrap"></section>
                <!--오른쪽-->
                <article class="newsletter clearfix"></article>
            </div>
        </div>
    </div>
     
<!-- # footer #             -->     
    <footer id="footer_group">
        
    </footer>    
 
        
 </div>
    
    
    

</body>

</html>