본문 바로가기

TUTORIAL


웹 표준 사이트 만들기(2019)

07. 웹 표준 사이트 만들기(2019) - layout07



웹 표준을 준수하여 사이트를 만드는 수업입니다.
가장 기본적인 강의이며 처음 배우시는 분들에게 추천하는 수업입니다.
하나하나씩 따라하시면 결과물이 완성되고
사이트를 어떻게 만드는지 감을 잡을 수 있는 튜토리얼입니다.


사용프로그램
Adobe PhotoshopCC 2018GO
brackets GO
sublime GO
visualstudio GO


웹 퍼블리셔가 되기 위한 튜토리얼 순서
1. 웹 표준 사이트 만들기(2019) GO
2. 반응형 사이트 만들기(2019) GO
3. 메가박스 사이트 만들기(2019) - 디자인 GO
4. 메가박스 사이트 만들기(2019) - 코딩 GO
...추후 제공


도움이 되셨다면 구독과 좋아요!! click
모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
댓글은 영상을 제작하는데 많은 힘이 됩니다.
다 보셨으면. 꼭! 댓글 부탁드립니다.


소스 다운로드 : webstandard2019

인스타그램 보기 : instagram.com/webstoryboy

포폴 만들기 스터디 모임 : https://cafe.naver.com/crossbrowsing













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































/* 리셋 */
* {
    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);
}





















tags