안녕하세요, 개발자 여러분! 저의 최신 프로젝트인 Snap 웹사이트를 선보이게 되어 기쁩니다. 이 프로젝트는 HTML, CSS 및 JavaScript를 사용하여 직관적인 디자인과 대화형 기능을 갖춘 현대적인 반응형 웹사이트를 구축하려는 사람들에게 적합합니다. 시각적으로 매력적이고 기능적인 웹페이지를 만들면서 프런트엔드 개발 기술을 향상시킬 수 있는 좋은 방법입니다.
Snap 웹사이트는 깔끔하고 전문적인 레이아웃으로 제품이나 서비스를 선보일 수 있도록 설계된 단일 페이지 웹사이트입니다. 이 프로젝트는 모든 기기에서 멋지게 보이는 반응형 및 대화형 웹 페이지를 만드는 방법을 보여줍니다.
프로젝트 구조 개요는 다음과 같습니다.
Snap-Website/ ├── index.html ├── style.css └── script.js
프로젝트를 시작하려면 다음 단계를 따르세요.
저장소 복제:
git clone https://github.com/abhishekgurjar-in/Snap-Website.git
프로젝트 디렉토리 열기:
cd Snap-Website
프로젝트 실행:
index.html 파일은 탐색, 콘텐츠 섹션, 대화형 요소를 포함하여 Snap 웹사이트의 구조를 정의합니다. 다음은 일부 내용입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<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>
</head>
<body>
<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>
</body>
</html>
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 웹사이트 구축은 반응형 및 대화형 웹페이지를 만드는 기술을 향상시킬 수 있는 귀중한 학습 경험이었습니다. 이 프로젝트는 현대적인 웹 디자인과 개발의 훌륭한 예이며, 여러분이 자신만의 반응형 웹사이트를 만드는 데 영감을 주기를 바랍니다. 즐거운 코딩하세요!
이 프로젝트는 웹 개발에 대한 지속적인 학습 여정의 일환으로 개발되었습니다.
위 내용은 스냅 웹사이트 구축의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
