💻HTML / CSS / JavaScript

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

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

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);
// }

result

notion image
Share article

More articles

See more posts

[programmers] 각도기 - JavaScript

December 27, 2023
[programmers] 각도기 - JavaScript

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

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

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

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

[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 17장 연습문제

December 25, 2023
[Do it! HTML+CSS+자바스크립트 웹 표준의 정석] 17장 연습문제

👨🏻‍💻DriedPollack's Blog

RSS·Powered by Inblog