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

7/2 레이아웃2 본문

TIS_2016/주말반_3기

7/2 레이아웃2

moozi 2016. 7. 2. 14:07

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

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

    <script src="js/prefixfree.min.js"></script>

    <style>

      *{margin:0;padding:0}

        

        body{

            

        }

        nav{

            float:right;

        }

        nav>ul>li{

            list-style: none;float:left;

            padding: 5px;

        }

        header{

            background-color: #010101;

            height:100px;  

            color:ghostwhite;

        }

        article{   

            border:1px solid black;

            background-image: url('img/bg.jpg');

        }

        footer{

            background-color: gray;

            height:50px;

        }

        #section1, #section2{

            border:1px solid white;

            width:350px;

            height:200px;

            padding:30px;

            margin:30px;

            float:left;

        }

        #section3{

            clear:both; /* float속성(left,right) 해제 */

            border:1px solid white;

            width:350px;

            height:200px;

            padding:30px;

            margin:30px;

        }

    </style>

</head>

<body>

    <header>

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

    </header>

    <nav>

        <ul>

            <li>교육센터소개</li>

            <li>교육센터연혁</li>

            <li>교육센터비전</li>

            <li>CONTACT</li>

        </ul>

    </nav>

    <div style="clear:both"></div>

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

    <article>

        <h3>TIS정보기술교육센터에 오신 것을 환영합니다.</h3>

        

        <section id="section1">

            <h4>재직자과정</h4>

            <ul>

                <li>웹퍼블리셔 과정</li>

                <li>프론트엔드개발자 과정</li>

                <li>리눅스서버관리자 과정</li>

            </ul>

        </section>

        

        <section id="section2">

            <h4>취업자과정</h4>

            <ul>

                <li>웹표준 과정</li>

                <li>자바개발자 과정</li>

                <li>네트워크관리자 과정</li>

            </ul>

        </section>

        

        <section id="section3">

            <h4>개강일정</h4>

            <ul>

                <li>웹표준 과정</li>

                <li>자바개발자 과정</li>

                <li>네트워크관리자 과정</li>

            </ul>

        </section>

    </article>

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

    

    

    <footer>

        <h5>&copy;TIS Edu All rights reserved.</h5>

    </footer>

</body>

</html>

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

웹폰트  (0) 2016.07.09
7/2 수업자료 전체백업  (0) 2016.07.02
모바일 레이아웃 이미지  (0) 2016.07.02
7/2 레이아웃3  (0) 2016.07.02
6/25 수업자료  (0) 2016.06.25
'TIS_2016/주말반_3기' Related Articles more
Comments