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>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>
</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: #333;}
</style>
<style>
@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;}
</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;}
    </style>

</head>
<body>
    <div id="wrap">
        <div id="header"></div>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>
</body>
</html>
웹 표준 사이트 만들기(2019) - 레이아웃1

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

완성
광고

공유하기

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

전체메뉴

질문하기
댓글
  • 프로필사진 싡니규 정말로 잘 보고 있습니다.
    항상 늘 감사 드립니다.
    사실 저도 홈페이지를 만들고는 있지만 다른 사이트를 참조해서 만들고 있는 터라 코드들에 대해서 아직은 이해력이 좀 부족한 부분이 많습니다.
    열심히 배우도록 하겠습니다.
    2018.11.13 12:46 신고
  • 프로필사진 신진규 혹시
    http://www.compuzone.co.kr/main/main.htm
    여기 사이트에 있는 전체 카테고리 부분도 좀 강의를 부탁 드려도 될까요
    사실 이것은 반응형은 아니지만 반응형으로 한번 구현을 하고 싶은데 어려운 점들이 많아요
    2018.11.13 12:48 신고
  • 프로필사진 @webs 안녕하세요! 컴퓨터 존 사이트로 반응형을 만들어서 영상을 올리지 못하지만 순차적으로 웹 표준 -> 반응형 -> 모바일 -> 포폴 올릴 계획입니다. 시간을 조금 걸려도 끝까지 정리해서 올릴 생각입니다. 반응형 부분이 궁금하다면 기존에 올렸던 반응형 웹 페이지를 참고 바랍니다. 2018.11.13 13:55 신고
  • 프로필사진 geon http://smiling88.dothome.co.kr/web/index.html
    완성~ 쉽게 잘 가르쳐 주셔서 좋네요! 감사합니다
    2018.11.15 14:13 신고
  • 프로필사진 @webs 감사합니다.^^ 끝까지 완성해주세요^^ 2018.11.15 18:30 신고
  • 프로필사진 코보 좋은강의 잘 보고 있습니다. 감사합니다
    http://kobolim.dothome.co.kr/web
    2018.11.15 17:49 신고
  • 프로필사진 @webs 감사합니다.^^ 끝까지 완성해주세요^^ 2018.11.15 18:30 신고
  • 프로필사진 쏘울 html,css기초 강의듣고나서 이제 뭘 해야 하나 막막했었는데 이렇게 좋은 강의 만들어 주셔서 넘 감사드립니다^^ 열심히 공부할수 있게해주셔서 고맙습니다~! 2018.12.14 21:51 신고
  • 프로필사진 @webs 네 감사합니다.^^ 2018.12.19 18:56 신고
  • 프로필사진 mdymky http://mdymky.dothome.co.kr/web/index.html
    잘 따라하고 있습니다.^^
    만드는 사이트의 DB도 유튜브에 올려주시면 감사하겠습니다.
    2018.12.24 15:36 신고
  • 프로필사진 @webs richclub7.dothome.co.kr 를 얘기하시는간가요? 2018.12.25 11:25 신고
  • 프로필사진 mdymky 답변 감사합니다. 네 richclub7.dothome.co.kr 이 사이트 맞습니다. 로그인, 게시판 기타등등 DB 관련 강의도 유튜브로 올려주시면 감사하겠습니다.^^ 2018.12.26 09:20 신고
  • 프로필사진 @webs php까지 영상을 찍을 수 있을까 모르겠네요. 그래도 노력은 해볼께요 2018.12.27 15:25 신고
  • 프로필사진 송형일 http://shout1988.dothome.co.kr/web/index.html 열심히 따라서 제작진행중입니다! 2018.12.27 15:44 신고
  • 프로필사진 @webs 수고하셨어요^^ 2018.12.28 10:26 신고
  • 프로필사진 ko8584 http://ko8584.dothome.co.kr/web/css/style.css

    입니다.
    강사님하고 똑같이 한다고 했는데 저는
    파이어폭스에서는 한글이 깨지고 크롬에서는 안깨지는데 이게 맞는 건가요?
    왜깨지는 건지 알려주시면 감사하겠습니다.~-
    2019.02.20 11:31 신고
  • 프로필사진 @webs 확인을 해보니 저도 파이어폭스에서는 깨집니다. 소스상에 문제는 아닌 것 같고요~~ 파이어폭스 브라운저에서 한글이 지원이 안되는 거 같습니다. 주석 표시이니 크게 신경을 안쓰셔도 될거 같구요~ 깨지는게 불편하면 영어로 쓰는게 좋을 듯 합니다. 2019.02.20 14:57 신고
  • 프로필사진 공부중 http://cruiser.dothome.co.kr/

    강의 잘보고있습니다 지식 공유해주셔서 너무 감사합니다~!
    2019.03.17 23:07 신고
  • 프로필사진 @webs 끝까지 완성하시길 바랄꼐요^^ 2019.03.18 09:01 신고
댓글쓰기 폼