HTML & CSS 연습/coza
coza_slide
별초롱언니
2025. 4. 17. 10:22
<!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="./coza.slide.css">
<script src="./coza.js" defer></script>
<title>coza-conan</title>
</head>
<body>
<header>
<div class="top-bar">
<div class="container">
<div class="top-left">Free shipping for standard order over $100</div>
<ul class="top-right">
<li><a href="#">Help & FAQs</a></li>
<li><a href="#">My Account</a></li>
<li><a href="#">EN</a></li>
<li><a href="#">USD</a></li>
</ul>
</div>
</div>
</header>
<div class="wrap-menu">
<div class="wrap-top-left"><a href=""><img src="img/logo.png"></a>
<nav>
<ul class="wrap-top-nav">
<li><a class="homecolor" href="#">Home</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="wrap-top-right">
<a class="top-icon" href="#"><i class="fa-solid fa-magnifying-glass"></i></a>
<a class="top-icon" href="#"><i class="fa-solid fa-cart-shopping"></i></a>
<a class="top-icon" href="#"><i class="fa-solid fa-heart"></i></a>
</div>
</div>
<!-- main -->
<div class="slidebox">
<div class="slide">
<div class="text-box">
<div>
<p>Women Collection 2018</p>
</div>
<div>
<h1>NEW SEASON</h1>
</div>
<a href="#">SHOP NOW</a>
</div>
<img src="./img/slide-01.jpg">
</div>
<div class="slide">
<div class="text-box">
<div>
<p>Men New-Season</p>
</div>
<div>
<h1>JACKETS & COATS</h1>
</div>
<a href="#">SHOP NOW</a>
</div>
<img src="./img/slide-02.jpg">
</div>
<div class="slide">
<div class="text-box">
<div>
<p>Men Collection 2018</p>
</div>
<div>
<h1>NEW ARRIVALS</h1>
</div>
<a href="#">SHOP NOW</a>
</div>
<img src="./img/slide-03.jpg">
</div>
<div id="slidebtn">
<i class="fa-solid fa-chevron-left left"></i>
<i class="fa-solid fa-chevron-right right"></i>
</div>
</div>
<section id="category" class="container">
<div>
<a class="categoryimg1" href="#">
<h1>Women</h1>
<p><small>Spring 2025</small></p>
</a>
</div>
<div>
<a class="categoryimg2" href="#">
<div class="category-text">
<h2>Men</h2>
<p><small>Spring 2025</small></p>
</div>
</a>
</div>
<div>
<a class="categoryimg3" href="#">
<h2>Accessories</h2>
<p><small>New Trend</small></p>
</a>
</div>
</section>
<section class="view-name">
<h2>PRODUCT OVERVIEW</h2>
<div class="view-nav">
<!-- 탭메뉴 -->
<ul class="view-nav-left" id="tab">
<li id="all">All Products</li>
<li id="women">Women</li>
<li id="men">Men</li>
<li id="bag">Bag</li>
<li id="shoes">Shoes</li>
<li id="watches">Watches</li>
</ul>
<div class="view-nav-right">
<a href="#"><i class="fa-solid fa-filter"></i>Filter</a>
<a href="#"><i class="fa-solid fa-magnifying-glass"></i>Search</a>
</div>
</div>
</section>
<section class="overview">
<div class="overview-img all women">
<img src="img/women1.jpg" width="300px">
<div class="overview_content">
<span>Esprit Ruffle Shirt</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$16.64</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women2.jpg" width="300px">
</div>
<div class="overview_content">
<span>Horschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$35.31</div>
</div>
<div class="overview-img all men">
<div>
<img src="img/Men1.jpg" width="300px">
</div>
<div class="overview_content">
<span>Esprit Ruffle Shirt</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$25.50</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women3.jpg" width="300px">
</div>
<div class="overview_content">
<span>Classic Trench coat</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$75.00</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women4.jpg" width="300px">
</div>
<div class="overview_content">
<span>Front Pocket Jumper</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$34.75</div>
</div>
<div class="overview-img all watches">
<div>
<img src="img/watches1.jpg" width="300px">
</div>
<div class="overview_content">
<span>Vintage Inspired Classic</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$93.20</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women5.jpg" width="300px">
</div>
<div class="overview_content">
<span>Shirt in Stretch Cotton</span>
<span<i class="fa-solid fa-heart"></i></span>
</div>
<div>$52.66</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women6.jpg" width="300px">
</div>
<div class="overview_content">
<span>Pieces Metallic Printed</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$18.96</div>
</div>
<div class="overview-img all shoes">
<div>
<img src="img/shoes.jpg" width="300px">
</div>
<div class="overview_content">
<span>Converse All Star Hi Plimsolls</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$75.00</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women7.jpg" width="300px">
</div>
<div class="overview_content">
<span>Femme T-Shirt in Stripe</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$25.85</div>
</div>
<div>
<div class="overview-img all men">
<img src="img/Men2.jpg" width="300px">
<div class="overview_content">
<span>Herschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$63.16</div>
</div>
</div>
<div>
<div class="overview-img all men">
<img src="img/Men3.jpg" width="300px">
<div class="overview_content">
<span>Herschel supply</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$63.15</div>
</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women8.jpg" width="300px">
</div>
<div class="overview_content">
<span>T-shirt with Sleeve</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$18.49</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women9.jpg" width="300px">
</div>
<div class="overview_content">
<span>Pretty Little Thing</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$54.79</div>
</div>
<div class="overview-img all watches">
<div>
<img src="img/watches2.jpg" width="300px">
</div>
<div class="overview_content">
<span>Mini silver Mesh Watch</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$86.85</div>
</div>
<div class="overview-img all women">
<div>
<img src="img/women10.jpg" width="300px">
</div>
<div class="overview_content">
<span>Square Neck Back</span>
<span><i class="fa-solid fa-heart"></i></span>
</div>
<div>$29.64</div>
</div>
</section>
<section class="foot">
<div class="foot-button">
<a href="#">LOAD MORE</a>
</div>
</section>
<footer>
<section class="category">
<div class="category1">
<h4>CATEGORIES</h4>
<ul>
<li><a href="#">Women</a></li>
<li><a href="#">Men</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Watches</a></li>
</ul>
</div>
<div class="category2">
<h4>HELP</h4>
<ul>
<li><a href="">Track Order</a></li>
<li><a href="">Returns</a></li>
<li><a href="">Shipping</a></li>
<li><a href="">FAQs</a></li>
</ul>
</div>
<div class="category3">
<h4>GET IN TOUCH</h4>
<div>Any questions? Let us know in store at 8th <br>
floor. 379 Hudson St, New York, NY 10018 or<p></p>
call us on (+1) 96 716
6879</div>
</div>
<div class="category4">
<h4>NEWSLETTER</h4>
<form action="#">
<input type="email" name="email" placeholder="email@example.com">
<input type="submit" value="SUBSCRIBE">
</form>
</div>
</section>
<div>
<div class="visa">
<div>
<img src="img/1.png" alt="">
<img src="img/2.png" alt="">
<img src="img/3.png" alt="">
<img src="img/4.png" alt="">
<img src="img/5.png" alt="">
</div>
<div>Copyright ©2025 All rights reserved I made with ❤ by <a class="color" href="#">Colorib</a>& distributed by <a class="color" href="#">ThemeWagon</a></div>
</div>
</div>
</footer>
</body>
</html>* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
/* header start */
/*
1. 큰 정렬(가로/세로) 필요한가 ?
display : flex;
justify-content: space-between;
align-items: center;
2. 세부정렬이 필요한가?
margin, padding, transform : translate();
3. 크기
4. 요소위에 요소 띄워야하는가?
누구 기준? position: relative;
띄우려면? position: absolute;
top, left, right, bottom;
*/
/* .container{
width: 70%;
margin: 0 auto;
} */
body {
overflow-x: hidden;
}
.top-bar {
background-color: black;
color: lightgray;
}
.top-bar .container {
width: 70%;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: small;
}
/* .top-bar-content {
border-left: 1px solid gray;
border-right: 1px solid gray;
display: inline-block;
padding: 10px;
border: 1px solid gray;
font-size: 16px;
} */
.top-bar ul{
display: flex;
}
.top-bar ul li {
border: 1px solid gray;
padding: 10px 25px;
}
.wrap-menu {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
z-index: 1;
position: sticky;
top: 0;
left: 0;
background-color: white;
}
.wrap-top-left {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 290px;
}
.wrap-top-left img {
margin: 30px 50px 30px 0;
}
.wrap-top-nav{
display: flex;
}
.wrap-top-nav li {
/* background-color: red; */
/* margin: 15px; */
padding: 15px;
}
.homecolor {
color: #6c7ae0;
}
.wrap-top-right {
margin-right: 290px;
}
.top-icon {
margin: 15px;
}
/* main
1. 큰 정렬
2. 세부 정렬
3. 크기
4. 띄우기
*/
.slidebox {
display: flex;
}
.slide {
width: 300%;
height: 930px;
position: relative;
transition: all 1s;
/* background-repeat: no-repeat; */
}
.text-box {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 15%;
}
.slide i {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
cursor: pointer;
}
.slide .left {
left : 20px;
}
.slide .right {
right: 20px;
}
.slide div p {
margin: 0 0 10px 0;
font-size: 25px;
}
.slide div h1 {
font-size: 50px;
margin: 0 0 40px 0;
}
.slide a {
display: inline-block;
background-color: #717fe0;
color: white;
padding: 10px 30px;
border-radius: 20px;
}
#slidebtn {
width: 100%;
position: absolute;
top: 50%; /*부모로 부터 50% 내려옴 중앙 아님*/
transform: translateY(-50%); /*자신의 사이즈 만큼 50% 위로 올라감 , 중앙정렬됨*/
display: flex; /*플렉스를 통하여 이미지 두개를 가로로 배치*/
justify-content: space-between; /*가로로 배치된 이미지를 양끝정렬 시킴*/
}
#slidebtn i{
position: absolute;
font-size: 50px; /*이미지의 사이즈를 조절*/
}
#slidebtn .left {
left: 50px;
}
#slidebtn .right {
right: 50px;
}
/* category */
#category.container {
display: flex;
flex-direction: row;
width: 800px;
margin: 50px 250px;
}
.categoryimg1 {
background-image: url(./img/women.jpg);
width: 430px;
height: 300px;
background-repeat: no-repeat;
background-size: 100%;
display: block;
border: 1px solid lightgray;
padding: 30px;
margin: 15px;
}
.categoryimg2 {
background-image: url(./img/Men.jpg);
width: 430px;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
border: 1px solid lightgray;
padding: 30px;
margin: 15px;
}
.categoryimg3 {
background-image: url(./img/Accessories.jpg);
width: 430px;
height: 300px;
background-repeat: no-repeat;
background-size: 100% 100%;
display: block;
border: 1px solid lightgray;
padding: 30px;
margin: 15px;
}
.categoryimg1:hover, .categoryimg2:hover, .categoryimg3:hover {
opacity: 0.6;
width: 430px;
height: 300px;
}
/* */
.view-name {
margin: 100px 300px 50px 280px
}
.view-name h2 {
font-size: 25pt;
}
.view-nav {
display: flex;
justify-content: space-between;
}
.view-nav-left {
display: flex;
}
.view-nav-left li {
padding: 20px 20px 20px 0;
cursor: pointer;
}
.view-nav-right a {
padding: 10px 25px;
background-color: white;
border: 1px solid lightgray;
color: gray;
}
.overview div{
color: gray;
}
.overview {
display: flex;
width: 1500px;
flex-wrap: wrap;
margin: 0 250px 100px 250px;
}
.overview-img {
padding: 0 20px;
display: none;
}
.overview-img.active {
display: block;
}
.overview_content {
display: flex;
justify-content: space-between;
}
.foot-button {
width: 10%;
text-align: center;
margin: 0 auto;
padding: 10px 40px;
border-radius: 20px;
border: 1px solid #e6e6e6;
background-color: #e6e6e6;
}
.foot {
padding: 0 0 100px 0;
}
footer {
background-color: #222;
color: white;
}
.category {
display: flex;
justify-content: space-between;
padding: 50px 250px;
}
.category1 ul li a, .category2 ul li a {
color: grey;
font-size: small;
}
.category3 div {
color: gray;
}
.visa {
text-align: center;
color: lightgray;
}
.visa div {
padding: 10px;
}
.visa div .color {
color: lightpink;
}
.category4 form [type="submit"] {
display: inline-block;
margin-top: 10px;
padding: 10px 30px;
background-color: #717fe0;
border-radius: 20px;
}
.category4 form [type="email"]{
width: 100%;
padding: 10px 0;
margin-bottom: 10px;
background-color: #222;
border-bottom: 1px solid white;
border-right: none;
outline: none;
}// headerTop높이를 얻어서 headerBottom의 top 속성의 값을 바꿔줄 에정
// position:absolute -> position : fixed 로 바꿔줄 예정
let headerTop = document.querySelector('.wrap-top-left');
let headerBottom = document.querySelector('.wrap-top-right');
let offset = headerTop.offsetHeight;
window.addEventListener('scroll', function() {
if (this.window.scrollY > offset) {
headerBottom.classList.add('scrolled');
headerBottom.style.top = 0;
} else {
headerBottom.classList.remove('scrolled');
headerBottom.style.top = offset+"px";
}
});
// tab
// Step1. 요소 선택하기
let tabs = document.querySelectorAll('.view-nav-left li');
let contents = document.querySelectorAll('.overview-img');
console.log(tabs);
console.log(contents);
// Step2. 이벤트 할당하기
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', tabIdCalculator);
}
// Step3. 함수 선언하기
function tabIdCalculator() {
let tabId = this.id;
console.log("tabId : " + tabId);
showTabContent(tabId);
}
//클릭 이벤트가 발생한 버튼과 관련된 콘텐츠 나타내기
//this와의 관련성 : 교집합 만들어주기
function showTabContent(tabId) {
for (let i = 0; i < contents.length; i++) {
contents[i].classList.remove('active');
}
let activeContent = document.querySelectorAll("." + tabId);
console.log("tabId", tabId);
if (activeContent) {
for (let i = 0; i < activeContent.length; i++) {
activeContent[i].classList.add('active');
}
}
}
// slide
// step1. selector
// 좌우 icon에 클래스 .left .right 먼저 할당하기!
let left = document.querySelector(".left");
let right = document.querySelector(".right");
console.log(left);
console.log(right);
let lis = document.querySelectorAll('.slide');
console.log(lis);
left.addEventListener("click",leftsliding);
right.addEventListener("click",rightsliding);
let index = 0;
function leftsliding() {
index--;
// 음수값이되면 안되므로 li의 갯수 값을 넣어줌 현재는 2
console.log(lis.length);
if (index < 0) {
index = (lis.length - 1); //2을 입력
}
console.log("왼쪽 슬라이딩함수");
console.log(index);
lis.forEach(function (slide) {
slide.style.transform = `translateX(${index * (-100)}%)`;
});
}
function rightsliding() {
index++;
// 마지막 슬라이더 번호보다 크면 안됨
if (index >= (lis.length)) {
index = 0;
}
console.log("오른쪽 슬라이딩함수");
console.log(index);
lis.forEach(function (slide) {
slide.style.transform = `translateX(${index * (-100)}%)`;
});
}
좌우 버튼 클릭시 slide구현
스크롤 내릴때 위 네비쪽 고정되어있음