Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

Welcolme my Tutorial blog

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

안녕하세요!

현재는 베타버전입니다.

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

에디터가 드리는 인사

티스토리 뷰

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



<style>
@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);}
</style>
<style>
@charset "utf-8";

/* 여백 초기화 */   
body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,
p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;}
</style>
<!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>
        /* 여백 초기화 */   
        body,div,ul,li,dl,dd,dt,ol,h1,h2,h3,h4,h5,h6,input,fieldset,legend,p,select,table,th,td,tr,textarea,button,form{margin:0;padding:0;}
    </style>
    <style>
        /* 레이아웃 */
        #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);}

    </style>
</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>
웹 표준 사이트 만들기(2019) - 레이아웃2

웹 표준 사이트를 만들기 위한 레이아웃 구조잡기 영상입니다.

완성
광고

공유하기

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

전체메뉴

질문하기
댓글
  • 프로필사진 geon http://smiling88.dothome.co.kr/web/index.html
    완성 따라하기 쉽네요 ㅠㅠ!/ 감기 얼른 나으세요! 감사합니다.
    주석 표시 할때 <!-- 가 아닌 <!-- // 으로 하는 이유가 있는건가요?
    단축키로 할시 //은 표시가 안되어서...
    2018.11.15 14:27 신고
  • 프로필사진 @webs 감사합니다. //이렇게 하는 표시는 저만의 스타일입니다. 편한데로 하셔도 상관없습니다.^^ 2018.11.15 14:40 신고
  • 프로필사진 Jun Kim 안녕하세요 강의 정말 감사합니다
    다름이 아니라 제가 집에서는 sublimetext3을 쓰는데, 이거로 하면 페이지가 잘 안나오는데... 이유가 있을까요?
    2019.03.15 22:58 신고
  • 프로필사진 @webs 반응형 강의에서는 서브라임을 써서 강의하는데요~ 아마도 작업한 파일이 서버에 잘 올라가지 않아서 생기는 현상 같습니다. 현재 어떻게 사용하는지를 정확히 알려주시면 답변을 드리겠습니다. 2019.03.17 10:23 신고
댓글쓰기 폼