• ~2024.12.

웹디자인기능사 실기(B유형)

B-5

B-5. 문제 개요

문제지

B-5.pdf

사이트 맵(Site map) &와이어프레임(Wireframe)

B-5. 레이아웃

B-5. 레이아웃: 결과 화면

B-5. 레이아웃: HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[웹디자인기능사B-5] 대한은행</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <!-- .header_wrap>.header>.logo+.nav -->
    <div class="header_wrap">
      <div class="header">
        <div class="logo">logo</div>
        <div class="nav">menu</div>
      </div>
    </div>
    <!-- // .head_wrap -->

    <div class="slider">image slider</div>
    <!-- // .slider -->

    <!-- .main>.content$*3>{con$} -->
    <div class="main">
      <div class="content1">con1</div>
      <div class="content2">con2</div>
      <div class="content3">con3</div>
    </div>
    <!-- // .main -->

    <!-- .footer_wrap>.footer>.footer1+.footers>.footer$@2*2 -->
    <div class="footer_wrap">
      <div class="footer">
        <div class="footer1">logo</div>
        <div class="footers">
          <div class="footer2">하단메뉴</div>
          <div class="footer3">copyright</div>
        </div>
      </div>
    </div>
    <!-- //.footer_wrap -->
  </body>
</html>

B-5. 레이아웃: CSS

* {
  margin: 0;
  padding: 0;
  color: #333;
  list-style: none;
}

.header_wrap {
  width: 100%;
  height: 100px;
  background-color: #ddd;
}

.header_wrap .header {
  width: 1200px;
  height: 100px;
  margin: 0 auto;
  background-color: #999;
  display: flex;
}

.header_wrap .header .logo {
  width: 20%;
  height: 100px;
  background-color: #a0a0a0;
}

.header_wrap .header .nav {
  width: 80%;
  height: 100px;
  background-color: #a5a5a5;
}

.wrapper .header .nav {
  width: 80%;
  height: 100px;
  background-color: #aaaaaa;
}

.slider {
  width: 1200px;
  height: 300px;
  background-color: #bbb;
  margin: 0 auto;
}
.main {
  width: 1200px;
  height: 200px;
  margin: 0 auto;
  display: flex;
}

.main .content1 {
  width: 33.333%;
  background-color: #c0c0c0;
}

.main .content2 {
  width: 33.333%;
  background-color: #c5c5c5;
}

.main .content3 {
  width: 33.333%;
  background-color: #cccccc;
}
.footer_wrap {
  width: 100%;
  height: 100px;
  background-color: #ddd;
}
.footer_wrap .footer {
  width: 1200px;
  height: 100px;
  display: flex;
  background-color: #ddd;
  margin: 0 auto;
}

.footer_wrap .footer .footer1 {
  width: 20%;
  background-color: #d0d0d0;
}

.footer_wrap .footer .footers {
  width: 80%;
  /* background-color: #d0d0d0; */
}

.footer_wrap .footer .footers .footer2 {
  width: 100%;
  height: 50%;
  background-color: #d5d5d5;
}

.footer_wrap .footer .footers .footer3 {
  width: 100%;
  height: 50%;
  background-color: #dddddd;
}

B-5. 메뉴추가