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

• ~2024.12.

A-1

A-1. 문제 개요

문제지:

A-1.pdf

A-1. 사이트 맵(Site map) &와이어프레임(Wireframe)

A-1. 레이아웃

A-1. 레이아웃: 결과 화면

A-1. 레이아웃: HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>[웹디자인기능사A-1]JUST 쇼핑몰</title>
    <link rel="stylesheet" href="./css/main.css" />
  </head>
  <body>
    <div class="wrapper">
      <!-- strat of header -->
      <header class="header">
        <div class="logo">logo</div>
        <div class="nav">menu</div>
      </header>
      <!-- end of header -->
      <!-- start of image slider -->
      <article class="slider">이미지 슬라이더</article>
      <!-- end of Image slider -->
      <!-- start of main -->
      <main class="main">
        <div class="content1">공지사항/갤러리</div>
        <div class="content2">배너</div>
        <div class="content3">바로가기</div>
      </main>
      <!-- end of main -->
      <!-- start of footer -->
      <footer class="footer">
        <div class="footer1">로고</div>
        <div class="footer2">Copyright</div>
        <div class="footer3">SNS</div>
      </footer>
      <!-- end of footer -->
    </div>
  </body>
</html>

A-1. 레이아웃: CSS

* {
  margin: 0;
  padding: 0;
  color: #333;
}

.wrapper {
  width: 1200px;
  margin: 0 auto;
}

.wrapper .header {
  width: 1200px;
  height: 100px;
  display: flex;
  background-color: #aaa;
}

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

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

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

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

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

.wrapper .main .content3 {
  width: 33.333%;
  background-color: #cccccc;
}

.wrapper .footer {
  width: 1200px;
  height: 100px;
  display: flex;
  background-color: #ddd;
}

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

.wrapper .footer .footer2 {
  width: 60%;
  background-color: #d5d5d5;
}

.wrapper .footer .footer3 {
  width: 20%;
  background-color: #dddddd;
}

A-1. 메뉴추가

A-1. 메뉴추가: 결과 화면

A-1. 메뉴추가: 결과화면

A-1. 메뉴추가: HTML