본문 바로가기

TUTORIAL


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

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

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

웹 표준 사이트를 만들기 위한 여섯 번째 시간입니다. 가장 기본이 되는 레이아웃 연습니다. 영상과 함께 따라하시면 도움이 됩니다.

<!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 댓글주소 수정/삭제

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

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