본문 바로가기

TUTORIAL


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

09. 웹 표준 사이트 만들기(2019) - 레이아웃2



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


사용프로그램
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">
    <meta name="author" content="webstoryboy">
    <meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
    <meta name="keywords" content="웹표준, 웹접근성, 샘플사이트">
    <meta name="generator" content="brackets">
    <title>WEBSTANDARD SITE</title>
    
    <!-- style -->
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <!-- //header -->
        
        <div id="contents">
            <div id="cont_nav">
                <div class="container">cont_nav</div>
            </div>
            <!-- //cont_nav -->
            <div id="cont_tit">
                <div class="container">cont_tit</div>
            </div>
            <!-- //cont_tit -->
            <div id="cont_ban">
                <div class="container">cont_ban</div>
            </div>
            <!-- //cont_ban -->
            <div id="cont_cont">
                <div class="container">cont_cont</div>
            </div>
            <!-- //cont_cont -->
        </div>
        <!-- //contents -->
        
        <div id="footer">
            <div class="container">footer</div>
        </div>
        <!-- //footer -->
    </div>
    <!-- //wrap -->
</body>
</html>































@charset "utf-8";

/* 레이아웃 */
#wrap {width: 100%; }
#header {width: 100%; height: 325px; background: #111;}
#contents {width: 100%; height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #111;}

/* 컨텐츠 레이아웃 */
#cont_nav {width: 100%; height: 200px; background: #333;}
#cont_tit {width: 100%; height: 200px; background: #444;}
#cont_ban {width: 100%; height: 200px; background: #555;}
#cont_cont {width: 100%; height: 200px; background: #666;}

/* 컨테이너 */
.container {width: 990px; margin: 0 auto; height: inherit; background: rgba(255,255,255,0.3);}



































@charset "utf-8";

/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table,
th, td, tr, textarea, button, form {margin: 0; padding: 0;}


































  • geon 2018.11.15 14:27 댓글주소 수정/삭제 댓글쓰기

    http://smiling88.dothome.co.kr/web/index.html
    완성 따라하기 쉽네요 ㅠㅠ!/ 감기 얼른 나으세요! 감사합니다.
    주석 표시 할때 <!-- 가 아닌 <!-- // 으로 하는 이유가 있는건가요?
    단축키로 할시 //은 표시가 안되어서...

  • Jun Kim 2019.03.15 22:58 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 강의 정말 감사합니다
    다름이 아니라 제가 집에서는 sublimetext3을 쓰는데, 이거로 하면 페이지가 잘 안나오는데... 이유가 있을까요?

    • 반응형 강의에서는 서브라임을 써서 강의하는데요~ 아마도 작업한 파일이 서버에 잘 올라가지 않아서 생기는 현상 같습니다. 현재 어떻게 사용하는지를 정확히 알려주시면 답변을 드리겠습니다.

  • young lee 2019.06.17 20:13 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 강의 잘보고있습니다.
    이런질문 드려도 되나 싶은데 질문드립니다.
    이 사이트 좌측엔 영상있고 영상 아래쪽에 목차설명 우측엔 소스가 있고 중간에 드래그되서 사이즈 조정이 가능한데
    이런 구조는 뭘로 만드신건가요? 자바스크립트 같은데 혹시 참고할만한 url이라든가 js 이름등 알수있을까요..
    감사합니다.^^