[자격증] 웹디자인 기능사 실기 1 - 감잡기 (A-1)

동화·2023년 3월 22일

자격증

목록 보기

1/3

코드스테이츠가 끝나고 일단 뭐라도 날 통제해야 직성이 풀리는 나는,
예전에 컴퓨터운용그래픽스 기능사만 따 놓고 떨어져버린 실기 시험...
나를 코딩의 길로 이끌어 줬던 웹디자인 기능사를 다시 도전했다.
필기 합격했던 건 기간이 끝나서 필기 시험을 저번달에 치렀는데,
뭐 무난하게 합격했고 .. 중요한 건 실기인데
일러스트 포토샵만 사용할 줄 알면 붙었던 컴퓨터운용그래픽스랑은 다르게 코딩능력이 필요해서 최선을 다했지만 떨어졌던 과거와는 달리
나는 html css javascript는 이제 괜찮지 않나? 하는 안일한 생각과 함께 ㅠㅠㅋㅋㅋㅋㅋㅋㅋ 일주일 전이 돼서야 부랴부랴 시작하게 되었따... ~~살려주세요~~
원래 A유형부터 C유형까지 있는데, D,E유형이 무려 올해부터 추가되었으니 일단 어서 섬네일부터 대충 만들고 (포기못함) 시작해보기로 한다..

일단 A-1을 해보면서 감을 잡아보도록 하자.

유형

A,B,C 는 홈페이지 레이아웃이 다르다.
그리고 슬라이드가 위에서 아래인지, 오른쪽으로 흐르는지, 페이드인/아웃을 하는지에 따라 나뉜다.
가로형 1 : 상위메뉴 사이즈에 맞는 서브메뉴가 전부 내려온다.
가로형 2 : 홈페이지 가로 사이즈와 맞는 서브메뉴가 내려온다.
가로형 3 : 상위메뉴 바로 밑에 있는 서브메뉴만 내려온다.
세로형은 메뉴가 왼쪽 사이드에 세로로 있는 C유형에서만 나타나는데,
세로형 1 : 서브메뉴가 상위메뉴 사이에 내려온다. (상위메뉴들이 밀림)
세로형 2 : 해당 서브메뉴만 상위메뉴 옆에 새로 생겨난다.

A-1

JUST 쇼핑몰 슬라이드 세로형 / 메뉴 가로형1

가로형1은 메뉴가 저렇게 1,2,3,4가 다 나오는 유형이다.
이 외에도 팝업창, 마우스오버 등의 이벤트가 있음.. 하나씩 해보자..

시작

index.html

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>JUST 쇼핑몰</title>
    <link rel="stylesheet" href="./css/style.css" />
    <script src="./script/jquery-3.6.4.js"></script>
    <script src="./script/script.js" defer></script>
  </head>

css/style.css

@charset "utf-8";

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}

a {
  text-decoration: none;
  display: block;
}

body {
  background: #ffffff;
  color: #333333;
}

.wrap { /*전체를 감싸는 부분*/
  width: 1200px;
  margin: 0 auto; /* 요소들에게 양옆 마진을 줌 */ 
}

로고

index.html

<header>
    <a class="logo" href="#">
       <img src="./images/logo.png" alt="로고" />
    </a>

        ...
  
</header>

style.css

.header {
  display: flex;
}

.logo > img { /* 지정된 사이즈 */
  width: 200px;
  height: 40px;
}

header { /* 메뉴와 위치 지정 */
  width: 100%;
  height: 100px; /* 지정된 사이즈 */
  background: #d9ccff; /* 보기 편하게 일단 색 넣어 놓음 */
  display: flex;
  justify-content: space-between;
  align-items: center;
}

메뉴

index.html

<header>
  ...
  
  <div>
    <nav class="mainMenu">
      <a href="#">탑</a>
      <a href="#">아우터</a>
      <a href="#">팬츠</a>
      <a href="#">악세서리</a>
      <nav class="subMenu">
        <ul>
          <li><a href="#">블라우스</a></li>
          <li><a href="#">티</a></li>
          <li><a href="#">셔츠</a></li>
          <li><a href="#">니트</a></li>
        </ul>
        <ul>
          <li><a href="#">재킷</a></li>
          <li><a href="#">코트</a></li>
          <li><a href="#">가디건</a></li>
          <li><a href="#">머플러</a></li>
        </ul>
        <ul>
          <li><a href="#">청바지</a></li>
          <li><a href="#">짧은 바지</a></li>
          <li><a href="#">긴 바지</a></li>
          <li><a href="#">레깅스</a></li>
        </ul>
        <ul>
          <li><a href="#">귀걸이</a></li>
          <li><a href="#">목걸이</a></li>
          <li><a href="#">반지</a></li>
          <li><a href="#">팔찌</a></li>
        </ul>
      </nav>
    </nav>
  </div>
</header>

style.css

.mainMenu {
  width: 700px; /*서브메뉴랑 동일하게*/
  height: 100%; /*header의 높이 그대로 */
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; /*subMenu때문에 반드시 필요*/
}

.mainMenu > a {
  width: 25%;
  padding: 20px 0;
  text-align: center;
  color: #080606;
}
.mainMenu > a:hover {
  background: rgba(255, 255, 255, 0.1);
}

.subMenu {
  width: 700px; /*메인메뉴 위치랑 동일하게*/
  display: flex;
  justify-content: space-between;
  background: #e6eafe;
  position: absolute;
  right: 0;
  top: 100px; /* header 높이 만큼 내려옴*/
  z-index: 1;
}
.subMenu > ul {
  width: 25%;
}
.subMenu > ul > li > a {
  text-align: center;
  padding: 10px 0;
  color: #723ffb;
}
.subMenu > ul > li > a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}

script.js

$(document).ready(function () {
  $(".subMenu").hide(); // 서브메뉴 숨기고 시작
  // 마우스 오버
  $(".mainMenu")
    .mouseover(function () {
      $(".subMenu").stop().slideDown(300);
    })
    .mouseout(function () {
      $(".subMenu").stop().slideUp(300);
    });
});

stop()을 적용해서 마우스를 올리거나 떠나면 진행중인 애니메이션이 정지됨.
slide~() 사이의 숫자는 시간이다. 즉.
subMenu를 0.3초 동안 올라가면서(내려가면서) 사라지게 한다는 뜻

이미지 슬라이드

index.html

      <div class="slideContainer">
        <div class="slideWrap">
          <div class="slide">
            <p>이벤트1</p>
            <a href="#"><img src="images/img1.jpg" alt="슬라이드이미지1" /></a>
          </div>
          <div class="slide">
            <p>이벤트2</p>
            <a href="#"><img src="images/img2.jpg" alt="슬라이드이미지2" /></a>
          </div>
          <div class="slide">
            <p>이벤트3</p>
            <a href="#"><img src="images/img3.jpg" alt="슬라이드이미지3" /></a>
          </div>
        </div>
      </div>

여기까지 하면 사진들이 냅다까리 배열됨

style.css

.slideContainer {
  width: 1200px;
  height: 300px;
  overflow: hidden;
}

.slide {
  position: relative;
}

.slide p {
  position: absolute;
  left: 0;
  top: 0;
  background: rgb(255, 245, 245);
  padding: 10px 20px;
}

script.js

setInterval(function () {
  $(".slideWrap").animate({ "margin-top": "-300" }, function () {
    $(".slide:first").appendTo(".slideWrap");
    $(".slideWrap").css({ "margin-top": "0" });
  });
}, 3000);

C영역

index.html

<div class="content">
 ....    
</div>

<div class="banner">
 ...
</div>

<div class="link">
  ...
</div>

style.css

.content {
  display: flex;
  width: 100%;
  height: 200px;
}
.content > * {
  width: 400px;
  height: 200px;
}

여기까지 해주면 각 구역들이 전부 400px 상태로 가로로 배열 됨!

탭 메뉴 (공지사항 / 갤러리)

index.html

<div class="tab">
  <ul class="tabMenu">
    <li class="on"><a href="#">공지사항</a></li>
    <li><a href="#">갤러리</a></li>
  </ul>

  <div class="tabItem">
    <ul class="notice on">
      <li>
        <a href="#">오늘부터 카카오페이를 사용할 수 있습니다.</a
          ><span>2023.01.23</span>
      </li>
      <li>
        <a href="#"
           >KT 롤스터 결승가면 무료로 옷 풉니다.</a
          ><span>2023.02.28</span>
      </li>
      <li>
        <a href="#">곧 만우절이므로 반값이벤트함. 뻥임</a
          ><span>2023.03.24</span>
      </li>
      <li>
        <a href="#">벚꽃 피는 봄 기념 패딩할인</a
          ><span>2023.04.02</span>
      </li>

    </ul>

    <ul class="gallery">
      <li>
        <a href="#"
           ><img src="images/gallery01.jpg" alt="갤러리이미지1"
                 /></a>
      </li>
      <li>
        <a href="#"
           ><img src="images/gallery02.jpg" alt="갤러리이미지2"
                 /></a>
      </li>
      <li>
        <a href="#"
           ><img src="images/gallery03.jpg" alt="갤러리이미지3"
                 /></a>
      </li>
    </ul>
  </div>
</div>

style.css

.tabMenu li {
  display: inline-block;
  font-size: 18px;
  font-weight: 600;
}
.tabMenu li a {
  display: block;
  padding: 10px;
}
.tabMenu li.on a {
  background: rgb(255, 245, 245);
}

.tabItem > * {
  height: 156px;
  padding: 10px;
}
.tabItem > *.on {
  background: rgb(255, 245, 245);
}

.notice li {
  display: flex;
  line-height: 2.2;
}
.notice li a {
  display: inline-block;
  width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notice li span {
  margin-left: auto;
}
.notice li:hover {
  text-decoration: underline;
}

.gallery {
  display: none;
}
.gallery li {
  display: inline-block;
  width: 32%;
  margin-top: 8px;
}
.gallery a img {
  width: 100%;
}

script.js

$(".tabMenu li").click(function () {
  var idx = $(this).index();

  $(".tabItem >*").hide().removeClass("on");
  $(".tabItem >*").eq(idx).show().addClass("on");

  $(".tabMenu li").removeClass("on");
  $(this).addClass("on");
});

팝업창 띄우기

index.html

<div class="popUpBox">
  <div class="popUp">
    <h2>A-1 JUST 쇼핑몰 팝업 제목</h2>
    <p>여기에 팝업 내용을 작성합니다</p>
    <button>X 닫기</button>
  </div>
</div>

이건 헤더보다도 위에 넣어 줘야 한다.

style.css

.popUpBox {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: none;
}
.popUp {
  position: absolute;
  width: 600px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  line-height: 2;
  border: 1px solid #000;
  background: #fff;
  padding: 20px;
}
.popUp p {
  font-size: 15px;
  margin-top: 10px;
}
.popUp div {
  margin-top: 30px;
}
.popUp button {
  float: right;
  padding: 4px;
  cursor: pointer;
}

script.js

$(".notice li:nth-child(1)").click(function () {
  $(".popUpBox").show();
});

$(".popUpBox button").click(function () {
  $(".popUpBox").hide();
});

배너

index.html

<div class="banner">
  <a href="#"
     ><h2>배너</h2>
    <img src="images/banner.jpg" alt="배너이미지"
         /></a>
</div>

바로가기

index.html

<div class="link">
  <a href="#"
     ><h2>바로가기</h2>
    <img src="images/link.png" alt="링크이미지"
         /></a>
</div>

style.css

.banner,
.link {
  position: relative;
}
.banner h2,
.link h2 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 18px;
  font-weight: 600;
  background: #fff;
  padding: 10px;
}

index.html

<footer>
  <a href="#" class="footerLogo"
     >JUST쇼핑몰<img src="images/logo2.png" alt="JUST쇼핑몰 푸터 로고"
                  /></a>
  <p>Copyright All rights reserved JUST 쇼핑몰</p>
  <div class="sns">
    <a href="#"><img src="images/sns1.png" alt="페이스북" /></a>
    <a href="#"><img src="images/sns2.png" alt="인스타그램" /></a>
    <a href="#"><img src="images/sns3.png" alt="트위터" /></a>
  </div>
</footer>

style.css

footer {
  display: flex;
  height: 100px;
  align-items: center;
  background: #eee;
}
footer .footerLogo {
  display: block;
  width: 200px;
  height: 40px;
  font-size: 0px;
  color: transparent;
}
footer p {
  width: 70%;
  text-align: center;
}
footer .sns a img {
  display: inline-block;
  width: 20px;
  margin-left: 20px;
}

이렇게 A-1의 완성이 되었다..
이게 만드는 것보다 블로깅이 오래걸려서
처음에는 A-1,2,3,4/ B-1,2,3,4 ... / E -1,2,3,4 이렇게 하려고 했는데...
그랬다가는 내년 시험을 보게 될 거 같아
다음 게시글부터는 각각 이벤트 부분만 따로 작성을 하도록 하려고 한다. ㅎ

~~삽질 그 잡채..~~