찾다

집 >웹 프론트엔드 >JS 튜토리얼 >미식가 햄버거 웹사이트 구축

미식가 햄버거 웹사이트 구축

WBOY
WBOY원래의
2024-08-31 06:35:06257검색

Build a Foodie Hamburger Website

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Foodie Hamburger 웹사이트를 공유하게 되어 기쁩니다. 이 프로젝트는 다양한 버거 옵션을 보여주는 시각적으로 매력적이고 기능적인 웹사이트를 구축하려는 사람들에게 적합합니다. HTML, CSS 및 JavaScript를 사용하여 프런트엔드 개발 기술을 향상시키는 동시에 사용자에게 즐거운 웹 경험을 제공할 수 있는 좋은 방법입니다.

프로젝트 개요

Foodie Hamburger 웹사이트는 다양한 버거 메뉴와 특별 혜택을 선보이기 위해 설계된 웹 애플리케이션입니다. 깔끔하고 모던한 디자인으로 Top Picks, Whopper, Stunner Menu, New Foodie Collection, Deal of the Day 등 다양한 섹션을 쉽게 탐색할 수 있습니다. 이 프로젝트는 대화형이며 미학적으로 만족스러운 웹사이트를 만드는 방법을 보여줍니다.

특징

  • 인터랙티브 내비게이션: 더 나은 사용성을 위해 작은 화면에서 축소 및 확장되는 햄버거 메뉴입니다.
  • 반응형 디자인: 웹사이트가 데스크톱과 모바일 기기 모두에서 멋지게 보이도록 보장합니다.
  • 깔끔한 레이아웃: 다양한 버거 옵션과 특별 할인 상품을 시각적으로 매력적으로 표시하는 방법을 제공합니다.

사용된 기술

  • HTML: Foodie Hamburger 웹사이트의 구조를 제공합니다.
  • CSS: 현대적이고 반응이 빠른 디자인을 만들기 위해 웹사이트 스타일을 지정합니다.
  • JavaScript: 햄버거 메뉴 기능을 포함한 대화형 요소를 관리합니다.

프로젝트 구조

프로젝트 구조 개요는 다음과 같습니다.

Foodie-Hamburger/
├── index.html
├── style.css
└── script.js
  • index.html: Foodie Hamburger 웹사이트의 HTML 구조를 포함합니다.
  • style.css: CSS 스타일을 포함하여 매력적이고 반응이 빠른 디자인을 만듭니다.
  • script.js: 햄버거 메뉴와 같은 웹사이트의 대화형 요소를 관리합니다.

설치

프로젝트를 시작하려면 다음 단계를 따르세요.

  1. 저장소 복제:

    git clone https://github.com/abhishekgurjar-in/Foodie-Hamburger.git

  2. 프로젝트 디렉토리 열기:

    cd Foodie-Hamburger

  3. 프로젝트 실행:

    • Foodie Hamburger 웹사이트를 보려면 웹 브라우저에서 index.html 파일을 엽니다.

용법

  1. 웹사이트를 엽니다 웹 브라우저에서
  2. 상단 메뉴나 작은 화면의 햄버거 메뉴를 사용하여 섹션을 탐색하세요.
  3. 다양한 버거 옵션과 특별 할인 상품을 살펴보세요.
  4. 햄버거 메뉴 아이콘을 클릭하면 작은 화면에서 탐색 기능을 열거나 닫을 수 있습니다.

코드 설명

HTML

index.html 파일은 탐색, 다양한 버거 옵션 섹션, 바닥글을 포함하여 Foodie Hamburger 웹사이트의 구조를 정의합니다. 다음은 일부 내용입니다.



  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Foodie Hamburger</title>
  <link href="https://fonts.googleapis.com/css?family=Poppins:100,100italic,200,200italic,300,300italic,regular,italic,500,500italic,600,600italic,700,700italic,800,800italic,900,900italic" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
  <script src="./script.js" defer></script>


  <div class="main-content">
    <header>
      <div class="header-content">
        <div class="미식가 햄버거 웹사이트 구축">
          <img src="./images/%EB%AF%B8%EC%8B%9D%EA%B0%80%20%ED%96%84%EB%B2%84%EA%B1%B0%20%EC%9B%B9%EC%82%AC%EC%9D%B4%ED%8A%B8%20%EA%B5%AC%EC%B6%95.svg" alt="미식가 햄버거 웹사이트 구축">
        </div>
        <div class="hamburger-menu-container">
          <div class="hamburger-menu">
            <span class="hamburger-icon">☰</span>
          </div>
        </div>
        <nav>
          <span class="close-icon">×</span>
          <a href="#top-picks">Top Picks</a>
          <a href="#whooper">Whopper</a>
          <a href="#stunner-menu">Stunner Menu</a>
          <a href="#new-foodie-collection">New Foodie Collection</a>
          <a href="#deal-of-the-day">Deal of the Day</a>
        </nav>
      </div>
    </header>
    <main>
      <section class="hero-section">
        <div class="img-container">
          <img src="./images/hero-image.png" alt="hero-image">
        </div>
        <p>Well, You can’t resist anymore!</p>
      </section>
      <section id="top-picks" class="section">
        <h2>Top Picks</h2>
        <div class="img-container">
          <img src="./images/burger-1.png" alt="burger-1">
        </div>
      </section>
      <section id="whooper" class="section">
        <h2>Whopper</h2>
        <div class="img-container">
          <img src="./images/burger-2.png" alt="burger-2">
        </div>
      </section>
      <section id="stunner-menu" class="section">
        <h2>Stunner Menu</h2>
        <div class="img-container">
          <img src="./images/burger-3.png" alt="burger-3">
        </div>
      </section>
      <section id="new-foodie-collection" class="section">
        <h2>New Foodie Collection</h2>
        <div class="img-container">
          <img src="./images/burger-4.png" alt="burger-4">
        </div>
      </section>
      <section id="deal-of-the-day" class="section">
        <h2>Deal of the Day</h2>
        <div class="img-container">
          <img src="./images/burger-5.png" alt="burger-5">
        </div>
      </section>
      <footer>
        <h3 class="go-to-top"><a href="#">Go to Top</a></h3>
        <p class="footer-text">Made with ❤️ by Abhishek Gurjar</p>
      </footer>
    </main>
  </div>

CSS

style.css 파일은 Foodie Hamburger 웹사이트의 스타일을 지정하여 시각적으로 매력적이고 반응성이 뛰어납니다. 다음은 몇 가지 주요 스타일입니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #f6f0eb;
  font-family: 'Poppins', sans-serif;
}

.main-content {
  overflow-x: hidden;
  height: 100vh;
  scroll-behavior: smooth;
}

a {
  text-decoration-line: none;
  color: inherit;
}

header {
  background-color: #fff;
  padding: 24px;
}

.header-content {
  max-width: 1290px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

nav {
  display: flex;
  /* gap: 60px; */
}

nav a {
  font-weight: 700;
  font-size: 20px;
  color: #492118;
}

nav a + a {
  margin-left: 60px;
}

.미식가 햄버거 웹사이트 구축 {
  width: 50px;
}

img {
  width: 100%;
}

main {
  padding: 0 24px;
}

.hero-section {
  margin-top: 100px;
}

.img-container {
  max-width: 1290px;
  margin: 0 auto;
}

.hero-section p {
  color: #492118;
  text-align: center;
  font-size: 24px;
}

.section {
  margin-top: 120px;
}

.section .img-container {
  max-width: 960px;
}

.section h2 {
  font-weight: 700;
  font-size: 48px;
  color: #492118;
  text-align: center;
}

.go-to-top {
  text-align: right;
  max-width: 960px;
  margin: 0 auto;
  font-size: 32px;
  margin-top: 80px;
}

.go-to-top a {
  text-decoration-line: underline;
}

.footer-text {
  text-align: center;
  color: #858585;
  font-size: 24px;
  margin-top: 64px;
}

.close-icon {
  position: absolute;
  top: 8px;
  right: 12px;
  cursor: pointer;
  display: none;
}

.hamburger-menu-container {
  overflow: hidden;
  position: relative;
  width: 40px;
  height: 40px;
  display: none;
}

.hamburger-menu {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: -64px;
  right: -58px;
  background-color: white;
  cursor: pointer;
}

.hamburger-icon {
  font-size: 16px;
  position: absolute;
  bottom: 10px;
  left: 20px;
}

@media (max-width: 1200px) {
  nav a {
    font-size: 16px;
  }

  nav a + a {
    margin-left: 48px;
  }

  header {
    padding: 16px 24px;
  }
}

@media (max-width: 960px) {
  nav a {
    font-size: 12px;
  }

  nav a + a {
    margin-left: 32px;
  }

  .hero-section {
    margin-top: 32px;
  }

  .section {
    margin-top: 42px;
  }

  .hero-section p {
    font-size: 10px;
  }

  .section h2 {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  header {
    background-color: #f6f0ebb7;
    backdrop-filter: blur(8px);
    position: sticky;
    top: 0;
    padding: 8px 24px;
  }

  .header-content {
    min-height: 40px;
  }

  nav {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    flex-direction: column;
    padding: 24px;
    right: -200px;
    top: 16px;
    transition: right 0.25s ease-in-out;
    /* display: none; */
  }

  nav a + a {
    margin: 0;
    margin-top: 16px;
  }

  .close-icon,
  .hamburger-menu-container {
    display: block;
  }

  .menu-open nav {
    /* display: flex; */
    right: 24px;
  }

  .menu-open .hamburger-menu-container {
    display: none;
  }

  .go-to-top {
    font-size: 12px;
    margin-top: 40px;
  }

  .footer-text {
    font-size: 10px;
    margin-top: 32px;
  }

  .미식가 햄버거 웹사이트 구축 {
    width: 30px;
  }
}

자바스크립트

script.js 파일에는 사용자 입력 탭 전환에 따른 메뉴 표시줄 팝업 로직이 포함되어 있습니다. 다음은 일부 내용입니다.

const hamburgerIcon = document.querySelector('.hamburger-menu-container');
const headerContent = document.querySelector('.header-content');
const closeIcon = document.querySelector('.close-icon');
const nav = document.querySelector('nav');

hamburgerIcon.addEventListener('click', (e) => {
  e.stopPropagation();
  headerContent.classList.add('menu-open');
});

nav.addEventListener('click', (e) => {
  e.stopPropagation();
});

closeIcon.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

window.addEventListener('click', () => {
  headerContent.classList.remove('menu-open');
});

라이브 데모

여기에서 Foodie Hamburger 웹사이트 프로젝트의 라이브 데모를 확인하실 수 있습니다.

결론

Foodie Hamburger 웹사이트 구축은 시각적으로 매력적이고 대화형인 웹 경험을 만들 수 있는 환상적인 기회였습니다. 이 프로젝트는 다양한 버거 옵션과 특별 할인을 선보이며 사용자에게 즐거운 탐색 경험을 제공합니다. HTML, CSS 및 JavaScript를 적용하여 필수 프런트엔드 개발 기술을 강조하는 반응형 및 사용자 친화적인 웹사이트를 만들었습니다. 이 프로젝트가 여러분이 매력적인 웹 경험을 구축하는 창의적인 방법을 탐구하는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.

작가

  • 아비셰크 구자르
    • GitHub 프로필

위 내용은 미식가 햄버거 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript css html for while Directory using Collection JS this display input github
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：모기지 계산기 웹사이트 구축다음 기사：모기지 계산기 웹사이트 구축

관련 기사

더보기