Notice
Recent Posts
Recent Comments
Link
«   2024/04   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30
Tags more
Archives
Today
Total
관리 메뉴

moozi

5/21 layout04.html 본문

TIS_2016/주말반_2기

5/21 layout04.html

moozi 2016. 5. 21. 11:26

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>레이아웃 연습- 시맨틱태그 사용</title>
    <!-- font awesome icon사용 ------------------------------->
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);
        @font-face{
            font-family:seoulnamsan;
            src:url('SeoulNamsanEB.ttf');
        }
        @font-face{
            font-family:jua;
            src:url('BMJUA_ttf.ttf');
        }
        *{ padding: 0; margin: 0;}
        li{ list-style: none;}
        header{
            width:960px;
            height:160px;
            margin:0 auto;
            position:relative;
            background-color: #86B6F3;
        }
        header>#title{
            font-family: 'Nanum Gothic';
            position:absolute;
            left:20px;
            right:30px;           
        }
        header>#main_gnb{
            font-family: jua;
            position:absolute;
            right:0;
            top:0;  
        }
        #main_gnb>ul>li{
            float: left;
        }
        #main_gnb>ul>li>a{
            border:1px solid black;
            padding:2px 10px;
            text-decoration: none;
            color:darkcyan;
        }
        #main_gnb>ul>li>a:hover{
            color:aqua;
        }
        #main_gnb>ul>li:first-child>a{
            border-radius: 10px 0 0 10px;
        }
        #main_gnb>ul>li:last-child>a{
            border-radius: 0 10px 10px 0;
        }
       
        header>#main_lnb{
            font-family: jua;
            position:absolute;
            right:0;
            bottom:10px;
           
        }
        #main_lnb>ul>li>a{
            border:1px solid black;
            padding:2px 10px;
            text-decoration: none;
            color: darkcyan;
        }
        #main_lnb>ul>li>a:hover{
            color: aqua;
        }
        #main_lnb>ul>li{
            float: left;
        }
        #main_lnb>ul>li:first-child>a{
            border-radius: 10px 0 0 10px;
        }
        #main_lnb>ul>li:last-child>a{
            border-radius: 0 10px 10px 0;
        }
        #content{
            width:960px;
            margin:0 auto;/* 가운데 정렬 */
            overflow: hidden; /* 박스를 넘어가는 글자는 안보이게 */
        }
        #main_section{
            width:750px;
            float:left;           
        }
        #main_aside{
            width:200px;
            float:left;
        }
        .main_article{
            border:1px solid black;
            margin-bottom: 5px;
            padding-left: 10px;
        }
        input:nth-of-type(1){ display: none;}
        input:nth-of-type(2){ display: none;}
        input:nth-of-type(1)~div:nth-of-type(1){display:none;}
        input:nth-of-type(2)~div:nth-of-type(2){display:none;}
        input:nth-of-type(1):checked~div:nth-of-type(1){
            display:block;
        }
        input:nth-of-type(2):checked~div:nth-of-type(2){
            display:block;
        }
        .thumbnail{
            float: left;
        }
        .description{
            float:left;
        }
        .item{
            padding:5px;
            border:1px solid black;
            float:left;
            width:190px;
           
        }
       
        section.buttons>label{
            background: black;
            color:white;
            border:1px solid black;
            width:100px;
            height:30px;
            display:block;
            float:left;
            box-sizing:border-box;
        }
        input:nth-of-type(1):checked~section.buttons>label:nth-of-type(1){
            background: white;
            color:black;
        }
        input:nth-of-type(2):checked~section.buttons>label:nth-of-type(2){
            background: white;
            color:black;
        }
        footer{
            border:1px solid black;
            width:960px;
            text-align: center;
            margin:0 auto;
            clear:both; /* float 해제 */
        }
        .thumbnail>img{
            width:25px;
            height:25px;
        }
    </style>
</head>
<body>
   <header>
     <div id="title">
         <h1>TIS정보기술교육센터</h1>
     </div>
      <!-- global 메뉴 ------------------>
       <nav id="main_gnb">
           <ul>
               <li>
                  <a href="#">
                   <i class="fa fa-bell" aria-hidden="true"></i>교육센터소개</a>
               </li>
               <li><a href="#">교육센터연혁</a></li>
               <li><a href="#">교육센터비전</a></li>
               <li><a href="#">개설과정</a></li>
           </ul>
       </nav>
       <!-- local 메뉴 ------------------>
       <nav id="main_lnb">
           <ul>
               <li><a href="#">대표인사말</a></li>
               <li><a href="#">강사소개</a></li>
               <li><a href="#">오시는길</a></li>
           </ul>
       </nav>
   </header>
   <!-- 본문 영역 ------------------------------------------------->
   <div id="content">
        <section id="main_section">
            <article class="main_article">
                <h2>TIS정보기술교육센터</h2>
                <p>TIS정보기술교육센터는 정부지원IT전문교육 과정을 운영하고 있습니다.</p>
            </article>
            <article class="main_article">
                <img src="img/title.png">
            </article>
            <article>

            </article>
       </section>
       <aside id="main_aside">
           <input id="first" type="radio" name="tab" checked="checked">
           <input id="second" type="radio" name="tab">
           <section class="buttons">
               <label for="first">재직자과정</label>
               <label for="second">구직자과정</label>
           </section>
           <div class="tab_item">
               <ul>
                   <li class="item">
                       <div class="thumbnail">
                           <img src="img/icon01.png">
                       </div>
                       <div class="description">
                           웹퍼블리셔과정
                       </div>
                    </li>
                   <li class="item">
                       <div class="thumbnail">
                           <img src="img/icon02.png">
                       </div>
                       <div class="description">
                           프론트엔드개발자과정
                       </div>
                    </li>
                   <li class="item">
                       <div class="thumbnail">
                           <img src="img/icon03.png">
                       </div>
                       <div class="description">
                           리눅스서버과정
                       </div>
                    </li>
               </ul>
           </div>
           <div class="tab_item">
               <ul>
                   <li>웹표준과정</li>
                   <li>안드로이드과정</li>
                   <li>자바과정</li>
               </ul>
           </div>
       </aside>
      
   </div>
   <!-- 본문 영역.끝. --------------------------------------------->
   <footer>
       Copyright&copy; all rights reserved by TIS정보기술교육센터
   </footer>
   
</body>
</html>

'TIS_2016 > 주말반_2기' 카테고리의 다른 글

6/4 영화소개 페이지 예제  (0) 2016.06.04
6/4 실습예제 index.html  (0) 2016.06.04
5/7 수업 백업  (0) 2016.05.07
배경이미지 2개를 활용한 레이아웃  (0) 2016.05.07
4/30일 수업내용  (0) 2016.04.30
'TIS_2016/주말반_2기' Related Articles more
Comments