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

7/18 layout03.html 본문

TIS_2016/HTML5_3기

7/18 layout03.html

moozi 2016. 7. 18. 15:20

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>layout연습</title>
    <style>
        *{margin:0;padding:0;}
        body{
            background-color: #4C320D;
        }
        #wrap{
            width:800px;
            margin: 20px auto; /* 가운데 정렬 */
        }
        #top{
            background-image: url(img/top.jpg);
            height: 10px;
        }
        #header{
            background-image: url(img/header.jpg);
            height: 100px;
            padding-left:30px;
            padding-top:10px;
        }
        #menu{
            background-image: url(img/menu.jpg);
            height: 30px;
        }
        #content{
            background-image: url(img/content.jpg);
            height: 500px;
        }
        #bottom{
            background-image: url(img/bottom.jpg);
            height: 20px;
        }
        #menu>ul>li{
            list-style: none; /* 기호 없애기 */
            float:left; /* 옆으로 나열 */
            padding-left:15px;
        }
        #left{
            padding:15px;
            width:620px;
            float:left;
        }
        #footer{
            color:white;
            text-align: center;
            clear: both;
        }
        a:link{color:white;text-decoration: none;}
        a:visited{color:white;}
        a:hover{color:chartreuse;}
    </style>
</head>
<body>
   <div id="wrap">
        <div id="top"></div>
        <div id="header">
            <h1>TIS정보기술교육센터</h1>
        </div>
        <div id="menu">
            <ul>
                <li><a href="#">교육원소개</a></li>
                <li><a href="#">교육원연혁</a></li>
                <li><a href="#">교육원비전</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div>
        <div id="content">
            <div id="left">
                <h2>교육원소개</h2>
                <p>TIS정보기술교육센터에서는 정부지원IT전문교육을 시행하고 있습니다.</p>
                <img src="img/title.png" style="margin-top:10px;">
            </div>
            <div id="right">
               <h3 style="padding:10px;">개설과정</h3>
                <ul>
                    <li>웹표준UI/UX</li>
                    <li>안드로이드</li>
                    <li>자바</li>
                </ul>
            </div>
        </div>
        <div id="bottom"></div>
        <div id="footer">
            &copy;TIS Edu. All rights reserved.
        </div>
   </div>
   
</body>
</html>

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

html연습문제03  (0) 2016.07.18
7/18 수업 예제  (0) 2016.07.18
7/18 css03.html  (0) 2016.07.18
html연습문제02  (0) 2016.07.15
7/15 수업파일  (0) 2016.07.15
'TIS_2016/HTML5_3기' Related Articles more
Comments