Welcolme my Tutorial blog

퍼블리셔와 디자이너를 위한 사이트입니다.
동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

Welcolme my Tutorial blog

웹 표준 사이트 따라하기 튜토리얼 입니다.
유튜브 영상과 같이 보면서 따라하는 튜토입니다.

Welcolme my Tutorial blog

사이트는 현재 만드는 중입니다.
버그와 잘못된 링크가 엄청 많습니다.

안녕하세요!

현재는 베타버전입니다.

이 사이트는 코딩을 동영상과 소스를 보면서 따라하는 튜토리얼 사이트입니다.

에디터가 드리는 인사

티스토리 뷰

<!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>



<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 -->
<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>
웹 표준 사이트 만들기(2019) - layout07

웹 표준 사이트를 만들기 위한 기본 레이아웃 유형7 입니다.

완성
광고

공유하기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
태그보기

전체메뉴

질문하기
댓글
댓글쓰기 폼