CONTENTS
CSS 기능 실습
1. 고정 라벨 슬라이더
2. 탭
---------------------------------------------------------
CSS 기능 실습
1. 고정 라벨 슬라이더
html
<body>
<header id="header_top" class="container">
<div class="logo">
Feane
</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Book Table</a></li>
</ul>
</nav>
<div>
<i class="fa fa-user" aria-hidden="true"></i>
<i class="fa-solid fa-cart-shopping"></i>
<i class="fa fa-search" aria-hidden="true"></i>
<a href="#">Order Online</a>
</div>
</header>
<!-- img 태그 높이 따로 줄 필요 없음 -->
<section id="main" class="contanier">
<!-- <img src=""> bg 지만 이미지 따로 텍스트는 position으로 조절-->
<input type="radio" name="slide" id="slide01" checked>
<input type="radio" name="slide" id="slide02">
<input type="radio" name="slide" id="slide03">
<div class="slidebox">
<div class="slides">
<!-- 컨텐츠1 -->
<div class="textbox"> <!-- class명 slide -->
<h1>Fast Food Restaurant</h1>
<br>
<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>
mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>
sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>
<br>
<a href="#">Order Now</a>
<br>
</div>
<!-- 컨텐츠2 -->
<div class="textbox">
<h1>Fast Food Restaurant</h1>
<br>
<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>
mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>
sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>
<br>
<a href="#">Order Now</a>
<br>
</div>
<!-- 컨텐츠3 -->
<div class="textbox">
<h1>Fast Food Restaurant</h1>
<br>
<p>Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad<br>
mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore,<br>
sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.</p>
<br>
<a href="#">Order Now</a>
<br>
</div>
</div>
</div>
<div class="slidebtn">
<label for="slide01" class="slide01"></label>
<label for="slide02" class="slide02"></label>
<label for="slide03" class="slide03"></label>
</div>
</section>
</body>
*background-image 대신 <img> 사용
header 부분 추가: position: absolute;로 배경 위로 배치
css
* {
margin: 0;
padding: 0;
text-decoration: none;
list-style: none;
box-sizing: border-box;
color: inherit;
font-family: "Open Sans", sans-serif;
}
.container {
width: 80%;
margin: 0 auto;
}
#header_top{
display: flex;
justify-content: space-between;
align-items: center;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 2; /* z-index 양수 주기 */
/* background-color: black; */
color: #ffffff;
padding-top: 20px;
}
#header_top .logo{
font-weight: bold;
font-size: 45px;
color: #ffffff;
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
}
nav ul{
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
nav ul li:nth-child(1){
color: #ffbe33;
}
nav ul li{
padding: 20px;
font-size: 23px;
}
#header_top div{
width: 25%;
}
#header_top div i{
margin-right: 15px;
font-size: 20px;
}
#header_top div a{
display: inline-block;
/* border: 1px solid #ffbe33; */
background-color: #ffbe33;
border-radius: 30px;
padding: 10px 30px;
font-size: 20px;
font-weight: 400;
transition: all 0.3s;
}
#header_top div a:hover{
background-color: #fd7e14;
}
/* main section start */
/* img 썼을 때 #main>img width:100%; */
#main{
/* background-image: url(https://themewagon.github.io/feane/images/hero-bg.jpg);
;){kind=link}
height: 700px;
background-size: 100% 100%; */
position: relative;
}
.slidebox {
width: 80%;
height: 500px;
margin: 0 auto;
/* border: 3px solid blue; */
white-space: nowrap;
overflow: hidden;
color: white;
padding-top: 200px;
position: absolute;
top: 10%;
left: 10%;
/* transition: all 0.3s; */
}
.slides {
font-size: 0;
}
.textbox{
font-size: 30px;
width: 100%;
display: inline-block;
transition: all 1s;
/* border: 3px solid red; */
height: 300px;
/* background-color: blue; */
}
.textbox h1{
font-size: 70px;
font-weight: 200;
color: #ffffff;
font-family: 'Dancing Script', cursive;
}
.textbox p{
font-size: 20px;
color: #ffffff;
}
.textbox a{
display: inline-block;
padding: 10px 45px;
background-color: #ffbe33;
color: #ffffff;
border-radius: 45px;
transition: all 0.3s;
margin-top: 10px;
font-size: 20px;
}
.textbox a:hover{
background-color: #fd7e14;
}
.slidebtn label{
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: white;
margin-right: 10px;
cursor: pointer;
}
#main .slidebtn{
position: absolute;
left: 190px;
top: 70%;
display: flex;
justify-content: center;
align-items: center;
}
/* label 기능부 */
#main input[id="slide01"]:checked ~ .slidebtn label[for="slide01"] {
width: 20px;
height: 20px;
background-color: #ffbe33;
}
#main input[id="slide02"]:checked ~ .slidebtn label[for="slide02"] {
width: 20px;
height: 20px;
background-color: #ffbe33;
}
#main input[id="slide03"]:checked ~ .slidebtn label[for="slide03"] {
width: 20px;
height: 20px;
background-color: #ffbe33;
}
/* 콘텐츠 기능부 */
#slide01:checked ~ .slidebox .slides .textbox{
transform: translateX(0%);
}
#slide02:checked ~ .slidebox .slides .textbox{
transform: translateX(-100%);
}
#slide03:checked ~ .slidebox .slides .textbox{
transform: translateX(-200%);
}
input[type="radio"] {
display: none;
}
2. 탭
html
<body>
<section id="menu" class="container">
<input type="radio" name="tab" id="a">
<input type="radio" name="tab" id="b">
<input type="radio" name="tab" id="c">
<input type="radio" name="tab" id="d">
<input type="radio" name="tab" id="e">
<div>
<h1 class="title">Our Menu</h1>
</div>
<div id="tab_box">
<div id="tab_button">
<label for="a" class="a">All</label>
<label for="b" class="b">Burger</label>
<label for="c" class="c">Pizza</label>
<label for="d" class="d">Pasta</label>
<label for="e" class="e">Fries</label>
</div>
<div id="tab_content">
<!-- all menu -->
<!-- div 하나 안에 content 넣기 class 많이 써도 됨-->
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$20</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$15</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$17</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pasta</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$18</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>French Fries</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$10</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$15</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Tasty Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$12</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Tasty Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$14</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all a card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pasta</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$10</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<!-- burger menu -->
<div class="all b card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$15</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all b card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Tasty Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$12</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all b card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Tasty Burger</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$14</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<!-- pizza menu -->
<div class="all c card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$20</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all c card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$17</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all c card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pizza</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$15</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<!-- pasta menu -->
<div class="all d card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pasta</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$18</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<div class="all d card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>Delicious Pasta</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$10</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
<!-- fries menu -->
<div class="all e card_box">
<div class="img_box">
</div>
<div class="text_box">
<h5>French Fries</h5>
<p>Veniam debitis quaerat officiis quasi<br> cupiditate quo, quisquam velit, magnam<br> voluptatem
repellendus sed eaque</p>
</div>
<div class="cart">
<h6>$10</h6>
<a href="#"><i class="fa-solid fa-cart-shopping"></i></a>
</div>
</div>
</div>
</div>
<div class="view_button"><a href="#">View More</a></div>
</section>
</body>
css
*{
margin:0;
padding:0;
text-decoration : none;
list-style:none;
box-sizing:border-box;
color: inherit;
}
.container{
width: 70%;
margin: 0 auto;
}
#menu .title{
text-align: center;
font-size: 35px;
margin-top: 30px;
font-family: "Dancing Script", cursive;
font-optical-sizing: auto;
font-weight: 600;
font-style: normal;
margin-bottom: 30px;
}
#tab_button{
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
label{
margin-right: 50px;
padding: 10px;
font-family: "Open Sans", sans-serif;
}
#menu #tab_content {
display: flex;
flex-wrap: wrap;
margin-bottom: 20px;
/* justify-content: center;
/* align-items: center; */ /* 배열 달라짐 */
}
#menu .card_box{
width:30%;
height: 100%;
/* border: 3px solid red; */
margin: 20px;
/* transition: all 1s; ->display: none; 일 때 효과 안먹힘 opacity, scale, height주기
투명도로 해두면 그 자리에 그대로 남아 있어서 보이지 않을 뿐 위치해 있음, position으로 위치 조정 해주어야 함*/
background-color: #0c0c0c;
border-radius: 30px;
/* overflow: hidden; */
}
/* 배경 주고 반지름 주기 */
.img_box{
width: 100%;
height: 200px;
padding-left: 50px;
padding-right: 50px;
background-color: #f1f2f3;
border-radius: 20px 20px 0 20px;
}
.img_box img{
width: 100%;
height: 200px;
padding: 20px;
}
.text_box{
width: 100%;
padding: 15px;
/* background-color: #0c0c0c; */
color: #ffffff;
/* border: 3px solid blue; */
}
.text_box h5{
font-size: 20px;
font-family: "Open Sans", sans-serif;
margin-top: 10px;
margin-bottom: 10px;
}
.text_box p, h6{
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.cart{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
/* background-color: #0c0c0c; */
color: #ffffff;
border-radius: 0 0 20px 20px;
}
.cart a{
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
border-radius: 30px;
background-color: #ffbe33;
}
.all{
display: none;
/* opacity: 0; */
}
/* #a의 형제 */
#a:checked ~ #tab_box #tab_content .a{
display: block;
/* opacity: 1; */
}
#b:checked ~ #tab_box #tab_content .b{
display: block;
/* opacity: 1; */
}
#c:checked ~ #tab_box #tab_content .c{
display: block;
/* opacity: 1; */
}
#d:checked ~ #tab_box #tab_content .d{
display: block;
/* opacity: 1; */
}
#e:checked ~ #tab_box #tab_content .e{
display: block;
/* opacity: 1; */
}
/* 라벨 색 바꾸기 */
/* 버튼 꾸미기 */
#a:checked ~ #tab_box #tab_button .a{
background-color: #222831;
color: #ffffff;
padding: 10px 30px;
border-radius: 45px;
}
#b:checked ~ #tab_box #tab_button .b{
background-color: #222831;
color: #ffffff;
padding: 10px 30px;
border-radius: 45px;
}
#c:checked ~ #tab_box #tab_button .c{
background-color: #222831;
color: #ffffff;
padding: 10px 30px;
border-radius: 45px;
}
#d:checked ~ #tab_box #tab_button .d{
background-color: #222831;
color: #ffffff;
padding: 10px 30px;
border-radius: 45px;
}
#e:checked ~ #tab_box #tab_button .e{
background-color: #222831;
color: #ffffff;
padding: 10px 30px;
border-radius: 45px;
}
#a, #b, #c, #d, #e{
display: none;
}
/* 버튼 추가 */
.view_button {
text-align: center;
}
.view_button a{
display: inline-block;
border: 1px solid;
margin-bottom: 30px;
padding: 10px 50px;
border-radius: 30px;
background-color: #ffbe33;
color: #ffffff;
transition: all 0.3s;
}
.view_button a:hover{
background-color: #fd7e14;
}
/* input{
display: none;
} */
*display: none; 일 때 trasition 안 먹힘
display: block 없애고 opacity, scale, height 주면 되지만 position으로 위치 일일이 새로 주어야됨
'웹프로그래밍 > CSS' 카테고리의 다른 글
| 프로그래밍 언어 활용 23일차 (24/12/11) (2) | 2024.12.11 |
|---|---|
| 프로그래밍 언어 활용 21일차 (24/12/9) (0) | 2024.12.09 |
| 프로그래밍 언어 활용 20일차 (24/12/06) (2) | 2024.12.06 |
| 프로그래밍 언어 활용 19일차 (24/12/05) (0) | 2024.12.05 |
| 프로그래밍 언어 활용 18일차 (24/12/04) (0) | 2024.12.04 |