HTML & CSS 연습/Fruitables
Fruitables
별초롱언니
2025. 4. 18. 15:45
<!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>Fruitables-conan</title>
</head>
<body>
<!-- ! header top -->
<header id="header_top" class="container">
<div class="h_left">
<span><i class="fa-solid fa-location-dot"></i> 123 Street, NewYork</span>
<span><i class="fa-solid fa-envelope"></i>Email@Example.com</span>
</div>
<div class="h_right">
<a href="#">Privacy Policy<span>/</span></a>
<a href="#">Terms of Use<span>/</span></a>
<a href="#">Sales and Refunds</a>
</div>
</header>
<!--! header bottom -->
<section id="nav" class="container">
<!-- nav title -->
<h1>Fruitables</h1>
<!-- nav -->
<div>
<ul class="nav_menu">
<li>Home</li>
<li>Shop</li>
<li>Shop Detail</li>
<!-- dropdown -->
<li id="menuList_pages">Pages<i class="fa-solid fa-angle-down"></i>
<ul id="subList" class="display_none">
<li>Cart</li>
<li>Chackout</li>
<li>Testimonial</li>
<li>404 Page</li>
</ul>
</li>
<li>Contact</li>
</ul>
</div>
<!-- icon -->
<div class="h_icon">
<i class="fa-solid fa-magnifying-glass glass"></i>
<i class="fa-solid fa-bag-shopping shopping"></i>
<i class="fa-solid fa-user user"></i>
</div>
</section>
<!-- main slide -->
<section id="main" class="container">
<div class="main_left">
<p>100% Organic Foods</p>
<h1>Organic Veggies & <br>
Fruits Foods</h1>
<!-- 폼태그 -->
<div class="main_text">
<input type="text" class="text" placeholder="Search">
<input type="submit" value="Submit Now" class="submit">
</div>
</div>
<!-- 슬라이드박스 -->
<div class="slidebox">
<!-- 슬라이드 1 -->
<div class="slide">
<p class="slide_p01">Fruites</p>
<ul>
<li><img src="./img/hero-img-1.png" class="slide_img1"></li>
</ul>
</div>
<!-- 슬라이드 2 -->
<div class="slide">
<p class="slide_p02">Vesitables</p>
<li><img src="./img/hero-img-2.jpg"></li>
</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>
<!-- tab -->
<section id="tab_box" class="container">
<div class="tab_menu">
<h1>Our Organic Products</h1>
<div class="tab all" id="tab1">All Products</div>
<div class="tab veg" id="tab2">Vegetables</div>
<div class="tab fruits" id="tab3">Fruits</div>
<div class="tab bread" id="tab4">Bread</div>
<div class="tab meat" id="tab5">Meat</div>
</div>
<div class="card_content">
<div class="tab-content tab1 tab2">
<img src="./img/fruite-item-5.jpg">
<div class="tab_text">
<div class="sub_text">
<p>Fruits</p>
</div>
<h4>Grapes</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab4">
<img src="./img/fruite-item-5.jpg">
<div class="tab_text">
<div class="sub_text">
<p>Fruits</p>
</div>
<h4>Grapes</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab2 tab5">
<img src="./img/fruite-item-2.jpg">
<div class="tab_text">
<div class="sub_text">
<p>Fruits</p>
</div>
<h4>Raspberries</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab4">
<img src="./img/fruite-item-4.jpg">
<div class="tab_text">
<div class="sub_text">
<p>Fruits</p>
</div>
<h4>Apricots</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab5">
<img src="./img/fruite-item-3.jpg">
<div class="tab_text">
<div class="sub_text1">
<p>Fruits</p>
</div>
<h4>Banana</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab3 tab5">
<img src="./img/fruite-item-1.jpg">
<div class="tab_text">
<div class="sub_text1">
<p>Fruits</p>
</div>
<h4>Oranges</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab3">
<img src="./img/fruite-item-6.jpg">
<div class="tab_text">
<div class="sub_text1">
<p>Fruits</p>
</div>
<h4>Apples</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
<div class="tab-content tab1 tab4">
<img src="./img/fruite-item-5.jpg">
<div class="tab_text">
<div class="sub_text1">
<p>Fruits</p>
</div>
<h4>Grapes</h4>
<p>Lorem ipsum dolor sit amet <br>
consectetur adipisicing elit sed do <br>
eiusmod te incididunt</p>
<div class="tab_price">
<span>$4.99 / kg</span>
<a href="#">
<i class="fa-solid fa-bag-shopping shopping"></i>
Add to cart</a>
</div>
</div>
</div>
</div>
</section>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
:root {
--main-color: #81c408;
--sub-color: #ffc107;
--bg-color: #f4f6f8;
--text-color: #45595B;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
list-style: none;
color: inherit;
}
.container {
width: 70%;
margin: 0 auto;
}
/* !header */
/* 헤더탑 스타일 */
#header_top {
display: flex;
justify-content: space-between;
padding: 20px;
border-radius: 230px 100px;
background-color: var(--main-color);
color: white;
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
/* 헤더탑 왼쪽 스타일 */
.h_left i {
padding: 0 8px;
color: var(--sub-color);
}
/* 헤더탑 오른쪽 */
.h_right span {
padding: 0 8px;
}
/* header end */
/* !nav */
/* nav 전체 스타일 */
#nav {
display: flex;
justify-content: space-between;
align-items: center;
top: 0;
left: 0;
position: sticky;
padding: 20px 0;
}
/* nav 제목 스타일 */
#nav h1 {
font-family: "Raleway", sans-serif;
font-size: 40px;
color: var(--main-color);
}
/* nav 가로정렬 */
.nav_menu {
display: flex;
}
/* nav 메뉴 마진으로 자리배치 */
.nav_menu>li {
margin: 0 20px;
}
/* 아이콘 스타일 */
.h_icon .glass {
border: 1px solid var(--sub-color);
border-radius: 50%;
padding: 12px;
margin-right: 6px;
color: var(--main-color);
}
.h_icon .shopping,
.h_icon .user {
font-size: 30px;
padding: 10px;
color: var(--main-color);
}
/* 드롭다운 자리 고정 */
#menuList_pages {
position: relative;
}
/* 서브메뉴 스타일 */
#subList {
position: absolute;
top: 140%;
border-radius: 10px;
padding: 10px 30px 10px 20px;
line-height: 1.8;
background-color: var(--bg-color);
}
/* 서브메뉴 숨기기 */
.display_none {
display: none;
}
/* ! main slide */
/* 메인 가로정렬 / 백그라운드이미지와 크기조정 */
#main {
display: flex;
width: 100%;
background-image: url(./img/hero-img.jpg);
background-position: 10px;
}
/* 메인 왼쪽 텍스트 자리옮김 */
.main_left {
margin: 120px 300px;
}
/* main 왼쪽 텍스트 스타일 */
.main_left p {
color: var(--sub-color);
font-size: 24px;
}
.main_left h1 {
color: var(--main-color);
font-size: 64px;
}
/* input text 사이즈조정 / 스타일 */
.main_text .text {
padding: 20px 350px;
/* width: 550px;
height: 55px; */
padding-left: 20px;
border: 2px solid var(--sub-color);
border-radius: 30px;
outline: none;
}
/* input submit 사이즈조정 / 스타일 */
.main_text .submit {
border: 2px solid var(--sub-color);
padding: 20px 30px;
border-radius: 30px;
margin-top: 15px;
margin-left: -139px;
background-color: var(--main-color);
color: white;
cursor: pointer;
}
.main_text .submit:hover {
background-color: var(--sub-color);
transition: all 1.2s ease;
}
/* 슬라이더박스 가로정렬 */
.slidebox {
display: flex;
position: relative;
overflow: hidden;
margin-left: -30px;
/* white-space: nowrap; */
/* justify-content: space-between; */
width: 26%;
}
/* 슬라이더 스타일 */
.slide {
transition: all 1s;
}
/* 슬라이더 이미지 크기 / 자리조정정 */
.slide img {
width: 500px;
border-radius: 10px;
margin-top: 100px;
}
/* 슬라이드 첫번째 이미지 백그라운드 컬러 주기기 */
.slide_img1 {
background-color: var(--sub-color);
}
/* 슬라이드 내에 있는 텍스트 스타일 */
.slide_p01 {
position: absolute;
top: 250px;
transform: translateX(150%);
background-color: var(--sub-color);
padding: 8px 24px;
font-size: 25px;
color: white;
border-radius: 10px;
}
.slide_p02 {
position: absolute;
top: 250px;
transform: translateX(100%);
background-color: var(--sub-color);
padding: 8px 24px;
font-size: 25px;
color: white;
border-radius: 10px;
}
/* 버튼 자리 조정 */
#slidebtn {
width: 100%;
position: absolute;
top: 50%;
/*부모로 부터 50% 내려옴 중앙 아님*/
transform: translateY(-300%);
/*자신의 사이즈 만큼 50% 위로 올라감 , 중앙정렬됨*/
display: flex;
/*플렉스를 통하여 이미지 두개를 가로로 배치*/
justify-content: space-between;
/*가로로 배치된 이미지를 양끝정렬 시킴*/
font-size: 25px;
opacity: 0.6;
}
/* 버튼 아이콘 색상 */
#slidebtn i {
cursor: pointer;
color: white;
}
/* 왼쪽 버튼 아이콘 스타일 */
#slidebtn .left {
position: absolute;
left: 20px;
border-radius: 50%;
padding: 10px 15px;
background-color: var(--main-color);
}
/* 오른쪽 버튼 아이콘 스타일 */
#slidebtn .right {
position: absolute;
right: 20px;
border-radius: 50%;
padding: 10px 15px;
background-color: var(--main-color);
}
/* tab */
/* 탭 메뉴 스타일 */
.tab_menu {
display: flex;
align-items: center;
margin: 50px 0;
}
/* 탭메뉴 타이틀 */
.tab_menu h1 {
font-size: 40px;
margin-right: 150px;
}
/* 탭 버튼 스타일 */
.tab {
background-color: var(--bg-color);
padding: 8px 35px;
border-radius: 25px;
margin: 10px;
cursor: pointer;
}
/* tab content */
/* 탭 컨텐츠 가로정렬 / wrap으로 다음줄로 옮김 */
.card_content {
display: flex;
flex-wrap: wrap;
}
/* 탭 컨텐츠 이미지 크기 */
.tab-content img {
width: 306px;
height: 200px;
border-radius: 10px 10px 0 0;
transition: transform 0.3s ease;
}
/* 이미지 호버했을때 1.2배 커지기 */
.tab-content img:hover {
transform: scale(1.2);
}
/* 탭 컨텐츠 자리배치 */
.tab-content {
font-size: 0;
margin: 10px 20px 10px 0;
overflow: hidden;
border-radius: 10px;
}
/* 탭 컨텐츠 호버했을때 그림자효과 */
.tab-content:hover {
box-shadow: 0px 0px 20px 2px gray;
}
/* 탭 텍스트 스타일 */
.tab_text {
border: 1px solid var(--sub-color);
text-align: center;
font-size: 16px;
line-height: 1.6;
border-top: none;
border-radius: 0 0 10px 10px;
padding: 20px;
}
/* 탭 컨텐츠 제목 */
.tab-content h4 {
font-size: 24px;
}
/* 탭 컨텐츠 span태그 폰트 사이즈 */
.tab-content span {
font-size: 20px;
}
/* 탭 컨텐츠 p태그 패딩바텀 */
.tab_text p {
padding-bottom: 10px;
}
/* 탭 컨텐츠 a태그 스타일 */
.tab_text a {
border: 1px solid var(--sub-color);
color: var(--main-color);
margin-left: 20px;
padding: 5px 20px;
border-radius: 30px;
}
/* 탭 텍스트 a태그 호버했을때 배경색 폰트색상 변경 */
.tab_text a:hover {
background-color: var(--sub-color);
color: white;
}
/* 호버했을때 변경된 색상 다시 메인컬러로 적용 */
.tab_price i {
color: var(--main-color);
}
.sub_text {
position: absolute;
top: 860px;
background-color: var(--sub-color);
padding: 5px 20px 0 20px;
font-size: 15px;
color: white;
border-radius: 12px;
}
.sub_text1 {
position: absolute;
top: 1280px;
background-color: var(--sub-color);
padding: 5px 20px 0 20px;
font-size: 15px;
color: white;
border-radius: 12px;
}//1. 셀렉트하기
let pages = document.querySelector("#menuList_pages");
let subList = document.querySelector("#subList");
console.log(pages);
//2.이벤트 할당하기
pages.addEventListener("click", showSubList);
let cnt = 0; //클릭 횟수
//3. 함수 선언하기
function showSubList(){
cnt++;
if(cnt % 2 == 1){
// subList.style.display = "block";
subList.classList.remove("display_none");
}else{
subList.classList.add("display_none");
}
console.log(cnt);
}
//Step1. 이벤트 줄 요소 선택하기
let left = document.querySelector("#main .left");
let right = document.querySelector("#main .right");
let slides = document.querySelectorAll("#main .slide");
//Step2. 이벤트 등록하기
left.addEventListener("click", leftsliding);
right.addEventListener("click", rightsliding);
let index = 0; //초기화 : 1번만 수행
//Step3. 함수 선언하기
function leftsliding(){
index = index -1;
if(index < 0){
index = slides.length - 1 ;
}
sliding();
}
function rightsliding(){
index++;
if(index >= slides.length){
index = 0;
}
sliding();
}
function sliding(){
slides.forEach(function(slide){
slide.style.transform = `translateX(${index*(-100)}%)`;
});
}
//tab
// Step1. 요소 선택하기
let tabs = document.querySelectorAll('.tab');
let contents = document.querySelectorAll('.tab-content');
// Step2. 이벤트 할당하기
for (let i = 0; i < tabs.length; i++) {
tabs[i].addEventListener('click', showTabContent);
tabs[i].addEventListener('click', activateTab);
}
/*
Step3. 함수 선언하기
Step4. 함수 구현하기 : 클릭한 메뉴와 관련된 컨텐츠 나타내기(block)
1) 클릭한 메뉴는 this이고
2) this와 관련된 컨텐츠 선택하여 나타내기
2-1) this.id값과 같은 class값을 가진 요소 선택하여 변수에 담기(짝궁)
2-2) "모든" 컨텐츠의 style.display = "none"; 처리
2-3) this와 관련된 컨텐츠만 style.display = "block"; 처리
*/
function showTabContent() {
let tabClass = this.id; // 예: tab1, tab2, ...
// 모든 콘텐츠 숨기기
for (let i = 0; i < contents.length; i++) {
contents[i].style.display = "none";
}
// 클릭한 탭의 id와 같은 class를 가진 모든 콘텐츠 보여주기
for (let i = 0; i < contents.length; i++) {
if (contents[i].classList.contains(tabClass)) {
contents[i].style.display = "block";
}
}
}
/*
Step3. 함수 선언하기
Step4. 함수 구현하기 : 클릭한 메뉴 본인(this)의 배경색상 바꾸기
1) "모든" 탭메뉴의 style.backgroundColor = "지정하려는 기본색상";
2) 클릭한 본인(this)의 style.backgroundColor = "기본색상과 차이나는 색상";
*/
function activateTab() {
for (let i = 0; i < tabs.length; i++) {
tabs[i].style.backgroundColor = "#f1f1f1";
tabs[i].style.color = "#020202";
}
this.style.backgroundColor = "#ffc107";
this.style.color = "#ffffff";
}녹음 2025-04-18 162303.mp4
6.61MB
