Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

moozi

5/20 레이아웃연습 본문

TIS_2016/HTML5_2기

5/20 레이아웃연습

moozi 2016. 5. 20. 11:37

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>레이아웃연습</title>

    

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

         

        *{ margin:0; padding:0;}

        li{ list-style: none;}

        img{ border:0;}

        a:link{color:darkblue; text-decoration: none;}

        a:visited{color:darkblue; }

        a:active{color:red; }

        a:hover{color:dodgerblue;}

        #main_header{

            width:960px;

            height: 160px;

            margin:0 auto;/* 가운데 정렬 */

            position: relative; /* 상대좌표 */

            background-color: aqua;

        }

        #title{

            position: absolute;

            left:20px, top:30px;

        }

        #main_gnb{

            position: absolute;

            right:0;

            top:0;

        }

        #main_lnb{

            position: absolute;

            right:0;

            bottom:10px;

        }

        @font-face {

             font-family: seoulNamsan;

             src: url(SeoulNamsanEB.ttf);

        }

        h1{

            font-family: 'Nanum Gothic';

        }

        @font-face{

            font-family: jua;

            src: url(BMJUA_ttf.ttf);

        }

        li{

            font-family:jua;

        }

        #main_gnb>ul>li{ float: left; overflow:hidden;}

        #main_lnb>ul>li{ float: left; overflow:hidden;}

        #main_gnb>ul>li>a{ 

            border:1px solid black;

            padding: 10px 20px;

            display: block;

        }

        #main_lnb>ul>li>a{

            border:1px solid black;

            padding: 10px 20px;

            display: block;

        }

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

        #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; /* 중앙정렬 */

        }

        #main_section{ width:750px; float:left;}

        #main_aside{ width:200px;float:left;}

        .main_article{ 

            border:1px solid black;

            padding-left: 20px;  

            padding-top: 20px;

        }

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

        

        section.buttons{

            overflow: hidden; /* 벗어나는 글자는 안보이게 */

        }

        section.buttons>label{

            width: 100px;

            height: 30px;

            

            border: 1px solid black;

            

            background-color: black;

            color:white;

            

        }

        input:nth-of-type(1):checked~section.buttons>label:nth-of-type(1){

            background-color: white;

            color:black;

        }

        input:nth-of-type(2):checked~section.buttons>label:nth-of-type(2){

            background-color: white;

            color:black;

        }

    </style>

</head>

<body>

    <header id="main_header">

       <div id="title">

           <h1>TIS정보기술교육센터</h1>

       </div>

        <nav id="main_gnb">

            <ul>

                <li><a href="#"><i class="fa fa-envelope"></i>contact</a></li>

                <li><a href="#">Q/A</a></li>

                <li><a href="#">sns</a></li>

            </ul>

        </nav>

        <nav id="main_lnb">

            <ul>

                <li><a href="#">교육센터소개</a></li>

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

               <h1>TIS정보기술교육센터</h1>

                <p>TIS정보기술교육센터에서는 정부지원IT전문과정을 운영하고 있습니다. </p>

                <img src="img/img01.png">

            </article>

            

            <article class="main_article">

                <img src="img/img02.png">

            </article>

        </section>

        <!-- 왼쪽 컨텐츠 영역.끝.----------------->

        

        <!-- 오른쪽 컨텐츠 영역 ------------------->

        <aside id="main_aside">

           <!-- label과 radio버튼이 서로 연결됨.

                   label클릭시 radio버튼 checke됨 ----------->

           

            <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><a href="#">웹표준과정</a></li>

                    <li><a href="#">안드로이드과정</a></li>

                    <li><a href="#">자바과정</a></li>

                    <li><a href="#">네트워크과정</a></li>

                </ul>

            </div> 

            <div class="tab_item">

                <ul>

                    <li><a href="#">웹퍼블리셔과정</a></li>

                    <li><a href="#">프론트엔드개발자과정</a></li>

                    <li><a href="#">리눅스서버과정</a></li>

                </ul>

            </div>

        </aside>

        <!-- 오른쪽 컨텐츠 영역.끝 ----------------->

    </div>

    <!-- 본문 영역.끝.------------------------------------->

    

    

    

    

    

    

</body>

</html>

'TIS_2016 > HTML5_2기' 카테고리의 다른 글

5/23 레이아웃에 서브메뉴 적용하기  (0) 2016.05.23
5/21 수업시간 작성 코드  (0) 2016.05.21
5/19 수업 예제  (0) 2016.05.19
font-awesom CDN  (0) 2016.05.19
background image 활용 레이아웃  (0) 2016.05.19
'TIS_2016/HTML5_2기' Related Articles more
Comments