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

moozi

레이아웃기초 본문

TIS_2017/응용sw_2기

레이아웃기초

moozi 2017. 7. 28. 15:21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>레이아웃 - float, clear</title>
    <style>
        *{margin: 0;padding:0;}
        #header{ background-color: black;color: white;
            height: 100px;
        }
        #nav{ background-color: darkgray; height: 30px;}
        #aside{ background-color: gray;
            width:150px;height:500px;
            float:left;
        }
        #section{
            float:left;
        }
        #footer{
            clear: both;
            background-color: darkgrey;
            height:100px;
        }
    </style>
</head>
<body>
   <div id="header">
       <h1>TIS 정보기술 교육센터</h1>
   </div>
   <div id="nav">
       회사소개 | 회사연혁 | Contact
   </div>
   <div id="aside">
       <ul>
           <li>과정소개</li>
           <li>연락처</li>
           <li>게시판</li>
       </ul>
   </div>
   <div id="section">
       <p>TIS 정보기술 교육센터에 오신것을 환영합니다.</p>
   </div>
   <div id="footer">
       &copy;Copyrights reserved by TIS. Edu.
   </div>
   
</body>
</html>

'TIS_2017 > 응용sw_2기' 카테고리의 다른 글

7/28 수업 예제  (0) 2017.07.31
html연습문제04  (0) 2017.07.28
html연습문제03  (0) 2017.07.27
html연습문제02  (0) 2017.07.26
html연습문제01  (0) 2017.07.25
'TIS_2017/응용sw_2기' Related Articles more
Comments