• ~2024.12.

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

C-9

C-9. 문제 개요

문제지

C-9.pdf

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

C-9. 레이아웃

C-9. 레이아웃: 결과 화면

C-9. 레이아웃: HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[웹디자인기능사C-09] 해운대 빛축제</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="wrap">
      <div class="aside">
        <div class="logo">logo</div>
        <div class="nav">menu</div>
      </div>
      <div class="main">
        <div class="slider"></div>
        <div class="contents">
          <div class="content1">공지사항/갤러리</div>
          <div class="content2">배너</div>
          <div class="content3">바로가기</div>
        </div>
        <div class="footer">
          <div class="footer1">로고</div>
          <div class="footers">
            <div class="footer2">하단메뉴</div>
            <div class="footer3">copyright</div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

C-9. 레이아웃: CSS

* {
  margin: 0;
  padding: 0;
  color: #333;
  list-style-type: none;
  text-decoration: none;
  box-sizing: border-box;
}

.wrap {
  width: 1000px;
  height: 650px;
  display: flex;
}
.wrap .aside {
  width: 200px;
  height: 100%;
  /* background-color: #aaa; */
  position: relative;
}

.wrap .aside .logo {
  width: 100%;
  height: 100px;
  background-color: #a0a0a0;
}
.wrap .aside .nav {
  width: 100%;
  height: calc(100% - 100px);
  background-color: #aaa;
}
.wrap .main {
  width: 800px;
  height: 100%;
  background-color: #bbb;
}
.main .slider {
  width: 100%;
  height: 350px;
  background-color: #ccc;
}

.main .contents {
  width: 100%;
  height: 200px;
  background-color: #ddd;
  display: flex;
}

.main .contents .content1 {
  width: 33.333%;
  height: 100%;
  background-color: #d0d0d0;
}
.main .contents .content2 {
  width: 33.333%;
  height: 100%;
  background-color: #d5d5d5;
}
.main .contents .content3 {
  width: 33.333%;
  height: 100%;
  background-color: #dadada;
}

.footer {
  width: 100%;
  height: 100px;
  display: flex;
}
.footer .footer1 {
  width: 20%;
  height: 100%;
  background-color: #e0e0e0;
}
.footer .footers {
  width: 80%;
  height: 100%;
}
.footer .footers .footer2 {
  width: 100%;
  height: 50%;
  background-color: #c5c5c5;
}

.footer .footers .footer5 {
  width: 100%;
  height: 50%;
  background-color: #cacaca;
}

C-9. 메뉴추가