관리 메뉴

moozi

7/2 레이아웃3 본문

TIS_2016/주말반_3기

7/2 레이아웃3

moozi 2016. 7. 2. 14:38

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

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

    <style>

        *{margin:0;padding:0;}

        

        header{

            background-color: dodgerblue;

            color:white;

            height: 100px;

        }

        nav>ul>li{ 

            list-style: none;

            float:left;

            padding:10px;        

        }

        section{

            width:80%;

            float:left;

        }

        aside{

            float:left;

            width:17%;

            background-color: deepskyblue;

        }

        #section1, #section2{

            border:1px solid black;

            width:350px;

            height:200px;

            padding:30px;

            margin:30px;

            float:left;

        }

        #section3{

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

            border:1px solid black;

            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>

    <section>

        <div id="section1">

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

            <ul>

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

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

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

            </ul>

        </div>

        

        <div id="section2">

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

            <ul>

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

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

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

            </ul>

        </div>

        

        <div id="section3">

            <h4>개강일정</h4>

            <ul>

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

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

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

            </ul>

        </div>

    </section>

    <aside>

        <ul>

            <li>Board</li>

            <li>E-mail</li>

            <li>map</li>

        </ul>

    </aside>

    <footer>

        

    </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
7/2 레이아웃2  (0) 2016.07.02
6/25 수업자료  (0) 2016.06.25
0 Comments
댓글쓰기 폼