｢JUST 쇼핑몰｣ 웹사이트 개선을 위한 메인페이지 제작 실습

이 포스트는 JUST 쇼핑몰 웹사이트의 메인페이지 제작 실습을 다루고 있습니다. index.html 파일은 JUST 쇼핑몰의 메인 페이지를 구성하는 HTML 코드를 포함하고 있으며, style.css 파일은 해당 페이지의 스타일을 정의하고 있습니다. script.js 파일은 이미지 슬라이드, 모달 팝업 등과 같은 자바스크립트 기능을 구현하고 있습니다.

Dec 25, 2023

Contents

index.html style.css script.js result

index.html


<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <title>JUST 쇼핑몰</title>
  <!-- css 파일 연결 -->
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <main>
    <!-- 메뉴  -->
    <header>
      <a class="logo" href="#">
        <img src="resource/Header/logo.png">
      </a>
      <!-- 네비게이션 바 -->
      <nav>
        <ul class="mainMenu">
          <li><a href="#">탑</a>
            <ul class="submenu">
              <li><a href="#">블라우스</a></li>
              <li><a href="#">티</a></li>
              <li><a href="#">셔츠</a></li>
              <li><a href="#">니트</a></li>
            </ul>
          </li>
          <li><a href="#">아우터</a>
            <ul class="submenu">
              <li><a href="#">자켓</a></li>
              <li><a href="#">코트</a></li>
              <li><a href="#">가디건</a></li>
              <li><a href="#">머플러</a></li>
            </ul>
          </li>
          <li><a href="#">팬츠</a>
            <ul class="submenu">
              <li><a href="#">청바지</a></li>
              <li><a href="#">짧은바지</a></li>
              <li><a href="#">긴바지</a></li>
              <li><a href="#">레깅스</a></li>
            </ul>
          </li>
          <li><a href="#">악세서리</a>
            <ul class="submenu">
              <li><a href="#">귀걸이</a></li>
              <li><a href="#">목걸이</a></li>
              <li><a href="#">반지</a></li>
              <li><a href="#">팔찌</a></li>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <!-- 이미지 슬라이드 -->
    <div id="imgSlide">
      <a href="#">
        <img src="resource/Slide/img1.jpg">
        <span class="imgText">쇼핑몰 홈페이지 새단장</span>
      </a>
      <a href="#">
        <img src="resource/Slide/img2.jpg">
        <span class="imgText">이달의 쇼핑 이벤트</span>
      </a>
      <a href="#">
        <img src="resource/Slide/img3.jpg">
        <span class="imgText">장바구니 할인 이벤트</span>
      </a>
    </div>
    <!-- 컨텐츠 -->
    <div class="contents">
      <div>
        <!-- 탭 메뉴(공지사항/갤러리) -->
        <ul class="tabMenu">
          <li class="active">
            <a href="#">공지사항</a>
            <div class="tabBG notice">
              <ul>
                <li><a href="#" class="open">신규회원 대상 할인 이벤트 안내
                    <span>2020.11.23</span>
                  </a>
                </li>
                <li><a href="#">S/S 시즌 신규 의류 신상품 안내
                    <span>2020.11.23</span>
                  </a>
                </li>
                <li><a href="#">반품/환불 규정에 대해 알려드립니다
                    <span>2020.11.23</span>
                  </a>
                </li>
                <li><a href="#">3월 재입고 품목을 알려드립니다
                    <span>2020.11.23</span>
                  </a>
                </li>
              </ul>
            </div>
          </li>
          <li>
            <a href="#">갤러리</a>
            <div class="tabBG gallery">
              <ul>
                <li>
                  <a href="#">
                    <img src="resource/Contents/gallery/icon1.jpg" alt="갤러리1">
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="resource/Contents/gallery/icon2.jpg" alt="갤러리2">
                  </a>
                </li>
                <li>
                  <a href="#">
                    <img src="resource/Contents/gallery/icon3.jpg" alt="갤러리3">
                  </a>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <!-- 배너 -->
      <div class="banner">
        <a href="#">배너</a>
      </div>
      <!-- 바로가기 -->
      <div class="direct">
        <a href="#">바로가기</a>
      </div>
    </div>
    <!-- 푸터 -->
    <footer>
      <div>
        <img src="./resource/Footer/footerLogo.png" alt="로고">
      </div>
      <div>
        COPYRIGHT © by WEBDESIGN. ALL RIGHTS RESERVED
      </div>
      <div>
        <a href="#">
          <img src="./resource/Footer/sns1.jpg">
        </a>
        <a href="#">
          <img src="./resource/Footer/sns2.jpg">
        </a>
        <a href="#">
          <img src="./resource/Footer/sns3.jpg">
        </a>
      </div>
    </footer>
  </main>
  <!-- 모달 -->
  <div id="modalWrap">
    <div class="modal">
      <h1>신규회원 대상 이벤트 안내</h1>
      <p>즐거운 쇼핑 환경을 위해 항상 노력하는 JUST 쇼핑몰입니다. 고객님들께 한 단계 더 나아가 보답하는 ON쇼핑몰이 되고자신규회원 대상 10% 할인 이벤트를 실시하고 있습니다. 웹과 모바일에서 모두 이용 가능하며, 수준 높은 서비스를 위해 앞으로도 꾸준히 노력할 것을 약속드립니다.</p>
      <button class="btn">닫기</button>
    </div>
  </div>
  <!-- 자바스크립트 파일 연결-->
  <script src="js/script.js"></script>
</body>

</html>

style.css


@charset "utf-8"; /* 인코딩 셋 명시적으로 지정 */

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

/* 바디 */
body {
  background: #ffffff;
  color: #222328;
  display: flex;
  justify-content: center;
  align-items: center;
}


/* 헤더 영역 */
header {
  width: 1200px;
  height: 100px;
  background: #723ffb;
  display: flex;
  justify-content: space-between; /* 요소 사이에 일정한 간격으로 가로 정렬 */
  flex-flow: row nowrap;  /* row가 부모 넓이보다 클 경우 다음 줄에 정렬 */
  text-align: center;
}
/* 로고 */
.logo{
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
a {
  text-decoration: none;
  display: block;
}
/* 네비게이션 바 */
nav {
  display: block;
}
/* 메인 메뉴 */
.mainMenu {
  width: 800px;
  height: 100%;
  display: flex;
  justify-content: space-between; 
  align-items: center;
}
.mainMenu li{
  display: flex;
  flex-direction: row;  /* flex 방향 지정 */
  flex-wrap: nowrap;
  overflow: hidden; /* 넘치는 부분 자르기 */
}
.mainMenu > li > a {
  width: 200px;
  display: flex; 
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
/* 서브 메뉴 */
.submenu {
  display: none;
  background: rgba(0,0,0,0.8);
  position: absolute;
  top: 70px;
  width: 200px;
  justify-content: center;
  align-items: center;
}
.submenu > li {
  font-size: 14px;
  height: 40px;
}
.submenu > li > a {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
.mainMenu li:hover .submenu{
  display: block;
  animation-name: showdown;
  animation-duration: 1s;
  z-index: 10;
}
@keyframes showdown { /* 서브메뉴가 메인메뉴 위에서 아래로 트랜스폼 */
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}


/* 이미지 슬라이드 */
#imgSlide{
  position: relative;
  height: 300px;
}
#imgSlide a{
  position: absolute;
  transition: all 1s;
}
img{
  overflow-clip-margin: content-box;
  overflow: clip;
}
.imgText {
  position: absolute;
  top: 40%;
  left: 40%;
  margin: -10px -50px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #ffffff;
  padding: 16px 100px;
  font-weight: bold;
}


/* 공지사항, 갤러리, 배너, 바로가기 묶음 */
.contents {
  height: 200px;
  margin: 10px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}


/* 탭 메뉴 */
.tabMenu {
  display: flex;
}
.tabMenu>li>a {
  padding: 0 10px;
  min-width: 85px;
  line-height: 30px;
  font-size: 14px;
  text-align: center;
  background: #eeeeee;
  border: 1px solid #dddddd;
}
.tabMenu>li.active>a {
  font-weight: bold;
  background-color: #ffffff;
}
.tabMenu>li.active div {
  border: 1px solid #dddddd;
  z-index: 1;
}
.tabBG {
  position: absolute;
  width: 33.3%;
  height: 168px;
  background: #ffffff;
}
/* 공지사항 */
.notice{
  border: 1px solid #ccc;
}
.notice ul {
  padding: 10px 0;
}
.notice ul li {
  padding: 8px 20px;
  margin: 0 10px;
  font-size: 14px;
}
.notice li span {
  float: right;
}
.notice li:nth-child(even) {
  background: rgba(114, 63, 251, 0.1);
}
/* 갤러리 */
.gallery{
  left: 0;
}
.gallery ul{
  display: flex;
  justify-content: space-around;  /* 요소들 주위에 동일한 간격으로 가로 정렬 */
  align-items: center;
  height: 100%;
}


/* 배너 */
.banner{
  background: url(../resource/Contents/banner/banner.jpg);
  margin: 0 15px;
}
.banner > a{
  position: absolute;
  width: 100px;
  padding: 14px 0;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(114, 63, 251, 0.5);
  top: 35%;
  left: 47%;
}
.banner a:hover{
  background-color: rgba(220, 220, 220, 0.5);
  color: #222328;
}
/* 바로가기 */
.direct{
  background: url(../resource/Contents/direct/direct.jpg);
}
.direct > a {
  position: absolute;
  width: 100px;
  padding: 14px 0;
  text-align: center;
  font-weight: bold;
  color: #ffffff;
  background-color: rgba(114, 63, 251, 0.5);
  top: 35%;
  left: 80%;
}
.direct a:hover{
  background-color: rgba(220, 220, 220, 0.5);
  color: #222328;
}


/* 푸터 */
footer {
  height: 100px;
  display: flex;
  justify-content: space-between;
  background: #222328;
}
footer div {
  display: flex;
  justify-content: center;
  align-items: center;
}
footer div:nth-child(1) {
  width: 20%;
  margin: 30px;
}
footer div:nth-child(2) {
  width: 60%;
  color: #777777;
  margin: 40px;
}
footer div:nth-child(3) img {
  border-radius: 50%;
  margin: 10px;
}


/* 모달 */
#modalWrap{
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
#modalWrap.active{
  display: block;
}
.modal{
  width: 450px;
  padding: 20px;
  margin-left: auto;
  margin-right: auto;
  transform: translateY(50%);
  background: #ffffff;
  border: 1px solid;
}
.modal > h1{
  margin: 10px 0;
  text-align: center;
}
.modal > p{
  text-align: justify;
}
.btn{
  width: 100%;
  padding: 10px;
  margin-top: 20px;
  background: #723ffb;
  color: #ffffff;
  border: 0;
  font-weight: bold;
  cursor: pointer;
}

script.js


// showSlides 함수의 변수 초기화
let current = 0;

// modalActive 함수의 변수 선언
let open = document.querySelector(".open");
let close = document.querySelector(".btn");
let modal = document.querySelector("#modalWrap");

// 공지사항/갤러리 선택지 가져오기
let items = document.querySelectorAll(".tabMenu > li");

// 창 열자마자 자바스크립트 실행
window.onload = function () {
    showSlides();
    modalActive();
    selectTab();
}

// tabMemu를 클릭으로 선택하는 함수
function selectTab() {
    items.forEach((item)=>{ // forEach를 통해 배열에 접근, 각각의 이벤트 등록
        item.addEventListener('click',()=>{
            items.forEach((e)=>{
                e.classList.remove('active');   /* 하나만 선택되도록 기존 효과 지우기 */
            });
            item.classList.add('active');   /* 선택한 개체만 효과 추가 */
        });
    });
}


// imgSlide를 자동 전환시키는 함수
function showSlides() {
    let imgSlide = document.querySelectorAll("#imgSlide > a");

    for (let i = 0; i < imgSlide.length; i++) {
        imgSlide[i].style.opacity = "0";
    }
    current++;
    if (current > imgSlide.length) {
        current = 1;
    }
    imgSlide[current - 1].style.opacity = "1";

    setTimeout(showSlides, 2000);
}

// modal을 팝업시키는 함수
function modalActive() {
    open.addEventListener("click", function () {
        modal.classList.add("active");
    });
    close.addEventListener("click", function () {
        modal.classList.remove("active");
    });
}