스냅 웹사이트 구축

소개

안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Snap 웹사이트를 선보이게 되어 기쁩니다. 이 프로젝트는 HTML, CSS 및 JavaScript를 사용하여 직관적인 디자인과 대화형 기능을 갖춘 현대적인 반응형 웹사이트를 구축하려는 사람들에게 적합합니다. 시각적으로 매력적이고 기능적인 웹페이지를 만들면서 프런트엔드 개발 기술을 향상시킬 수 있는 좋은 방법입니다.

프로젝트 개요

Snap 웹사이트는 깔끔하고 전문적인 레이아웃으로 제품이나 서비스를 선보일 수 있도록 설계된 단일 페이지 웹사이트입니다. 이 프로젝트는 모든 기기에서 멋지게 보이는 반응형 및 대화형 웹 페이지를 만드는 방법을 보여줍니다.

특징

• 반응형 디자인: 웹사이트는 완벽하게 반응하므로 데스크톱과 모바일 기기 모두에서 멋지게 보입니다.
• 상호작용 요소: 드롭다운 메뉴와 호버 효과를 포함하여 사용자 상호작용을 향상합니다.
• 현대 미학: 세련된 글꼴과 미니멀한 디자인 원칙을 사용하여 현대적인 스타일로 스타일링했습니다.

사용된 기술

• HTML: Snap 웹사이트의 구조를 제공합니다.
• CSS: 시각적으로 매력적이고 사용자 친화적이도록 웹사이트 스타일을 지정합니다.
• JavaScript: 드롭다운 메뉴, 호버 효과 등 웹사이트에 상호작용 기능을 추가합니다.

프로젝트 구조

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

Snap-Website/
├── index.html
├── style.css
└── script.js

• index.html: Snap 웹사이트의 HTML 구조를 포함합니다.
• style.css: CSS 스타일을 포함하여 현대적이고 반응이 빠른 디자인을 만듭니다.
• script.js: 드롭다운 메뉴와 같은 대화형 요소를 관리합니다.

설치

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

1. 저장소 복제:
   

   git clone https://github.com/abhishekgurjar-in/Snap-Website.git
   

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

   cd Snap-Website
   

3. 프로젝트 실행:

   • 웹 브라우저에서 index.html 파일을 열어 Snap 웹사이트를 확인하세요.

용법

1. 웹사이트를 엽니다 웹 브라우저에서
2. 드롭다운 메뉴와 상호작용하고 요소 위로 마우스를 가져가서 콘텐츠를 탐색하세요.
3. 브라우저 창 크기를 조정하거나 다른 기기에서 웹사이트를 열어 반응형 디자인을 보세요.

코드 설명

HTML

index.html 파일은 탐색, 콘텐츠 섹션, 대화형 요소를 포함하여 Snap 웹사이트의 구조를 정의합니다. 다음은 일부 내용입니다.

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


  <div class="container">
    <nav>
      <div class="logo"><img src="./images/logo.svg" alt="스냅 웹사이트 구축"></div>
      <div class="header">
        <p class="featuresDropdown">Features <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p class="companyDropdown">Company <span><img src="./images/icon-arrow-down.svg" alt="Arrow Down"></span></p>
        <p>Careers</p>
        <p>About</p>
      </div>
      <div class="login">
        <p>Login</p>
        <button>Register</button>
      </div>
    </nav>
    <div class="dropdown"></div>
    <div class="box">
      <div class="left-box">
        <h1>Make <br> remote work</h1>
        <p>Get your team in sync, no matter your location. Streamline processes, 
          create team rituals, and watch productivity soar.</p>
        <button>Learn more</button>
        <div class="client-image">
          <img src="./images/client-databiz.svg" alt="Databiz">
          <img src="./images/client-audiophile.svg" alt="Audiophile">
          <img src="./images/client-meet.svg" alt="Meet">
          <img src="./images/client-maker.svg" alt="Maker">
        </div>
      </div>
      <div class="right-box">
        <img src="./images/image-hero-desktop.png" alt="Hero Image">
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </div>

CSS

style.css 파일은 Snap 웹사이트의 스타일을 지정하여 매력적이고 사용하기 쉽게 만듭니다. 다음은 몇 가지 주요 스타일입니다.

* {
  box-sizing: border-box;
}

body {
  font-family: Epilogue;
  margin: 0;
  padding: 0;
}

.container {
  max-width: 1440px;
  margin: auto;
}

nav {
  margin: 20px;
  width: 88%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 90px;
}

.header {
  display: flex;
  gap: 20px;
}

.login {
  display: flex;
  align-items: center;
  gap: 20px;
}

.login button {
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  padding-inline: 14px;
  padding-block: 8px;
  color: gray;
  border: 1px solid gray;
  cursor: pointer;
}

.login button:hover {
  color: black;
}

nav p {
  color: gray;
  cursor: pointer;
}

nav p:hover {
  color: black;
}

.box {
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
  margin: 70px;
}

.left-box {
  width: 50%;
}

.left-box h1 {
  font-size: 90px;
}

.left-box p {
  font-size: 17px;
}

.left-box button {
  font-size: 22px;
  margin-top: 100px;
  padding: 12px;
  background-color: black;
  color: white;
  border-radius: 19px;
  cursor: pointer;
}

.left-box button:hover {
  background-color: white;
  color: black;
}

.right-box img {
  width: 50%;
  max-width: 480px;
}

.client-image {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 80px;
}

.feature-dropdown {
  position: fixed;
  background-color: white;
  width: 170px;
  left: 425px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.feature-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.company-dropdown {
  position: fixed;
  width: 140px;
  left: 580px;
  background-color: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  color: gray;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.3);
}

.company-dropdown p:hover {
  color: black;
  cursor: pointer;
}

.footer {
  margin: 30px;
  text-align: center;
}

@media (max-width: 800px) {
  .box {
    flex-direction: column;
    align-items: center;
    gap: 100px;
  }

  nav {
    align-items: flex-start;
    gap: 50px;
  }

  .header {
    flex-direction: column;
  }

  .client-image {
    flex-direction: column;
    gap: 80px;
  }
}

자바스크립트

script.js 파일에는 드롭다운 메뉴와 대화형 요소에 대한 논리가 포함되어 있습니다. 다음은 일부 내용입니다.

const featuresDropdown = document.getElementsByClassName("featuresDropdown")[0];
const companyDropdown = document.getElementsByClassName("companyDropdown")[0];
const dropdown = document.getElementsByClassName("dropdown")[0];

featuresDropdown.addEventListener("mouseover", () => {
    const featureDiv = document.createElement('div');
    featureDiv.classList.add("feature-dropdown");
    featureDiv.innerHTML = `
        <p><span><img src="./images/icon-todo.svg" alt=""></span>   Todo List</p>
        <p><span><img src="./images/icon-calendar.svg" alt=""></span>   Calendar</p>
        <p><span><img src="./images/icon-reminders.svg" alt=""></span>   Reminders</p>
        <p><span><img src="./images/icon-planning.svg" alt=""></span>   Planning</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(featureDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

companyDropdown.addEventListener("mouseover", () => {
    const companyDiv = document.createElement('div');
    companyDiv.classList.add("company-dropdown");
    companyDiv.innerHTML = `
        <p>History</p>
        <p>Our Team</p>
        <p>Blog</p>
    `;
    dropdown.innerHTML = '';  // Clear any previous dropdown content
    dropdown.appendChild(companyDiv);
    dropdown.style.display = 'block';  // Show the dropdown
});

// To handle mouseout to hide dropdowns
featuresDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

companyDropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseout", () => {
    setTimeout(() => {
        if (!dropdown.matches(':hover') && !featuresDropdown.matches(':hover') && !companyDropdown.matches(':hover')) {
            dropdown.style.display = 'none';
        }
    }, 100);  // Timeout to ensure the mouseover event on the dropdown itself is registered
});

dropdown.addEventListener("mouseover", () => {
    dropdown.style.display = 'block';  // Keep the dropdown visible while hovering over it
});

라이브 데모

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

결론

Snap 웹사이트 구축은 반응형 및 대화형 웹페이지를 만드는 기술을 향상시킬 수 있는 귀중한 학습 경험이었습니다. 이 프로젝트는 현대적인 웹 디자인과 개발의 훌륭한 예이며, 여러분이 자신만의 반응형 웹사이트를 만드는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!

크레딧

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

작가

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

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