｢Vallery Festival｣ 홍보를 위한 웹사이트 메인 페이지 제작 실습

이 포스트는 "Vallery Festival"을 홍보하기 위한 웹사이트의 메인 페이지 제작 실습 내용을 담고 있습니다. HTML, CSS, JavaScript를 사용하여 로고, 사이드바, 이미지 슬라이드, 공지사항, 갤러리, 바로가기, 푸터 등의 요소를 구현하였습니다.

Dec 25, 2023

｢Vallery Festival｣ 홍보를 위한 웹사이트 메인 페이지 제작 실습

Contents

index.html style.css script.js result

index.html


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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <!-- 전체 웹페이지 영역 -->
  <div id="container">
    <!-- 헤더 -->
    <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="#">Festival소개</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>
            </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>
            </ul>
          </li>
        </ul>
      </nav>
    </header>
    <!-- 이미지 슬라이드, 공지사항, 갤러리, 바로가기, 푸터 묶음 -->
    <div class="bodyWrap">
      <!-- 이미지 슬라이드 -->
      <div id="imgSlide">
        <a href="#">
          <img src="resource/[Slide]/img2.jpg">
          <span class="imgText">Vallery Festival 2</span>
        </a>
        <a href="#">
          <img src="resource/[Slide]/img3.jpg">
          <span class="imgText">Vallery Festival 3</span>
        </a>
        <a href="#">
          <img src="resource/[Slide]/img1.jpg">
          <span class="imgText">Vallery Festival 1</span>
        </a>
      </div>
      <!-- 공지사항, 갤러리, 바로가기 묶음 -->
      <div id="contents">
        <!-- 공지사항 -->
        <div id="notice">
          <h4>공지사항</h4>
          <ul>
            <li><a href="#">Vallery Festival 공지사항1<span>2020.11.28</span></a></li>
            <li><a href="#">Vallery Festival 공지사항2<span>2020.11.28</span></a></li>
            <li><a href="#">Vallery Festival 공지사항3<span>2020.11.28</span></a></li>
            <li><a href="#">Vallery Festival 공지사항4<span>2020.11.28</span></a></li>
          </ul>
        </div>
        <!-- 갤러리 -->
        <div id="gallery">
          <h4>갤러리</h4>
          <ul>
            <li><a href="#"><img src="resource/Contents/gallery/icon1.jpg"></a></li>
            <li><a href="#"><img src="resource/Contents/gallery/icon2.jpg"></a></li>
            <li><a href="#"><img src="resource/Contents/gallery/icon3.jpg"></a></li>
          </ul>
        </div>
        <!-- 바로가기 -->
        <div id="direct">
          <a href="#">바로가기</a>
        </div>
      </div>
      <!-- 푸터 -->
      <footer>
        <!-- 로고 -->
        <div>
          <a href="#"><img src="./resource/Footer/footerLogo.png"></a>
        </div>
        <!-- 푸터 텍스트 -->
        <div>
          COPYRIGHTⓒ by WEBDESIGN. ALL RIGHTS RESERVED
        </div>
        <!-- 셀렉트박스 -->
        <div id="familySite">
          <select name="familySite">
            <option value="familySite1">패밀리사이트1</option>
            <option value="familySite2">패밀리사이트2</option>
            <option value="familySite3">패밀리사이트3</option>
          </select>
        </div>
      </footer>
    </div>
  </div>
  <!-- 모달 -->
  <div id="modalWrap">
    <div class="modal">
      <h1>타이틀</h1>
      <hr>
      <p>가나다라마바사아자차카타파하<br>
        ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
        0123456789</p>
        <button class="btn">닫기</button>
    </div>
  </div>
  <script src="js/script.js"></script>
</body>

</html>

style.css


* {
  margin: 0px;  /* 마진 초기화 */
  padding: 0px; /* 패딩 초기화 */
  box-sizing: border-box; /* 박스 영역은 테두리까지 */
}

#container {
  margin-left: 0; /* 왼쪽 정렬 */
  width: 1000px;  /* 너비 지정 */
  overflow: hidden;
}

a {
  text-decoration: none;
  text-align: center;
}

ul {
  list-style: none; /* 메뉴 스타일 지정 */
}

/* 헤더 영역 */
header {
  float: left;
  width: 20%;  /* 너비 */
  height: 670px;  /* 높이 */
  background-color: #ccc;
}
/* 로고 */
.logo{
  float: left;
  padding-top: 30px;
  padding-bottom: 30px;
}
/* 사이드바 */
nav{
  float: left;
  width: 100%;
}
/* 메인메뉴 */
.mainMenu>li{
  position: relative; /* 서브메뉴 플로팅 위한 position 설정 */
}
.mainMenu>li>a{
  display: block;
  background-color: #000;
  color: #fff;
  padding: 10px;
  font-weight: bold;
}
/* 서브메뉴 */
.subMenu{
  display: none;
  position: absolute; /* 플로팅 위해서 position 설정 */
  background-color: rgba(0, 0, 0, 0.5);
  margin: 0;
  left: 200px;
  top: 0px;
  width: 100%;
  text-align: center;
  font-weight: bold;
}
.subMenu>li{
  padding: 10px;
}
.subMenu>li>a{
  color: #fff;
}
/* 호버 시 애니메이션 설정 */
.subMenu>li:hover>a{
  color: #ff5733;
}
.mainMenu>li:hover>.subMenu{
  display: block;
  animation-name: show;
  animation-duration: 1s;
  z-index: 1;
}
@keyframes show {
  from{
    opacity: 0;
  }
  to{
    opacity: 1;
  }
}


/* 이미지슬라이드, 컨텐츠, 푸터 영역 */
.bodyWrap{
  float: right;
  width: 790px;
}
/* 이미지 슬라이드 */
#imgSlide{
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
}
#imgSlide a{
  position: absolute;
  transition: all 1s;
  overflow: hidden;
}
img{
  overflow-clip-margin: content-box;
  overflow: clip;
}
.imgText{
  position: absolute;
  top: 40%;
  left: 38%;
  margin: -10px -50px;
  background-color: rgba(0, 0, 0, 0.7);
  color: #fff;
  padding: 16px 100px;
  font-weight: bold;
}


/* 콘텐츠 영역 */
#contents{
  width: 100%;
  height: 200px;
  display: flex;
  justify-content: space-between; /* 요소 사이에 일정한 간격으로 가로 정렬 */
  margin-top: 10px;
  margin-bottom: 10px;
}
#contents>div{
  width: 33.3%; /* 각 영역 3등분 */
}
#contents h4{
  width: 33%;
  padding: 6px;
  background-color: #ff5733;
  text-align: center;
  cursor: pointer;
}
#contents ul{
  height: 168px;
  background-color: #fff;
  border: 1px solid #ddd;
  font-size: 12px;
}
/* 공지사항 */
#notice{
  padding-right: 10px;
}
#notice li{
  padding: 13px;
}
#notice li:nth-child(even){
  background-color: rgba(0, 0, 0, 0.05);  /* 짝수번째만 배경색 지정 */
}
#notice li span{
  float: right;
}
/* 갤러리 */
#gallery{
  padding-right: 10px;
}
#gallery ul{
  display: flex;
  justify-content: space-around;  /* 요소 주위에 일정한 간격으로 가로 정렬 */
  align-items: center;
  padding: 5px;
}
/* 바로가기 */
#direct{
  background: url("../resource/Contents/direct/direct.jpg") center center;
  overflow: hidden; /* 넘치는 부분 자르기 */
	display: flex;
	justify-content: center;  /* 컨테이너의 중앙으로 가로 정렬 */
	align-items: center;
}
#direct a{
  background: rgba(255, 87, 51, 0.6);
  color: #fff;
  padding: 10px;
}


/* 푸터 영역 */
footer{
  width: 100%;
  height: 100px;
  background-color: #777;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 30px 20px;
}
footer div:nth-child(1){
  opacity: 0.4;
}
footer div:nth-child(2){
  color: #fff;
}
#familySite>select{
 padding: 8px;
}


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

script.js


window.onload = function () { /* 문서가 준비된 이후 실행 */
  showSlides();
  showModal();
}

function showSlides() { /* 이미지 슬라이드 자동으로 실행하는 함수 */
  let current = 1;
  let imgSlide = document.getElementById("imgSlide");
  let images = imgSlide.getElementsByTagName('a');

  setInterval(() => {
    for (var i = 0; i < images.length; i++) {
      images[i].style.opacity = 0;
    }
    images[current - 1].style.opacity = 1;
    current++;
    if (current > images.length)
      current = 1;
  }, 3000);
}

function showModal(){ /* 모달 영역 표시하는 함수 */
  let modal = document.querySelector('#modalWrap');
  let notice = document.querySelector('#notice > ul > li:first-child');
  let button = document.querySelector('.btn');
  notice.onclick = function() {
      modal.classList.add("active");
  }
  button.onclick = function() {
      modal.classList.remove("active");
  }  
}