[HTML] - 라디오 버튼으로 슬라이드 구현

html

<div class="slide">
     <div class="slide-inner">
        <a href="#none1"><img src="images/slide-01.jpg"></a>
        <a href="#none2"><img src="images/slide-02.jpg"></a>
        <a href="#none3"><img src="images/slide-03.jpg"></a>
     </div>
</div>

• slide 안에 slide-inner 를 넣어서 slide-inner을 길게(900px)형성하고 그 안에 이미지 3개를 가로로 나열한다.
• 밑의 버튼을 눌렀을 때 slide-inner을 이동시켜 이미지가 슬라이드 된것처럼 구현한다.
• slide가 부모요소 slide-inner가 자식요소이기 때문에 slide-inner가 긴 900px 이지만 slide에 overflow:hidden을 주어 300px만 보이게 한다.

css

.slide {
    position: relative;
    width: 300px;
    height: 300px;
    overflow: hidden;
}

.slide-inner {
    width: 900px;
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

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;
}

.slide-inner 에 font-size: 0;를 준 이유 : 이미지를 나열하면 자동으로 약간의 margin이 생성되는데 이미지는 폰트계열이기 때문에 font-size: 0을 주게 되면 이미지끼리의 마진이 없어진다.