공부 노트

풀 스크린 슬라이더 프로토타입(기능만) 

- html

    <div class="tab-inner">
        <!-- tabs : 가로세로 100%, overflow:hidden -->
        <input type="radio" name="t" id="tab1" checked>
        <input type="radio" name="t" id="tab2">
        <input type="radio" name="t" id="tab3">
        <div class="tabs">
            <div class="items">
                <div>
                    <h1>content1</h1>
                </div>
                <div>
                    <h1>content2</h1>
                </div>
                <div>
                    <h1>content3</h1>
                </div>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>

- css

body {
    padding: 0;
    margin: 0;
}
.tab-inner {
    /* container */
}
input[name=t] {
    display: none;
}
/* div.tabs는 블럭요소라서 w100%가 디폴트값임 */
.tabs {
    overflow: hidden;

    /* 자식요소 absolute 
    부모요소가 자식만큼 높이를 가지고 있다가 자식absolute되면 부모 높이값 없어짐
    높이값을 안주면 overflow:hidden으로 내용이 다 사라짐  */
    position: relative;
    height: 100vh;
}
/* item > div*3 */
.items {
    /* border: 1px solid blue; */
    width: 300%;
    height: 100vh;
    transition: 0.5s;

    position: absolute;
    top: 0;
    left: 0;
}
.items div {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    float: left;
    
    /* width: 100%;로 하면 한화면에 3칸으로 나누어진다, 33.33333% 로 퍼센트로 나눠야함 */
    width: 33.33333%;
    box-sizing: border-box;
    /* border: 1px solid red; */
}
.items div:nth-child(1) {
    background-color: teal;
}
.items div:nth-child(2) {
    background-color: dodgerblue;
}
.items div:nth-child(3) {
    background-color: yellowgreen;
}
.items div h1 {
    font-size: 80px;
    font-weight: normal;
}

.btn {
    position: absolute;
    bottom: 50px;
    
    /* 중앙정렬
    left: 50%;
    transform: translateX(-50%); 
    로 해도 되지만 ,
    absolute -> 인라인블럭이 되기때문에 너비값없어짐
    w100% ta:c */
    width: 100%;
    text-align: center;
}
.btn label {
    display: inline-block;
    width: 50px;
    height: 5px;
    background-color: #fff;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -100%;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -200%;
}
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: #000;
}