[220124] input="radiobox" / label / 슬라이드 / 형제 선택자

의도 : 클릭하면 div가 사라졌다가 나타나기

 

html

 <div id="header">
        <div class="container">
            <input type="radio" id="box1" name="blue">
            <label for="box1"></label>
            <div id="pic1"></div>
        </div>

        <div class="container">
            <input type="radio" id="box2" name="blue">
            <label for="box2"></label>
            <div id="pic2"></div>
        </div>
        
        <div class="container">
            <input type="radio" id="box3" name="blue">
            <label for="box3"></label>
            <div id="pic3"></div>
        </div>
 </div>

 

css : 인접 형제 선택자 + 이용

#header{
    width: 500px;
    height: 180px;
    background: #eee;
    padding:20px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
}

#header > div > input{
    display: none;
}

.container{
    width:130px;
    height: 130px;
}

input[id*="box"]+label{
    display: inline-block;
    width:15px;
    height: 15px;
    background: blue;
    border-radius: 100%;
}
input[id*="box"]:checked+label{
    background: #fff;
}

input[id*="box"]+label+div{
    width: 100px;
    height: 100px;
}


input[id*="box"]+label+#pic1{background: red; opacity: 1;}
input[id*="box"]+label+#pic2{background: green; opacity: 1;}
input[id*="box"]+label+#pic3{background: hotpink; opacity: 1;}

input[id*="box"]:checked+label+#pic1{opacity:0;}
input[id*="box"]:checked+label+#pic2{opacity:0;}
input[id*="box"]:checked+label+#pic3{opacity:0;}

 

 

---

의도 : 클릭하면 슬라이드가 움직이기

 

 

html

<div id="header">
    <input type="radio" name="box1" id="box1">
    <input type="radio" name="box1" id="box2">
    <input type="radio" name="box1" id="box3">

    <div id="slidelist">
        <div class="pic fir"></div>
        <div class="pic sec"></div>
        <div class="pic thrd"></div>
    </div>

    <div id="slide-controller">
        <label for="box1"></label>
        <label for="box2"></label>
        <label for="box3"></label>
    </div>
</div>

 

css : 일반 형제 선택자 ~  이용

#header{
    width: 100vw;
    height: 300px;
    position: relative;
    overflow: hidden;
}

input[id*="box"]{display: none;}

/*클릭하면 label이 길어지도록*/
input[id="box1"]:checked~#slide-controller > label:nth-child(1){
    width: 30px;
    background: #fff;
    transition: all 0.35s; /* 늘어나는 애니메이션*/
}
input[id="box2"]:checked~#slide-controller > label:nth-child(2){
    width: 30px;
    background: #fff;
    transition: all 0.35s;
}
input[id="box3"]:checked~#slide-controller > label:nth-child(3){
    width: 30px;
    background: #fff;
    transition: all 0.35s;
}

#slidelist{
    width: 300vw;
    height: 100%;
}
#slidelist > div{
    width: 100vw;
    height: 100%;
    float: left;
}

.fir{background: brown;}
.sec{background: darkslategrey;}
.thrd{background: green;}

/* 선택하면 전체 위치가 왼쪽으로 움직이게 만듬 */
input[id="box1"]:checked ~ #slidelist > div{
    transform: translateX(-100vw);
    transition: all 0.35s;
}
input[id="box2"]:checked ~ #slidelist > div{
    transform: translateX(-200vw);
    transition: all 0.35s;
}
input[id="box3"]:checked ~ #slidelist > div{
    transform: translateX(0vw);
    transition: all 0.35s;
}

#slide-controller{
    position: absolute;
    top: 250px;
    width: 100vw;
    height: 50px;
    padding-top:20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}
#slide-controller > label{
    display: block;
    width: 15px;
    height: 15px;
    background: #000;
    margin-right: 10px;
}