• ~2024.12.

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

E-17

E-17. 문제 개요

문제지

E-17.pdf

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

E-17. 레이아웃

E-17. 레이아웃: 결과 화면

E-17. 레이아웃: HTML

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[웹디자인기능사 E-17] 김치이야기</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <!-- .wrap>.aside>.logo+.nav^.main>.banner+.notice+.gallery+.link^.slider+.footer -->
    <div class="wrap">
      <div class="aside">
        <div class="logo">logo</div>
        <div class="nav">menu</div>
      </div>
      <div class="main">
        <div class="banner">banner</div>
        <div class="notice">공지사항</div>
        <div class="gallery">갤러리</div>
        <div class="link">바로가기</div>
      </div>
      <div class="slider"></div>
    </div>
    <div class="footer">
      <!-- .footer1+.footers>.footer2+.footer3 -->
      <div class="footer1">LOGO</div>
      <div class="footers">
        <div class="footer2">하단메뉴</div>
        <div class="footer3">Copyright</div>
      </div>
    </div>
    <!-- </div> -->
  </body>
</html>

E-17. 레이아웃: CSS

* {
  margin: 0;
  padding: 0;
  color: #333;
  text-decoration: none;
  list-style-type: none;
  box-sizing: border-box;
  font-family: sans-serif;
}
.wrap {
  width: 100%;
  height: calc(100vh - 120px);
  /* background-color: #777; */
  display: flex;
  flex-wrap: nowrap;
}

.wrap .aside {
  width: 200px;
  height: 100%;
  /* background-color: #888; */
}
.wrap .aside .logo {
  width: 100%;
  height: 100px;
  background-color: #777;
}
.wrap .aside .nav {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #888;
}

.wrap .main {
  width: 400px;
  height: 100%;
  /* background-color: #999; */
}

.wrap .main .banner {
  width: 100%;
  height: 15%;
  background-color: #999;
  flex-shrink: 1;
}
.wrap .main .notice {
  width: 100%;
  height: 35%;
  background-color: #959595;
}

.wrap .main .gallery {
  width: 100%;
  height: 35%;
  background-color: #9a9a9a;
}
.wrap .main .link {
  width: 100%;
  height: 15%;
  background-color: #aaa;
}
.wrap .slider {
  width: calc(100% - 200px - 400px);
  height: 100%;
  background-color: #a5a5a5;
}
.footer {
  width: 100%;
  height: 120px;
  background-color: #bbb;
  display: flex;
}

.footer .footer1 {
  width: 200px;
  height: 100%;
  background-color: #ccc;
}
.footer .footers {
  width: calc(100% - 200px);
  height: 100%;
  background-color: #ddd;
}
.footer .footers .footer2 {
  width: 100%;
  height: 50%;
  background-color: #d5d5d5;
}
.footer .footers .footer3 {
  width: 100%;
  height: 50%;
  background-color: #eee;
}

E-17. 메뉴추가

E-17. 메뉴추가: 결과 화면