본문 바로가기

TUTORIAL


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

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



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


사용프로그램
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>
        <div id="contents"></div>
        <div id="footer"></div>
    </div>
</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: #333;}



































@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:13 댓글주소 수정/삭제 댓글쓰기

    http://smiling88.dothome.co.kr/web/index.html
    완성~ 쉽게 잘 가르쳐 주셔서 좋네요! 감사합니다

  • 코보 2018.11.15 17:49 댓글주소 수정/삭제 댓글쓰기

    좋은강의 잘 보고 있습니다. 감사합니다
    http://kobolim.dothome.co.kr/web

  • 쏘울 2018.12.14 21:51 댓글주소 수정/삭제 댓글쓰기

    html,css기초 강의듣고나서 이제 뭘 해야 하나 막막했었는데 이렇게 좋은 강의 만들어 주셔서 넘 감사드립니다^^ 열심히 공부할수 있게해주셔서 고맙습니다~!

  • mdymky 2018.12.24 15:36 댓글주소 수정/삭제 댓글쓰기

    http://mdymky.dothome.co.kr/web/index.html
    잘 따라하고 있습니다.^^
    만드는 사이트의 DB도 유튜브에 올려주시면 감사하겠습니다.

    • richclub7.dothome.co.kr 를 얘기하시는간가요?

    • mdymky 2018.12.26 09:20 댓글주소 수정/삭제

      답변 감사합니다. 네 richclub7.dothome.co.kr 이 사이트 맞습니다. 로그인, 게시판 기타등등 DB 관련 강의도 유튜브로 올려주시면 감사하겠습니다.^^

    • php까지 영상을 찍을 수 있을까 모르겠네요. 그래도 노력은 해볼께요

  • 송형일 2018.12.27 15:44 댓글주소 수정/삭제 댓글쓰기

    http://shout1988.dothome.co.kr/web/index.html 열심히 따라서 제작진행중입니다!

  • ko8584 2019.02.20 11:31 댓글주소 수정/삭제 댓글쓰기

    http://ko8584.dothome.co.kr/web/css/style.css

    입니다.
    강사님하고 똑같이 한다고 했는데 저는
    파이어폭스에서는 한글이 깨지고 크롬에서는 안깨지는데 이게 맞는 건가요?
    왜깨지는 건지 알려주시면 감사하겠습니다.~-

    • 확인을 해보니 저도 파이어폭스에서는 깨집니다. 소스상에 문제는 아닌 것 같고요~~ 파이어폭스 브라운저에서 한글이 지원이 안되는 거 같습니다. 주석 표시이니 크게 신경을 안쓰셔도 될거 같구요~ 깨지는게 불편하면 영어로 쓰는게 좋을 듯 합니다.

  • 공부중 2019.03.17 23:07 댓글주소 수정/삭제 댓글쓰기

    http://cruiser.dothome.co.kr/

    강의 잘보고있습니다 지식 공유해주셔서 너무 감사합니다~!

  • 호호 2019.05.12 05:53 댓글주소 수정/삭제 댓글쓰기

    http://bangyul.dothome.co.kr/web/index.html

    마른 하늘에 단비같은 영상입니다.
    개인적으로 난이도, 속도, 컨텐츠 모두 완벽한 강의예요.
    어떻게 감사함을 표해야할 지 모르겠어요..
    정말정말 감사합니다!! 복 받으실거예요!!

  • 서지민 2019.05.17 01:09 댓글주소 수정/삭제 댓글쓰기

    https://wtss.tistory.com/175 여백이 안없어 지는데 뭘 잘못한걸까요ㅠ

  • SYS 2019.05.20 23:35 댓글주소 수정/삭제 댓글쓰기

    http://stisthaha.dothome.co.kr/web/index.html
    너무 재밌어서 시간가는줄 모르겟어요! 열심히 배우겠습니다:)

  • http://wogml97.dothome.co.kr/web/index.html
    너무 감사합니다~ 사정 상 학원을 못 다니는데 너무 유익하고 함께 배우니까 더 재밋어요~

  • 이정인 2019.06.01 22:30 댓글주소 수정/삭제 댓글쓰기

    http://sunshinejm.dothome.co.kr/web/index.html
    정말 영상 잘보고 있어요 쉽게 잘 배우고 있어요 감사합니다. ~^^

  • ani 2019.06.01 23:05 댓글주소 수정/삭제 댓글쓰기

    http://sunshinejm.dothome.co.kr/web/index.html

    음.. 컨테이너가 안될까요?

  • 제니스 2019.06.12 05:03 댓글주소 수정/삭제 댓글쓰기

    안녕하세요 좋은 강의 올려주셔서 감사합니다.
    강의대로 따로 하고 있는데요 . 저는 인덱스페이지가 나오지가 않고 있습니다.

    http://jjin7900.dothome.co.kr/web/index.html

    어떻게 해야될까요?

  • 황정훈 2019.06.28 01:02 댓글주소 수정/삭제 댓글쓰기

    8강 완료했습니다. html이랑 css강의 여러번 보고, 책 조금 보다가 실습은 이번이 처음이네요 ㅎ
    유익한 강의 감사합니다~!

    http://bingbingba1.dothome.co.kr/web/index.html

  • 이소연 2019.07.01 13:34 댓글주소 수정/삭제 댓글쓰기

    강의 잘 보고 따라하고 있어요^^ 근데 브라켓에서 synapse기능 설치하고 따라 적어 넣었는데 append버튼이 활성화가 안되요ㅜ 뭘 잘못했을까요?

  • 황규영 2019.08.04 18:12 댓글주소 수정/삭제 댓글쓰기

    8강 완료했습니다. 아직까지 막힘없이 잘 가고 있는거 같아서 기분이 좋네요ㅎㅎ
    열심히 듣겠습니다. 좋은강의 올려주셔서 감사해요!
    http://hky0959.dothome.co.kr/web/index.html

  • 김영호 2019.08.11 16:26 댓글주소 수정/삭제 댓글쓰기

    좋은강의 정말 감사합니다. 열심히 보면서 따라하고 있습니다.
    http://kyh174.dothome.co.kr/web/index.html

  • 영타40타 2019.08.16 14:02 댓글주소 수정/삭제 댓글쓰기

    안녕하세욥 선생님 강의 열심히 듣고있습니다
    1강부터 잘듣다가 ftp관련해서 문제가 생겨서 질문드립니다!!
    synapse << 확장앱이 vscode에서는 없는 기능인거같은데 ㅠㅠ 유사 앱깔아서 설치했는데
    시냅스처럼 뷰어가 없습니다ㅠㅠ 문서 만들고 관리는 되는데 파일을 생성하거나 볼 수가 없습니다 ㅠㅠ
    어떻게 할까요? ㅠㅠ 흑흑...
    환경을 브라캣으로 옮겨야만 수업을 무사히 따라 갈 수 있는 건가 여쭙습니다 ㅠㅠ

    더위조심하세요 항상 감사합니다 (^_^)7

    • 저는바보에요ㅎㅎ 2019.08.16 14:07 댓글주소 수정/삭제

      선생님 ㅋㅋㅋㅋ 찾았어요 ㅋㅋㅋ 워크스페이스가 따로 있었네요 ㅠㅠ
      http://kbom.dothome.co.kr/web/index.html
      정말로 바보 입니다.. 열심히해서 완강하겠습니다!충성~

  • websh 2019.08.20 00:50 댓글주소 수정/삭제 댓글쓰기

    http://websh19.dothome.co.kr/web/
    안녕하세요 기본기가 부족하다고 생각되어서 학원을 다녀야하나 과외를 해야하나 고민이 많았는데 유툽채널로 정말 도움 많이 얻고 있습니다. 처음부터 선생님께 배웠으면 좋았을걸...싶은 마음이 드네요.
    새로운 마음으로 해보려고 합니다. 좋은 영상 올려주셔서 정말 감사드립니다.