정리노트

[html, css] 슬라이드 기능, 클론코딩

망고고래 2023. 11. 21. 17:31

tab 기능과 같은 radio와 label의 연계 기능을 이용해 슬라이드 기능을 만들었다.

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="slide.css">
</head>
<body>
    <div class="section">
       <input type="radio" name="slide" id="slide01" checked>
       <input type="radio" name="slide" id="slide02">
       <input type="radio" name="slide" id="slide03">
 
       <div class="slidewrap">
          <ul class="slidelist">
             <li> <!---슬라이드 한 장-->
                <a>
                   <label for="slide03" class="left"></label>
                   <img src="./img/slide01.jpg">
                   <label for="slide02" class="right"></label>
                </a>
             </li>
             <li>
                <a>
                   <label for="slide01" class="left"></label>
                   <img src="./img/slide02.jpg">
                   <label for="slide03" class="right"></label>
                </a>
             </li>
             <li>
                <a>
                   <label for="slide02" class="left"></label>
                   <img src="./img/slide03.jpg">
                   <label for="slide01" class="right"></label>
                </a>
             </li>
          </ul>
       </div>
    </div>
 </body>
</html>

 

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
    box-sizing: border-box;
}
.section{
    padding: 200px 0;
}
.section input[id*="slide"]{
    display: none;
}/* radio 버튼 안 보이게 하기: id 공통부분*/

/* 슬라이드 영역 */
.section .slidewrap{
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}
.section .slidelist{
    white-space: nowrap;
    /* 부모 사이즈를 넘길 수 있게 해줌 */
    font-size: 0;
    /* 인라인 요소 사이의 간격을 없앰 */
}
.section .slidelist>li{
    display: inline-block;
    /* 블록 요소를 가로정렬
    1. display: flex;
    2. display: inline-block; */
    /* vertical-align: middle; */
    width: 100%;
    transition: all 0.5s;
}
.section .slidelist>li a{
    display: block;
    position: relative;
}
.section .slidelist>li a>img{
    width: 100%;
}
label{
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    padding: 50px;
    /* label에 내용이 없음>패딩으로 내용 부여 */
}
.left{
    left: 30px;
    background: url(./img/left.png) center center /100% no-repeat;
}
.right{
    right: 30px;
    background: url(./img/right.png) center center /100% no-repeat;
}
#slide01:checked~.slidewrap li{
    transform: translateX(0%);
}
#slide02:checked~.slidewrap li{
    transform: translateX(-100%);
}
#slide03:checked~.slidewrap li{
    transform: translateX(-200%);
}

 

슬라이드들을 가로로 정렬시키고 좌우 버튼을 누르면 transform의 translation을 이용해 위치를 이동시킨다.

 

 

 

 

radio와 label의 연계 기능을 활용한 클론 코딩을 하나 더 했다.

 

원본 사이트: https://themewagon.github.io/feane/

 

Feane

Fast Food Restaurant Doloremque, itaque aperiam facilis rerum, commodi, temporibus sapiente ad mollitia laborum quam quisquam esse error unde. Tempora ex doloremque, labore, sunt repellat dolore, iste magni quos nihil ducimus libero ipsam.

themewagon.github.io

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="hamburger.css">
    <script src="https://kit.fontawesome.com/f70c884d31.js" crossorigin="anonymous"></script>
</head>
<body>
    <section id="menu">
        <div class="container">
            <h2>Our Menu</h2>
            <input type="radio" name="tap" id="menu1" checked>
            <input type="radio" name="tap" id="menu2">
            <input type="radio" name="tap" id="menu3">
            <input type="radio" name="tap" id="menu4">
            <input type="radio" name="tap" id="menu5">
            <div id="menu_label">
                <label for="menu1">All</label>
                <label for="menu2">Burger</label>
                <label for="menu3">Pizza</label>
                <label for="menu4">Pasta</label>
                <label for="menu5">Fries</label>
            </div>
            <div id="menu_card">
                <div class="menu_cards Pizza"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f1.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Pizza</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$20</p>
                            <a href=""><i class="far fa-kiss-wink-heart"></i></a>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Burger"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f2.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Burger</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$20</p>
                            <a href=""></a><i class="fas fa-shopping-cart"></i></a>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Pizza"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f3.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Pizza</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$17</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Pasta"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f4.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Pasta</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$18</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Fries"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f5.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>French Fries</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$10</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Pizza"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f6.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Pizza</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$15</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Burger"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f7.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Tasty Burger</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$12</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Burger"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f8.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Tasty Burger</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$14</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>
                <div class="menu_cards Pasta"><!--메뉴 하나-->
                    <div class="menu_photo">
                        <img src="./f9.png" alt="">
                    </div>
                    <div class="menu_cards_text">
                        <h6>Delicious Pasta</h6>
                        <p>Veniam debitis quaerat officiis quasi cupiditate quo, quisquam velit, magnam voluptatem repellendus sed eaque</p>
                        <div>
                            <p>$10</p>
                            <i class="fas fa-shopping-cart"></i>
                        </div>
                    </div>
                </div>

            </div>
            </div>
        </div>
    </section>
</body>
</html>

 

*{
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style: none;
    box-sizing: border-box;
}
#menu{
    padding: 130px 0;
}
.container{
    width: 60%;
    margin: 0 auto;
    text-align: center;
}
#menu>.container>h2{
    font-size: 32px;
}
#menu_label{
    margin: 40px 0 50px;
}
#menu_label label{
    border-radius: 30%;
    padding: 10px 25px;
    cursor: pointer;
}
input{
    display: none;
}

#menu_card{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-left: 2%;
}
.menu_cards{
    width: 31%;
    position: relative;
    margin: 0 1.5% 1.5% 0;
}
.menu_photo
{
    justify-content: center;
    background: #f1f2f3;
    border-radius: 15px 15px 0 50px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.menu_photo img{
    max-height: 140px;
    width: auto;
    margin: 30px 0;

}
.Burger .menu_photo img{
    width: 53%;
}
.menu_cards_text{
    width: 100%;
    text-align: left;
    color: white;
    background-color: #2c3034;
    margin: 10px auto 20px;
    padding: 200px 30px 20px;
    border-radius: 5%;
}
.menu_cards_text h6{
    font-weight: 600;
    font-size: 20px;
    margin: 10px 0;
}
.menu_cards_text div{
    margin: 20px 0 0;
    display: flex;
    justify-content: space-between;
}
.menu_cards_text i{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    background: #ffbe33;
    color: white;
    line-height: 40px;
    text-align: center;
}
.menu_cards{
    display: none;
}
#menu1:checked~#menu_card .menu_cards{
    display: inline-block;
}
#menu2:checked~#menu_card .Burger{
    display: inline-block;
}
#menu3:checked~#menu_card .Pizza{
    display: inline-block;
}
#menu4:checked~#menu_card .Pasta{
    display: inline-block;
}
#menu5:checked~#menu_card .Fries{
    display: inline-block;
}
#menu1:checked~#menu_label label:nth-of-type(1){
    color: white;
    background-color: #2c3034;
    border-radius: 50px;
}
#menu2:checked~#menu_label label:nth-of-type(2){
    color: white;
    background-color: #2c3034;
    border-radius: 50px;
}
#menu3:checked~#menu_label label:nth-of-type(3){
    color: white;
    background-color: #2c3034;
    border-radius: 50px;
}
#menu4:checked~#menu_label label:nth-of-type(4){
    color: white;
    background-color: #2c3034;
    border-radius: 50px;
}
#menu5:checked~#menu_label label:nth-of-type(5){
    color: white;
    background-color: #2c3034;
    border-radius: 50px;
}

 

'정리노트' 카테고리의 다른 글

[javascript]  (0) 2023.11.24
[javascript] 변수와상수, 연산자, 함수, 객체, 이벤트  (0) 2023.11.22
[html, css] label과 radio 연결  (0) 2023.11.20
[html, css] Flexbox Froggy, CSS Dinner  (0) 2023.11.17
[html, css] 웹사이트 클론코딩  (0) 2023.11.16

'정리노트'의 다른글

  • 현재글[html, css] 슬라이드 기능, 클론코딩

관련글

티스토리툴바