｢Dream Jeju｣ 여행사 웹사이트 메인 페이지 제작 실습

이 포스트는 "Dream Jeju" 여행사 웹사이트의 메인 페이지 제작 실습을 다루고 있습니다. HTML, CSS, JavaScript를 사용하여 로고, 네비게이션, 이미지 슬라이드 쇼, 탭 메뉴, 퀵 링크, 푸터 등을 구현하는 방법을 설명하고 있습니다.

Dec 25, 2023

Contents

index.html style.css slideshow.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"> <!-- css 파일 연결 -->
</head>
<body>
  <div id="container">
    <header>
      <div id="logo">
        <a href="index.html">
          <h1>Dream Jeju</h1>
        </a>
      </div>
      <nav>
        <ul id="topMenu">
          <li><a href="#">단체 여행 <span>▼</span></a>
            <ul>
              <li><a href="#">회사 연수</a></li>
              <li><a href="#">수학 여행</a></li>
            </ul>
          </li>
          <li><a href="#">맞춤 여행 <span>▼</span></a>
            <ul>
              <li><a href="#">4.3 평화 기행</a></li>
              <li><a href="#">곶자왈 체험</a></li>
              <li><a href="#">힐링 워크숍</a></li>
            </ul>
          </li>
          <li><a href="#">갤러리</a></li>
          <li><a href="#">문의하기</a></li>
        </ul>
      </nav>
    </header>
    <div id="slideShow">
      <div id="slides">
        <img src="images/photo-1.jpg" alt="">
        <img src="images/photo-2.jpg" alt="">
        <img src="images/photo-3.jpg" alt="">
        <button id="prev">&lang;</button>
        <button id="next">&rang;</button>
      </div>
    </div>
    <div id="contents">
      <div id="tabMenu">
        <input type="radio" id="tab1" name="tabs" checked>
        <label for="tab1">공지사항</label>
        <input type="radio" id="tab2" name="tabs">
        <label for="tab2">갤러리</label>

        <div id="notice" class="tabContent">
          <h2>공지사항 내용입니다.</h2>
          <ul>
            <li>사무실을 이전했습니다.</li>
            <li>[참가 모집] 카약 체험에 초대합니다.</li>
            <li>[참가 모집] 여름 방학 기간, 오름 체험단을 모집합니다.</li>
            <li>겨울, 추천 여행지</li>
            <li>가을, 추천 여행지</li>
          </ul>
        </div>
        <div id="gallery" class="tabContent">
          <h2>갤러리 내용입니다.</h2>
          <ul>
            <li><img src="images/img-1.jpg"></li>
            <li><img src="images/img-2.jpg"></li>
            <li><img src="images/img-3.jpg"></li>
            <li><img src="images/img-1.jpg"></li>
            <li><img src="images/img-2.jpg"></li>
            <li><img src="images/img-3.jpg"></li>
          </ul>
        </div>
      </div>
      <div id="links">
        <ul>
          <li>
            <a href="#">
              <span id="quick-icon1"></span>
              <p>평화 기행</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span id="quick-icon2"></span>
              <p>힐링 워크숍</p>
            </a>
          </li>
          <li>
            <a href="#">
              <span id="quick-icon3"></span>
              <p>문의하기</p>
            </a>
          </li>
        </ul>
      </div>
    </div>
    <footer>
      <div id="bottomMenu">
        <ul>
          <li><a href="#">회사 소개</a></li>
          <li><a href="#">개인정보처리방침</a></li>
          <li><a href="#">여행약관</a></li>
          <li><a href="#">사이트맵</a></li>
        </ul>
        <div id="sns">
          <ul>
            <li><a href="#"><img src="images/sns-1.png"></a></li>
            <li><a href="#"><img src="images/sns-2.png"></a></a></li>
            <li><a href="#"><img src="images/sns-3.png"></a></a></li>
          </ul>
        </div>
      </div>
      <div id="company">
        <p>제주특별자치도 ***동 ***로 (대표전화) 123-456-7890</p>
      </div>
    </footer>
  </div>
  <script src="js/slideshow.js"></script>   <!-- 자바스크립트 소스 파일과 html 문서 연결 -->
</body>
</html>

style.css


/* 구글 웹 폰트 적용 */
  @import url('https://fonts.googleapis.com/css2?family=Merienda:wght@700&display=swap');

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

  a {
    text-decoration: none;
  }

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

  #container {
    margin: 0 auto; /* 화면 중앙에 배치 */
    width: 1200px;  /* 너비 지정 */
  }

/* 헤더 영역 */
  header {
    width: 100%;  /* 너비 */
    height: 100px;  /* 높이 */
    background-color: #07c;
  }

/* 로고 영역 */
  #logo {
    float: left;  /* 왼쪽으로 플로팅 */
    width: 250px; /* 너비 */
    height: 100px;  /* 높이 */
    line-height: 100px; /* height 값과 같게 만들어서 세로로 중간에 오도록 맞춤 */
    padding-left: 20px; /* 왼쪽 패딩 지정 */
  }

  #logo h1 {
    font-family: 'Merienda', cursive; /* CSS rules to specify families */
    font-weight: 700;
    font-size: 40px;  /* 폰트 크기 */
    color: #fff;  /* 폰트 색상 */
    text-shadow: 0 -1px 0 #222; /* 그림자 색 */
  }

/* 네비게이션 영역 */
  nav {
    float: right; /* 오른쪽으로 플로팅 */
    width: 900px; /* 버니 */
    height: 100px;  /* 메뉴 영역 높이 */
    padding-top: 40px;  /* 메뉴를 아래로 내리기 위해 패딩 설정 */
  }

  #topMenu {
    height: 60px;
  }

  #topMenu>li {
    float: left;  /* 메뉴 항목을 왼쪽으로 플로팅 */
    position: relative; /* 서브메뉴를 absolute로 만들기 위해 부모를 relative로 지정 */
  }

  #topMenu>li>a {
    display: block; /* 링크 텍스트는 블록으로 */
    color: #fff;  /* 폰트 색상 */
    font-weight: 600; /* 폰트 굵기 */
    text-shadow: 0 1px #07c;  /* 그림자 추가 */
    padding: 20px 60px; /* 패딩 지정 */
  }

  #topMenu>li>a>span {
    font-size: 0.5em; /* 서브메뉴가 있는 항목에 화살표 표시 */
  }

  #topMenu>li>a:hover {
    color: #000;  /* 마우스 포인터를 올리면 색상 변경 */
    text-shadow: 0 -1px #07c; /* 글자가 굵어지지 않도록 지정 */
  }

  #topMenu>li>ul {
    display: none;  /* 서브메뉴를 초기에는 감춤 */
    position: absolute; /* 서브메뉴 포지셔닝 */
    width: 160px;
    background-color: rgba(255, 255, 255, 0.6); /* 배경 투명색 지정 */
    left: 20px; /* 서브메뉴 위치 중앙으로 조정 */
    margin: 0;
  }

  #topMenu>li>ul>li {
    padding: 10px 10px 10px 30px; /* 서브메뉴 항목 지정 */
  }

  #topMenu>li>ul>li>a {
    font-size: 14px;
    padding: 10px;
    color: #000;
  }

  #topMenu>li:hover>ul {
    display: block; /* 메인 메뉴 항목 위로 오버하면 서브메뉴 표시 */
    z-index: 10;  /* 슬라이드 쇼에 가리지 않게 조절 */
  }

  #topMenu>li>ul>li>a:hover {
    color: #f00;  /* 서브메뉴 마우스 오버하면 색상 바꾸기 */
  }

  /* 이미지 슬라이드 쇼 영역 */
  #slideShow {
    clear: both;  /* 플로팅 해제 */
    width: 100%;  /* 너비 */
    height: 300px;  /* 높이 */
    overflow: hidden; /* 영역 넘치면 감춤 */
    position: relative; 
  }

  #slides{
    position: absolute;
  }

  #slides > img{
    width: 100%;  /* 너비 */
    float: left;  /* 가로로 배치 */
  }

  button{
    position: absolute;
    height: 100%; /* 이미지 높이에 맞추기 */
    top: 0;;
    border: none; /* 테두리 없이 */
    padding: 20px;
    background-color: transparent;  /* 투명한 배경 지정 */
    color: #000;  /* 화살표를 검은색으로 지정 */
    font-weight: 800; /* 화살표를 굵게 지정 */
    font-size: 24px;  /* 화살표 크기 지정 */
    opacity: 0.5; /* 화살표를 반투명하게 지정 */
  }

  #prev{
    left: 0;  opacity: 0.5; /* 버튼을 왼쪽으로 붙이기 */
  }

  #next{
    right: 0; /* 버튼을 오른쪽으로 붙이기 */
  }

  button:hover{ /* 마우스 포인터를 올리면 */
    background-color: #222; /* 배경색은 짙은 회색으로 변경 */
    color: #fff; /* 흰색 화살표 */
    opacity: 0.6; /* 불투명도를 높임 */
    cursor: pointer; /* 커서를 포인터 모양으로 변경 */
  }

  button:focus{
    outline: 0; /* 아웃라인 없앰 */
  }

  /* 콘텐츠 영역 */
  #contents {
    width: 100%;  /* 너비 */
    height: 300px;  /* 높이 */
    margin-top: 20px; /* 위쪽에 마진 추가 */
  }

  /* 탭 메뉴 영역 */
  #tabMenu {
    float: left;  /* 왼쪽으로 플로팅 */
    width: 600px; /* 너비 */
    height: 100%; /* 높이 */
    margin-top: 10px; /* 탭 메뉴 위쪽에 여백 두기 */
  }

  #tabMenu input[type="radio"]{
    display: none;  /* 라디오 버튼 감춤 */
  }

  #tabMenu label{ /* 탭 제목 스타일 */
    display: inline-block;  /* 탭을 가로로 배치 */
    margin: 0 0;  
    padding: 15px 25px;
    font-weight: 600;
    text-align: center;
    color: #aaa;
    border: 1px solid transparent;
  }

  #tabMenu label:hover{ /* 마우스 포인터를 올렸을 때 탭 제목 스타일 */
    color: #222;
    cursor: pointer;
  }

  #tabMenu input:checked + label{ /* 활성화된 탭 제목 스타일 */
    color: #b00;
    border: 1px solid #ddd;
    background-color: #eee;
  }

  .tabContent{  /* 탭 내용 스타일 */
    display: none;
    padding: 20px 0 0;
    border-top: 1px solid #ddd;
  }

  .tabContent h2{
    display: none;
  }

  #notice ul{
    list-style: disc;
    margin-left: 30px;
  }

  #notice ul li{
    font-size: 16px;
    line-height: 2.5;
  }

  #gallery ul li{
    display: inline;  /* 이미지 가로로 배치 */
  }

  #tab1:checked ~ #notice,
  #tab2:checked ~ #gallery{ /* :뒤에는 공백 없어야함 */
    display:block;
  }

  /* 퀵 링크 영역 */
  #links {
    float: right; /* 오른쪽으로 플로팅 */
    width: 600px; /* 너비 */
    height: 100%; /* 높이 */
    margin-top: 15px; /* 위쪽에 마진 추가 */
  }

  #links ul{
    padding: 0; /* 패딩 */
    overflow: hidden; /* 넘치는 항목은 감춤 */
  }

  #links ul li{
    float: left;  /* 가로로 배치 */
    width: 33%; /* 세 항목의 영역을 균일하게 지정 */
    text-align: center; /* 가운데 정렬 */
    margin: 10px 0; /* 마진 */
  }

  #links ul li a span{
    display: block; /* 블록 레벨로 지정 */
    margin: 0 auto; /* 가운데 배치 */
    width: 150px; /* 가로 크기 */
    height: 150px;  /* 세로 크기 */
    border-radius: 100%;  /* 테두리  둥글게 지정 */
    border: 1px solid #ddd; /* 테두리 스타일 */
    line-height: 150px; /* 수직으로 중간에 오게 지정 */
  }

  #quick-icon1{
    background-image: url('../images/icon-1.jpg');  /* 이미지 접근 경로: 상위 이동 후 하위 폴더 접근 */
  }
  #quick-icon2{
    background-image: url('../images/icon-2.jpg');  
  }
  #quick-icon3{
    background-image: url('../images/icon-3.jpg');  
  }

  #links ul li a p{
    margin-top: 15px; /* 위쪽 마진 */
    font-weight: 600; /*  폰트 굵기 */
    color: #666;  /*  폰트 색상 */
  }

  /* 푸터 영역 */
  footer {
    width: 100%;  /* 너비 */
    height: 100px;  /* 높이 */
    border-top: 2px solid #222; /* 위쪽에 가로선 추가 */
  }

  #bottomMenu{
    width: 100%;
    height: 20px;
    position: relative; /* 부모 요소 position-relative */
  }

  #bottomMenu ul{
    margin-top: 15px;
  }

  #bottomMenu ul li{
    float: left;  /* 가로로 배치 */
    padding: 5px 20px;
    border-right: 1px solid #ddd; /* 항목 오른쪽에 세로선 */
  }

  #bottomMenu ul li:last-child{
    border-right: none; /* 마지막 항목에는 세로선 없음 */
  }

  #bottomMenu ul li a, #bottomMenu ul li a:visited{
    font-size: 15px;  /* 폰트 크기 */
    color: #666;  /* 폰트 색상 */
  }

  #sns{
    position: absolute; /* 자식 요소 position-absolute */
    right: 0; /* 오른쪽 끝에 배치 */
  }

  #sns ul li{
    border: none; /* 세로선 제거 */
    padding: 5px;
  }

  #company{
    clear: left;  /* 플로팅 해제 */
    margin-top: 25px; /* 위, 왼쪽 마진 */
    margin-left: 20px;
  }

  p{
    font-size: 14px; /* 폰트 크기 */
    color: #aaa;  /* 폰트 색상 */
  }

slideshow.js


let slides = document.querySelectorAll("#slides > img");
let prev = document.getElementById("prev");
let next = document.getElementById("next");

let current = 0;

showSlides(current);  // 현재 이미지 표시 
//showSlides1();
prev.onclick = prevSlide; // 이전 이미지 표시 
next.onclick = nextSlide; // 다음 이미지 표시 

function showSlides(n) {
  for (let i = 0; i < slides.length; i++) { // 배열의 처음부터 끝까지 반복 
    slides[i].style.display = "none"; // 모든 이미지를 화면에서 감춤 
  }
  slides[n].style.display = "block"; // n번째 이미지만 화면에 표시 
}

function prevSlide() {
  if (current > 0) {
    current -= 1;  // current 값이 0보다 크면 이전 위치로 
  } else {
    current = slides.length - 1; // 그렇지 않으면 첫번째 이미지이므로 마지막 위치로 
  }
  showSlides(current);
}

function nextSlide() {
  if (current < slides.length - 1) {
    current += 1; //  current 값이 2보다 작으면 다음 위치로
  }else{
    current = 0;  //  그렇지 않다면 마지막 이미지이므로 첫 번째 위치로 이동
  }
  showSlides(current);  //  이동한 위치릐 이미지 표시
}

// function showSlides1(){
//   let slides = document.querySelectorAll("#slides > img");
//   for(let i=0;i<slides.length;i++){
//     slides[i].style.display = "none";
//   }
//   current++;
//   if(current>slides.length){
//     current=1;
//   }
//   slides[current-1].style.display="block";
//   setTimeout(showSlides,2000);
// }