본문 바로가기

TUTORIAL


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

06. 웹 표준 사이트 만들기(2019) - layout06



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


사용프로그램
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>Layout06</title>
    <style>
        * {margin: 0; padding: 0;}
        #wrap {text-align: center; font-size: 30px; color: #fff;}
        #header {height: 140px; line-height: 140px; background: #ffe1e4;}
        #banner {height: 450px; line-height: 450px; background: #fbd6e3;}
        #contents {height: 950px; line-height: 950px; background: #ead5ee;} 
        #footer {height: 220px; line-height: 220px; background: #d6ebfd;}
        .container {width: 1100px; height: inherit; margin: 0 auto; background: rgba(0,0,0,0.1);}
    </style>
</head>
<body>
    <div id="wrap">
        <div id="header">
            <div class="container">header</div>
        </div>
        <div id="banner">
            <div class="container">banner</div>
        </div>
        <div id="contents">
            <div class="container">contents</div>
        </div>
        <div id="footer">
            <div class="container">footer</div>
        </div>
    </div>
</body>
</html>



























<div id="wrap">
    <div id="header">
        <div class="container">header</div>
    </div>
    <div id="banner">
        <div class="container">banner</div>
    </div>
    <div id="contents">
        <div class="container">contents</div>
    </div>
    <div id="footer">
        <div class="container">footer</div>
    </div>
</div>































* {
    margin: 0;
    padding: 0;
}
#wrap {
    text-align: center;
    font-size: 30px;
    color: #fff;
}
#header {
    height: 140px;
    line-height: 140px;
    background: #ffe1e4;
}
#banner {
    height: 450px;
    line-height: 450px;
    background: #fbd6e3;
}
#contents {
    height: 950px;
    line-height: 950px;
    background: #ead5ee;
}
#footer {
    height: 220px;
    line-height: 220px;
    background: #d6ebfd;
}
.container {
    width: 1100px;
    height: inherit;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.1);
}

























tags

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

    안녕하세요 너무 감사하게 강의영상을 보고 잘 배우고 있습니다. 유익한 영상 정말 너무너무 감사합니다.
    그런데 제가 여기를 즐겨찾기 하고 매일 찾아보면서 하고있는데 즐겨찾기를 해서 들어왔을 경우 오른쪽 메뉴파일을 열면 안에있는 내용들이 보이질 않아요
    유튜브로 연결된 링크로 들어오면 메뉴가 보이는데 즐겨찾기로 들어오면 메뉴가 보이질 않아서요 혹시 해결방법이 있으시면 알려주세요~

    그리고 정리도 좋고 영상내용도 좋고 정말 너무 감사합니다 이런 강의영상을 무료로 볼 수 있는게 정말 감사합니다.

    • 큐브 2019.01.14 17:25 댓글주소 수정/삭제

      저도 이거 생각하고 있었는데 ㅎㅎ
      강의 넘 잘듣구 있습니다 ㅎㅎ
      재밌어요!

  • 죄송해요. 버그입니다. 고쳐야 하는데. 조만간 고쳐놓겠습니다

  • devcat 2019.08.21 10:26 댓글주소 수정/삭제 댓글쓰기

    천사이신것 같아요.... ㅠㅠ 너무 감사합니다..