HTML & CSS 연습/waggy
waggy
별초롱언니
2025. 4. 23. 19:29
// dropdown
let main = document.querySelector("#mainList");
let sub = document.querySelector("#subList");
main.addEventListener("click",showSubList);
let cnt = 0;
function showSubList() {
cnt++;
if (cnt % 2 == 1) {
sub.classList.remove("display_none");
} else {
sub.classList.add("display_none");
}
}
// slider
let btns = document.querySelectorAll("label");
let slides = document.querySelectorAll(".slide");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click",sliding);
btns[i].addEventListener("click",changeColor);
}
let index = 0;
function sliding() {
index = parseInt (this.id.charAt(this.id.length-1));
slides.forEach(function(slide) {
slide.style.transform = `translateX(${index*(-100)}%)`;
});
}
function changeColor() {
btns.forEach(function(btn) {
btn.classList.remove('active');
});
this.classList.add('active');
}
// tab
let tab = document.querySelectorAll(".tab_button span");
let contents = document.querySelectorAll(".tab_content");
for (let i = 0; i < tab.length; i++) {
tab[i].addEventListener("click",showTabContent);
tab[i].addEventListener("click",tabChangeColor);
}
function showTabContent() {
let tabClass = this.id;
contents.forEach(function(content) {
if(tabClass === "all" || content.classList.contains(tabClass)) {
content.style.display = "block";
} else {
content.style.display = "none";
}
})
}
function tabChangeColor() {
tab.forEach(function(tab) {
tab.classList.remove('active');
});
this.classList.add('active');
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/705381df09.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./style.css">
<script src="./script.js" defer></script>
<title>waggy_conan</title>
</head>
<body>
<!-- 헤더 -->
<header>
<div class="container">
<!-- 헤더 왼쪽 -->
<div class="h_left">
shop by Category<i class="fa-solid fa-angle-down"></i>
</div>
<!-- 헤더 네비 -->
<div id="nav">
<ul>
<li>Home</li>
<li id="mainList">Pages<i class="fa-solid fa-caret-down"></i>
<ul id="subList" class="display_none">
<li>About Us</li>
<li>Shop</li>
<li>Single Product</li>
<li>Cart</li>
</ul>
</li>
<li>Shop</li>
<li>Blog</li>
<li>Contact</li>
<li>Others</li>
</ul>
</div>
<!-- 헤더 오른쪽 -->
<div class="h_right">
<i class="fa-solid fa-user"></i>
<i class="fa-solid fa-heart"></i>
<i class="fa-solid fa-cart-shopping"></i>
</div>
</div>
</header>
<!-- 메인 슬라이더 -->
<section id="main">
<div class="container">
<div class="slidebox">
<!-- 슬라이드 1 -->
<div class="slide">
<div class="slide_img">
<img src="./img/slider/banner-img.png" alt="슬라이드이미지1">
</div>
<div class="slide_text">
<p>SAVE 10 - 20 % OFF</p>
<h1>Best Destination <br>
For <span>Your Pets</span></h1>
<a href="#">SHOP NOW<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
<!-- 슬라이드 2 -->
<div class="slide">
<div class="slide_img">
<img src="./img/slider/banner-img2.png" alt="슬라이드이미지1">
</div>
<div class="slide_text">
<p>SAVE 10 - 20 % OFF</p>
<h1>Best Destination <br>
For <span>Your Pets</span></h1>
<a href="#">SHOP NOW<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
<!-- 슬라이드 3 -->
<div class="slide">
<div class="slide_img">
<img src="./img/slider/banner-img3.png" alt="슬라이드이미지1">
</div>
<div class="slide_text">
<p>SAVE 10 - 20 % OFF</p>
<h1>Best Destination <br>
For <span>Your Pets</span></h1>
<a href="#">SHOP NOW<i class="fa-solid fa-arrow-right"></i></a>
</div>
</div>
<div id="slidebtn">
<label id="label0"></label>
<label id="label1"></label>
<label id="label2"></label>
</div>
</div>
</div>
</section>
<!-- 탭 -->
<section id="tab">
<div class="container">
<div class="tab_top">
<div class="tab_title">
Pet Foodies
</div>
<div class="tab_button">
<span id="all">ALL</span>
<span id="cat">CAT</span>
<span id="dog">DOG</span>
<span id="bird">BIRD</span>
</div>
<div class="tab_right"><a href="#">SHOP NOW<i class="fa-solid fa-arrow-right"></i></a></div>
</div>
<div class="tab_bottom">
<div class="tab_contents">
<!-- 탭 컨텐츠 1 -->
<div class="tab_content all dog">
<div class="tab_content_img">
<img src="./img/tab/item1.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 2 -->
<div class="tab_content all dog">
<div class="tab_content_img">
<img src="./img/tab/item2.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 3 -->
<div class="tab_content all cat">
<div class="tab_content_img">
<img src="./img/tab/item3.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 4 -->
<div class="tab_content all cat bird">
<div class="tab_content_img">
<img src="./img/tab/item4.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 5 -->
<div class="tab_content all dog cat">
<div class="tab_content_img">
<img src="./img/tab/item5.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 6 -->
<div class="tab_content all bird">
<div class="tab_content_img">
<img src="./img/tab/item6.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 7 -->
<div class="tab_content all dog bird">
<div class="tab_content_img">
<img src="./img/tab/item7.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
<!-- 탭 컨텐츠 8 -->
<div class="tab_content all bird">
<div class="tab_content_img">
<img src="./img/tab/item8.jpg">
</div>
<div class="tab_content_text">
<h3>Grey Hoodie</h3>
<p>★★★★★<small>5.0</small></p>
<h4>$18.00</h4>
<a href="#">ADD TO CART</a>
<a href="#">♥</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- 푸터 -->
<footer>
<div class="container">
<div class="footer_top">
<!-- 푸터 첫번째 -->
<div class="f_first">
<div class="f_first_img">
<img src="./img/logo.png" alt="로고이미지">
</div>
<div class="f_first_text">
<p>subscribe to our newsletter to get <br>
updates about our grand offers.</p>
</div>
<div class="f_first_icon">
<i class="fa-brands fa-facebook-f facebook"></i>
<i class="fa-brands fa-twitter"></i>
<i class="fa-brands fa-pinterest"></i>
<i class="fa-brands fa-square-instagram"></i>
<i class="fa-brands fa-youtube"></i>
</div>
</div>
<!-- 푸터 두번째 -->
<div class="second">
<h1 class="f_title">Quick Links</h1>
<ul>
<li>Home</li>
<li>About us</li>
<li>Offer</li>
<li>Services</li>
<li>Conatct us</li>
</ul>
</div>
<!-- 푸터 세번째 -->
<div class="third">
<h1 class="f_title">Help Center</h1>
<ul>
<li>FAQs</li>
<li>Payment</li>
<li>Returns & Refunds</li>
<li>Checkout</li>
<li>Delivery Information</li>
</ul>
</div>
<!-- 푸터 네번째 -->
<div class="fourth">
<div>
<h1 class="f_title">Our newsletter</h1>
</div>
<div class="f_first_text">
<p>subscribe to our newsletter to get <br>
updates about our grand offers.</p>
</div>
<div class="fourth_email">
<input type="text" placeholder="Enter Your Email Here"><img src="./img/cursor.svg">
</div>
</div>
</div>
<hr>
<!-- 푸터 하단 -->
<div class="footer_bottom">
<div class="fb_left">
<p>2023 Waggy.All rights reserved.</p>
</div>
<div class="fb_right">
<p>free HTML Template by <strong>TemplatesJungle</strong>
Distributed by <strong>ThemeWagon</strong></p>
</div>
</div>
</div>
</footer>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
.container {
width: 70%;
margin: 0 auto;
}
/* 헤더 */
header .container {
display: flex;
justify-content: space-between;
margin-top: 20px;
margin-bottom: 20px;
}
/* 헤더 네비 */
#nav > ul{
display: flex;
}
#nav > ul > li {
padding-right: 30px;
}
#mainList {
position: relative;
}
#mainList > i {
padding-left: 5px;
}
#subList {
position: absolute;
width: 200px;
top: 130%;
border: 2px solid lightgray;
background-color: white;
line-height: 3;
border-radius: 10px;
padding: 10px 50px 10px 20px;
}
.display_none {
display: none;
}
.h_right i{
padding-right: 30px;
}
/* 슬라이더 */
#main {
background-image: url(./img/slider/background-img.png);
}
.slidebox {
white-space: nowrap;
width: 100%;
font-size: 0;
overflow: hidden;
}
.slide {
display: inline-block;
position: relative;
width: 100%;
}
.slide img {
width: 50%;
margin-top: 50px;
}
.slide_text {
position: absolute;
top: 50%;
left: 60%;
font-size: 16px;
}
.slide_text p {
color: #dead6f;
font-size: 10px;
}
.slide_text h1 {
font-size: 50px;
font-weight: 300;
margin-bottom: 30px;
}
.slide_text > h1 > span {
color: #dead6f;
}
.slide_text a {
border: 1px solid black;
padding: 15px 40px;
font-size: 12px;
}
#slidebtn label{
border: 1px solid black;
padding: 7px;
border-radius: 50%;
margin-right: 10px;
}
#slidebtn {
display: flex;
justify-content: center;
margin: 50px 0;
}
#slidebtn label.active {
background-color: pink;
}
/* 탭 */
/* 탭 상단 */
#tab {
margin-bottom: 100px;
}
.tab_top {
display: flex;
justify-content: space-between;
align-items: center;
margin: 20px 0;
}
.tab_title {
font-size: 45px;
}
.tab_button {
cursor: pointer;
}
.tab_button .active {
border-color: #dead6f;
}
.tab_button span {
margin-right: 30px;
border-bottom: 2px solid gray;
}
.tab_right a {
border: 1px solid black;
padding: 15px 35px;
font-size: 14px;
}
/* 탭 하단 컨텐츠 */
.tab_contents {
display: flex;
flex-wrap: wrap;
}
.tab_content {
width: 25%;
margin-bottom: 50px;
}
.tab_content_img img {
border-radius: 20px;
}
.tab_content_text h3 {
font-size: 25px;
line-height: 2;
}
.tab_content_text p {
color: #dead6f;
}
.tab_content_text p > small {
color: black;
}
.tab_content_text h4 {
color: #dead6f;
font-size: 25px;
font-weight: 400;
margin-bottom: 20px;
}
.tab_content_text a {
border: 1px solid gray;
padding: 10px 20px;
font-size: 20px;
margin-right: 20px;
}
/* 푸터 */
footer .footer_top {
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.f_first_icon i{
border: 1px solid gray;
color: gray;
padding: 5px;
border-radius: 50%;
margin-top: 10px;
margin-right: 3px;
}
.f_first_icon .facebook {
padding: 5px 8px;
}
.f_title {
font-weight: 300;
}
.second > ul > li,
.third > ul > li {
line-height: 2;
}
.fourth_email {
position: relative;
}
.fourth_email input {
margin: 10px 0;
padding: 10px 40px 10px 20px;
border-radius: 30px;
border: 1px solid gray;
}
.fourth_email > img {
position: absolute;
top: 13px;
right: 23px;
width: 30px;
background-color: #dead6f;
border-radius: 50%;
padding: 5px;
}
/* 푸터바텀 */
footer .footer_bottom {
display: flex;
justify-content: space-between;
padding: 10px 0;
}
.fb_right strong {
border-bottom: 1px solid black;
}