프로그래밍 언어 응용 37일차 (25/1/2)

웹프로그래밍/JavaScript

프로그래밍 언어 응용 37일차 (25/1/2)

wkun 2025. 1. 2. 17:53

CONTENTS

홈페이지 만들기

<html>

<css>

<js>

1)dropdown

2)slider

3)tab

-----------------------------------------------------------------

홈페이지 만들기

예제)

<html>

<body>

<div>

<p>Free shipping for standard order over $100</p>

</div>

<div><a href="#">My Account</a></div>

</div>

</header>

<li><a href="#">Homepage 1</a></li>

<li><a href="#">Homepage 2</a></li>

<li><a href="#">Homepage 3</a></li>

</ul>

</li>

<li><a href="#">Features</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

</ul>

</div>

</div>

</nav>

<h3>Women Collection 2018</h3>

<h2>NEW SEASON</h2>

</div>

</div>

<h3>Men New-Season</h3>

<h2>Jackets & Coats</h2>

</div>

</div>

<h3>Men Collection 2018</h3>

<h2>New arrivals</h2>

</div>

</div>

</div>

</section>

<h2>Women</h2>

<span>spring 2018</span>

</div>

</div>

<span>spring 2018</span>

</div>

</div>

<h2>Accessories</h2>

<span>New Trend</span>

</div>

</div>

</section>

<div>

<h2>Product Overview</h2>

</div>

<li class="tab" id="a">All Products</li>

<li class="tab" id="b">Women</li>

<li class="tab" id="e">Shoes</li>

<li class="tab" id="f">Watches</li>

</ul>

</div>

<div>

<span>Filter</span>

</div>

<div>

<span>Search</span>

</div>

<p>Esprit Ruffle Shirt</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>Only Check Trouser</p>

</div>

</div>

<p>Classic Trench Coat</p>

</div>

</div>

<p>Front Pocket Jumper</p>

</div>

</div>

<p>Vintage Inspired Classic</p>

</div>

</div>

<p>Shirt in Stretch Cotton</p>

</div>

</div>

<p>Pieces Metallic Printed</p>

</div>

</div>

<p>Converse All Star Hi Plimsolls</p>

</div>

</div>

<p>Femme T-Shirt In Stripe</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>T-Shirt with Sleeve</p>

</div>

</div>

<p>Pretty Little Thing</p>

</div>

</div>

<p>Mini Silver Mesh Watch</p>

</div>

</div>

<p>Square Neck Back</p>

</div>

</div>

<p>Esprit Ruffle Shirt</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>Classic Trench Coat</p>

</div>

</div>

<p>Front Pocket Jumper</p>

</div>

</div>

<p>Shirt in Stretch Cotton</p>

</div>

</div>

<p>Pieces Metallic Printed</p>

</div>

</div>

<p>Femme T-Shirt In Stripe</p>

</div>

</div>

<p>T-Shirt with Sleeve</p>

</div>

</div>

<p>Pretty Little Thing</p>

</div>

</div>

<p>Square Neck Back</p>

</div>

</div>

<p>Only Check Trouser</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>Herschel supply</p>

</div>

</div>

<p>Converse All Star Hi Plimsolls</p>

</div>

</div>

<p>Vintage Inspired Classic</p>

</div>

</div>

<p>Mini Silver Mesh Watch</p>

</div>

</div>

</div>

</section>

<h2>Categories</h2>

<ul>

<li>Women</li>

<li>Shoes</li>

<li>Watches</li>

</ul>

</div>

<ul>

<li>Track Order

</li>

<li>Returns</li>

<li>Shipping</li>

</ul>

</div>

<h2>GET IN TOUCH

</h2>

<p>Any questions? Let us know in store at 8th<br> floor, 379 Hudson St, New York, NY 10018 or<br> call us on

(+1) 96 716 6879</p>

<div>

</div>

<h2>Newsletter</h2>

<a href="#">Subscribe</a>

</div>

</div>

<div>

href="#">Colorlib</a> & distributed by <a href="#">ThemeWagon</a></p>

</div>

</footer>

</body>

<css>

margin:0;

padding:0;

text-decoration : none;

list-style:none;

box-sizing:border-box;

color: inherit;

}

.container {

width: 80%;

margin: 0 auto;

}

.header_top{

background-color: black;

font-size: 12px;

}

#header_top{

display: flex;

justify-content: space-between;

align-items: center;

padding: 10px 0;

color: aliceblue;

}

#header_top .header_right{

display: flex;

justify-content: space-between;

align-items: center;

}

.header_right a{

border: 1px solid ;

padding: 10px;

}

/* nav start */

.navline{

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 20px;

margin-bottom: 20px;

}

.nav_left{

display: flex;

justify-content: space-between;

align-items: center;

}

.nav_left img{

margin-right: 50px;

}

.main_menu{

display: flex;

justify-content: space-between;

align-items: center;

}

.main_menu li{

margin-right: 30px;

font-weight: 500;

}

.main_menu>li:first-child{

color: #6c7ae0;

}

.main_menu li a:hover{

color: #6c7ae0;

}

.menuList_Home{

position: relative;

}

.sub_menu{

position: absolute;

top: 40px;

left: 0;

width: 170px;

background-color: white;

border: 1px solid black;

color: gray;

z-index: 10;

}

.sub_menu li{

padding: 10px;

}

.display_none{

display: none;

}

/* nav dropdown end */

.nav_icon{

display: flex;

justify-content: space-between;

align-items: center;

}

.nav_icon div{

margin-right: 30px;

}

/* nav end */

/* slider section start */

.slidebox{

width: 100%;

margin: 0 auto;

white-space: nowrap;

position: relative;

overflow: hidden;

}

.slides{

width: 100%;

font-size: 0;

}

.slide{

width: 100%;

font-size: 15px;

display: inline-block;

position: relative;

transition: all 0.5s;

}

/* textbox */

.slide img{

width: 100%;

}

.textbox{

position: absolute;

display: inline-block;

top: 40%;

left: 10%;

}

.textbox h3{

font-size: 30px;

}

.textbox h2{

font-size: 50px;

margin-bottom: 50px;

}

.textbox a{

display: inline-block;

text-align: center;

width: 150px;

padding: 10px;

border-radius: 30px;

background-color: #717fe0;

color: white;

font-size: 15px;

font-weight: 600;

}

.textbox a:hover{

color: aliceblue;

background-color: black;

}

/* 메인 섹션 기준으로 버튼position */

#slider{

position: relative;

}

.controlbox{

width: 100%;

position: absolute;

top: 50%;

transform: translateY(-50%);

display: flex;

justify-content: space-between;

}

.controlbox div i{

width: 50%;

font-size: 50px;

padding: 30px;

}

.controlbox i:hover{

color: #717fe0;

}

/* banner start */

#banner{

display: flex;

justify-content: space-between;

align-items: center;

margin-top: 50px;

margin-bottom: 100px;

/* background-color: purple; */

}

.bb1, .bb2, .bb3{

position: relative;

width: 32%;

}

.b1, .b2, .b3{

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

padding: 30px;

}

.banner_textbox:hover{

background-color: #717fe0;

color: white;

opacity: 0.7;

transition: all 0.5s;

}

.banner_textbox a{

display: inline-block;

margin-top: 120px;

font-weight: 600;

color: white;

}

.banner_imgbox{

width: 100%;

border: 1px solid black;

}

.banner img{

width: 100%;

}

/* product start */

#product h2{

font-size: 40px;

text-align: left;

}

.product_list{

display: flex;

justify-content: space-between;

align-items: center;

margin-bottom: 50px;

}

.product_list ul{

display: flex;

justify-content: space-between;

}

.product_list ul li{

margin-right: 30px;

}

.product_icon{

display: flex;

justify-content: space-between;

align-items: center;

color: gray;

}

.product_icon i{

font-size: 12px;

margin-right: 5px;

}

.product_icon div:hover{

background-color: #717fe0;

color: white;

transition: all 0.5s;

}

.product_icon div{

width: 100px;

text-align: center;

border: 1px solid #b2b2b2;

padding: 8px;

}

.product_icon div:first-child{

margin-right: 8px;

}

/* card start */

.cardbox{

display: flex;

align-items: center;

/* justify-content: space-between; */

margin: 0 auto;

flex-wrap: wrap;

margin-bottom: 50px;

}

.product_card{

width: 22%;

/* flex: 0 1 calc(25% - 20px); */

margin-right: 30px;

}

.product_card img{

width: 100%;

}

.product_name{

display: flex;

justify-content: space-between;

padding: 10px 0;

position: relative;

}

.heart{

position: absolute;

right: 0;

color: transparent;

}

.heart:hover{

color: #717fe0

}

.product_textbox{

margin-bottom: 30px;

}

/* tab start */

.tab:hover{

color: #ccc;

text-decoration: underline;

}

.tab-content{

/* display: none; */

padding: 20px;

border: 1px solid #ccc;

}

.tab.active {

text-decoration: underline;

}

.all.active{

display: block;

}

/* Load More 버튼 */

.product_a{

display: flex;

justify-content: center;

align-items: center;

margin-bottom: 150px;

}

.product_a a{

text-align: center;

width: 12%;

padding: 13px;

border-radius: 30px;

background-color: #e6e6e6;;

font-weight: 600;

}

.product_a a:hover{

color: white;

background-color: black;

}

/* footer top start*/

#footer{

background-color: black;

padding: 70px 0;

}

.footer_top{

display: flex;

justify-content: space-between;

align-items: center;

color: white;

margin-bottom: 100px;

}

.categories h2{

font-size: 17px;

margin-bottom: 20px;

}

.categories li{

padding: 8px 0;

color: #b2b2b2;

font-size: 15px;

}

.help h2{

margin-bottom: 20px;

font-size: 17px;

}

.help li{

padding: 8px 0;

color: #b2b2b2;

font-size: 15px;

}

.get h2{

margin-bottom: 40px;

font-size: 17px;

}

.get p{

font-size: 15px;

color: #b2b2b2;

margin-bottom: 35px;

}

.get i{

margin-right: 15px;

color: #b2b2b2;

}

.get i:hover{

color: #717fe0;

cursor: pointer;

}

.news{

display: flex;

flex-direction: column;

}

.news h2{

margin-bottom: 30px;

font-size: 17px;

}

.news input{

width: 300px;

padding: 8px;

background-color: transparent;

margin-bottom: 15px;

}

.news input::placeholder {

font-size: 15px;

color: #b2b2b2;

}

.news a{

width: 45%;

padding: 15px;

text-align: center;

border-radius: 30px;

background-color: #717fe0;

font-weight: 600;

}

.news a:hover{

color: #717fe0;

background-color: white;

}

/* .categories, .help, .get, .news{

width: 25%;

} */

/* footer bottom start */

.footer_bottom{

text-align: center;

color:#b2b2b2;

}

.icons{

margin-bottom: 20px;

}

.footer_bottom p{

font-size: 13px;

}

.footer_bottom a{

color: #007bff;

}

.footer_bottom a:hover{

opacity: 0.5;

}

<js>

1)dropdown

//dropbox.js 코드

// 1. 셀렉트하기

let home = document.querySelector(".menuList_Home");

let submenu = document.querySelector(".sub_menu");

//2.이벤트 할당하기

home.addEventListener("click", showSubList);

// //3. 함수 선언하기

function showSubList(){

console.log(submenu);

submenu.classList.toggle('display_none');

}

//요소 자동으로 아이디가 선택?

//id 는 전역변수처럼 사용가능(주의 할 것!) ->변수 따로 주는 게 좋음

// function showSubList(){

// if(cnt%2 == 0){ //클릭횟수가 짝수

// submenu.style.display = "block";

// }else{ //클릭횟수가 홀수

// submenu.style.display = "none";

// }

// cnt++;

// }

2)slider

//1.selector

//처음만 선택됨

let left = document.querySelector(".left");

let right = document.querySelector(".right");

let slides = document.querySelectorAll(".slide"); //All

//2. 이벤트 할당

left.addEventListener("click", leftsliding);

right.addEventListener("click", rightsliding);

let index = 0; //클릭할 때마다 실행

//3.함수 선언

function leftsliding() {

//4.함수 기능 정의

index--; //1씩 줄어짐

if(index < 0) {

index = (slides.length -1);

}

//콘텐츠 묶음 > 요소 3개 : NodeList객체->forEach메서드

slides.forEach(function(slide){ //value, index, array

//div.slide(div인데 class가 slide인 요소) 반복문

//slide = <div class = "slide"></div>

console.log(slide);

slide.style.transform = `translateX(${index*(-100)}%)`;

});

}

function rightsliding() {

index ++; //1씩 증가

if(index >= (slides.length)) {

index = 0;

}

slides.forEach(function(slide){

slide.style.transform = `translateX(${index*(-100)}%)`;

});

}

3)tab

//1.셀렉트 하기

let tabs = document.querySelectorAll('.tab');

//2.이벤트 할당하기

for(let i = 0; i < tabs.length; i++) {

tabs[i].addEventListener('click', tabIdCalculator);

} //텝메뉴

//텝메뉴-텝컨텐츠 연결: id 속성

function tabIdCalculator() {

let tabId = this.id;

activateTab(this);

showTabContent(tabId);

}

activateTab(tabs[0]); // 탭 메뉴

showTabContent('a'); //탭 컨텐츠

function activateTab(tab) {

// 모든 탭 비활성화

let tabs = document.querySelectorAll('.tab');

for (let i = 0; i < tabs.length; i++) {

tabs[i].className = 'tab'; // 클래스 이름을 초기화

}

// 선택한 탭 활성화

tab.className = 'tab active'; // active 클래스 추가

console.log(tab.className);

}

function showTabContent(tabId) {

let contents = document.querySelectorAll('.product_card');

for(let i = 0; i<contents.length; i++) {

contents[i].style.display = 'none';

}

console.log(tabId);

let activeContents = document.querySelectorAll("." + tabId);

console.log("length : "+activeContents.length);

if(activeContents.length != 0) {

activeContents.forEach(function(activeContent){

activeContent.style.display = 'block';

});

}

참고사이트)

https://themewagon.github.io/cozastore/

Home

GET IN TOUCH Any questions? Let us know in store at 8th floor, 379 Hudson St, New York, NY 10018 or call us on (+1) 96 716 6879

themewagon.github.io

'웹프로그래밍 > JavaScript' 카테고리의 다른 글

프로그래밍 언어 응용 39일차 (25/1/6) (0)	2025.01.06
프로그래밍 언어 응용 38일차 (25/1/3) (0)	2025.01.03
프로그래밍 언어 응용 36일차 (24/12/31) (0)	2024.12.31
프로그래밍 언어 응용 35일차 (24/12/30) (2)	2024.12.30
프로그래밍 언어 응용 34일차 (24/12/27) (1)	2024.12.27

현재글프로그래밍 언어 응용 37일차 (25/1/2)

wkun 님의 블로그

wkun 님의 블로그 입니다.

Today :
Yesterday :

wkun 님의 블로그