HTML5 - 기본 레이아웃 만들기
본문 바로가기

HTML5 - 기본 레이아웃 만들기

액트 2019. 7. 23.

 

레이아웃 1

html5 템플릿1

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout01</title>
    <style>
        body {background: #c8e6c9;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; color: #fff; font-size: 40px; text-align: center;}
        #header {width: 1000px; height: 100px; line-height: 100px; background: #2e7d32;}
        #nav {width: 1000px; height: 100px; line-height: 100px; background: #388e3c; }
        #side {float: left; width: 300px; height: 600px; line-height: 600px; background: #43a047;}
        #contents {float: left; width: 700px; height: 600px; line-height: 600px; background: #4caf50;}
        #footer {float: left; width: 1000px; height: 100px; line-height: 100px; background: #66bb6a;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">HEADER</div>
        <div id="nav">NAV</div>
        <div id="side">SIDE</div>
        <div id="contents">CONTENTS</div>
        <div id="footer">FOOTER</div>
    </div>
</body>
</html>

 

 

레이아웃 2

html5 템플릿2

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>layout02</title>
    <style>
        body {background-color: #b3e5fc;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color:#fff; text-align: center;}
        #header {width: 1000px; height: 100px; line-height: 100px; background-color: #0277bd;}
        #nav {width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
        #side_left {float: left; width: 300px; line-height: 600px;  height: 600px; background-color: #039be5;}
        #contents {float: left; width: 400px; line-height: 600px;  height: 600px; background-color: #03a9f4;}
        #side_right {float: left; width: 300px; line-height: 600px;  height: 600px; background-color: #29b6f6;}
        #footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background-color: #0288d1;}
</style>
</head>
<body>
    <div id="wrap">
        <div id="header">HEADER</div>
        <div id="nav">NAV</div>
        <div id="side_left">SIDE_LEFT</div>
        <div id="contents">CONTENTS</div>
        <div id="side_right">SIDE_RIGHT</div>
        <div id="footer">FOOTER</div>
    </div>
</body>
</html>

 

 

레이아웃 3

html5 템플릿3

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout03</title>
    <style type="text/css">
        body {background-color: #d1c4e9;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 40px; color:#fff; text-align: center; }
        .side {float: left; width: 300px; height: 900px; line-height: 900px; background-color: #4527a0;}
        .header {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #512da8;}
        .contents {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #5e35b1;}
        .footer {float: left; width: 700px; height: 300px; line-height: 300px; background-color: #673ab7;}
    </style>
</head>
<body>
    <div id="wrap">
        <div class="side">side</div>
        <div class="header">header</div>
        <div class="contents">contents</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

 

 

레이아웃 4

html5 템플릿4

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout04</title>
    <style>
        body {background-color: #ffe0b2;}
        #wrap {width: 1000px; height: 900px; margin: 0 auto; font-size: 30px; color:#fff; text-align: center; text-transform: uppercase;}
        .header {width: 1000px; height: 100px; line-height: 100px; background: #ef6c00;}
        .nav {width: 1000px; height: 100px; line-height: 100px; background: #f57c00;}
        .side {float: left; width: 300px; height: 600px; line-height: 600px; background: #fb8c00;}
        .content1 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ff9800;}
        .content2 {float: left; width: 700px; height: 300px; line-height: 300px; background: #ffa726;}
        .footer {clear: both; width: 1000px; height: 100px; line-height: 100px; background: #ffb74d;}
    </style>
</head>
<body>
    <div id="wrap">
        <div class="header">header</div>
        <div class="nav">nav</div>
        <div class="side">side</div>
        <div class="content1">content1</div>
        <div class="content2">content2</div>
        <div class="footer">footer</div>
    </div>
</body>
</html>

 

레이아웃 5

html5 템플릿5

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>layout5</title>
    <style>
        * {margin: 0; padding: 0;}
        #wrap {width: 100%; height: 1000px; color:#fff; font-size: 30px; text-align: center; text-transform: uppercase; }
        #header-wrap {width: 100%; background-color: #8d6e63; }
        #banner-wrap {width: 100%; background-color: #a1887f;}
        #content-wrap {width: 100%; background-color: #bcaaa4;}
        #footer-wrap {width: 100%; background-color: #d7ccc8;}
        
        /* 자식이 height 값을 가지고 있으면 부모의 height 값은 없어도 된다.
           width: 100%는 기본 값이기 때문에 없어도 된다.       
        */
        .header-container {width: 1000px; height: 100px; line-height: 100px; margin: 0 auto; background-color: #3e2723;}
        .banner-container {width: 1000px; height: 300px; line-height: 300px; margin: 0 auto; background-color: #4e342e;}
        .content-container {width: 1000px; height: 500px; line-height: 500px; margin: 0 auto; background-color: #5d4037;}
        .footer-container {width: 1000px; height: 100px; line-height: 100px; margin: 0 auto; background-color: #6d4c41;}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header-wrap">
            <div class="header-container">header</div>
        </div>
        <div id="banner-wrap">
            <div class="banner-container">banner</div>
        </div>
        <div id="content-wrap">
            <div class="content-container">content</div>
        </div>
        <div id="footer-wrap">
            <div class="footer-container">footer</div>
        </div>
    </div>
</body>
</html>

 

레이아웃 6

html5 템플릿6

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout06</title>
    <style>
        * {margin: 0; padding: 0;}
        #wrap {text-align: center; font-size: 30px; color: #fff;}
        #header {height: 140px; line-height: 140px; background: #ffe1e4;}
        #banner {height: 450px; line-height: 450px; background: #fbd6e3;}
        #contents {height: 950px; line-height: 950px; background: #ead5ee;} 
        #footer {height: 220px; line-height: 220px; background: #d6ebfd;}
        .container {width: 1100px; height: inherit; margin: 0 auto; background: rgba(0,0,0,0.1);}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <div id="banner">
            <div class="container">banner</div>
        </div>
        <div id="contents">
            <div class="container">contents</div>
        </div>
        <div id="footer">
            <div class="container">footer</div>
        </div>
    </div>
</body>
</html>

 

 

레이아웃 7

html5 템플릿7

전체 소스 보기

더보기 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Layout07</title>
    <style>
        /* 리셋 */
        * {margin: 0; padding: 0;}
        
        /* 전체 레이아웃 */
        #wrap {font-size: 20px; color: #fff; text-align: center;}
        #header {height: 140px;}
        #banner {height: 450px; line-height: 450px; background: #4dd0e1;}
        #contents {height: 950px;}
        #footer {height: 220px;}
        
        /* 레이아웃 */
        #header-top {height: 70px; line-height: 70px; background: #b2ebf2;}
        #header-nav {height: 70px; line-height: 70px; background: #80deea;}
        #content1 {height: 90px; line-height: 90px; background-color: #26c6da;}
        #content2 {height: 480px; line-height: 480px; background-color: #00bcd4;}
        #content3 {height: 380px; line-height: 380px; background-color: #00acc1;}
        #footer-nav {height: 60px; line-height: 60px; background-color: #0097a7;}
        #footer-info {height: 160px; line-height: 160px; background-color: #00838f;}
        
        /* 컨테이너 */
        .container {width: 1100px; margin: 0 auto; height: inherit; background: rgba(255,255,255,0.3);}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div id="header-top">
                <div class="container">header-top</div>
            </div>
            <div id="header-nav">
                <div class="container">header-nav</div>
            </div>
        </div>
        <!-- //header -->
        
        <div id="banner">
            <div class="container">banner</div>
        </div>
        <!-- //banner -->
        
        <div id="contents">
            <div id="content1">
                <div class="container">content1</div>
            </div>
            <div id="content2">
                <div class="container">content2</div>
            </div>
            <div id="content3">
                <div class="container">content3</div>
            </div>
        </div>
        <!-- //contents -->
        
        <div id="footer">
            <div id="footer-nav">
                <div class="container">footer-nav</div>
            </div>
            <div id="footer-info">
                <div class="container">footer-info</div>
            </div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>

 

저작자표시 비영리 변경금지

'IT > Web' 카테고리의 다른 글

HTML5 & CSS3 - 웹표준 이미지의 대체텍스트 넣기 IR 기법  (0) 2019.07.25
HTML5 & CSS3 - 웹접근성 스킵 메뉴 만들기  (0) 2019.07.24
CSS3 - 반응형 웹 만들기 @media  (0) 2019.07.18
CSS3 - 반응형 웹 만들기 @media 규칙  (0) 2019.07.18
CSS3 - 웹 폰트, 구글 폰트, font 적용  (0) 2019.07.16

관련글

댓글

티스토리툴바