tabmenu #2 - 슬라이드

- html

슬라이드 이미지1, 2, 3 중에 한개만 보이고 나머지 이미지는 hideen 

slide - overflow:hidden

slide-inner - width:900px

<div class="tab-inner">
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <div class="slide">
            <div class="slide-inner">
                <a href="#none1">
                    <img src="img/tabmenu/slide-01.jpg" alt="">
                </a>
                <a href="#none1">
                    <img src="img/tabmenu/slide-02.jpg" alt="">
                </a>
                <a href="#none1">
                    <img src="img/tabmenu/slide-03.jpg" alt="">
                </a>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
</div>

 

- css

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.tab-inner {
    width: 300px;
    height: 350px;
}
input[name=tabmenu] {
    display: none;
}
.slide {
    /* 자식요소가 absolute, float -> 부모요소 높이값을 잃는다. 높이값 추가*/
    position: relative;
    width: 300px;  
    height: 300px;
    overflow: hidden;
}
.slide-inner {
    position: absolute;
    width: 900px;
    font-size: 0;
/* w900px 이미지 오른쪽 마진때문에 밑으로 내려간다.
  1. 폰트사이즈0 : 마진이 폰트의 특성임 
  2.오른쪽마진: -6px 
*/
    top: 0;
    left: 0;
    transition: 0.5s;
}
.btn {
    text-align: center;
    margin-top: 10px;
}
.btn label {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: lightgray;
    border-radius: 50%;
    cursor: pointer;
}
input[id=tab1]:checked ~ .slide .slide-inner {
    left: 0;
}
input[id=tab2]:checked ~ .slide .slide-inner {
    left: -300px;
}
input[id=tab3]:checked ~ .slide .slide-inner {
    left: -600px;
}
input[id=tab1]:checked ~ .btn label[for=tab1],
input[id=tab2]:checked ~ .btn label[for=tab2],
input[id=tab3]:checked ~ .btn label[for=tab3] {
    background-color: crimson;
}