공부 노트

- 인접선택자 + : 바로 밑 요소 (자기보다 위의 요소는 x)

    1. ul + p 
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>
    <p>문단입니다.</p>
    <p>문단입니다.</p>

ul + p {
    color: hotpink;
}

ul의 바로 밑 p만 색이 변한다.

- 형제선택자 ~ : 형제요소만 선택 

ul ~ p

ul 밑에 형제p만 선택된다.

    2. ul ~ p 
    <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>
    <p>문단입니다.</p>
    <p>문단입니다.</p>
    <div>
        <p>문단입니다.</p>
    </div>

ul ~ p {
    color: blue;
}

- 햄버거 버튼 클릭시 엑스 

input:checked (클릭 시) label 디자인 

    <!-- 햄버거 버튼 , 사이드 바  -->
    <div class="inner">
        <input type="checkbox" id="trigger">
        <label for="trigger">
            <span></span>
            <span></span>
            <span></span>
        </label>
        <div class="sidebar"></div>
    </div>

.inner {}
.inner input[id="trigger"] {
    display: none;
}

/* 버튼 클릭 시 엑스모양 */
.inner input[id="trigger"]:checked + label span:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
}
.inner input[id="trigger"]:checked + label span:nth-child(2) {
    opacity: 0;
}
.inner input[id="trigger"]:checked + label span:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
}

/* 버튼 클릭 -> 사이드바 left-250에서 0으로 나타나게 */
.inner input[id="trigger"]:checked ~ .sidebar {
    left: 0;
}
/* 버튼 클릭 -> 
엑스 위치 조절하기위해서 라벨을 relative에서 absolute로 변경 */
.inner input[id="trigger"]:checked + label {
    left: 210px; 
}
label[for="trigger"] {
    position: absolute;
    top: 20px;
    left: 10px;    
    display: inline-block;
    width: 30px;
    height: 20px;
    cursor: pointer;
    transition: 0.3s;
    /* border: 1px solid #000; */
}

/* 햄버거버튼 */
label[for="trigger"] span {
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    left: 0;
    background-color: #000;
    transition: 0.3s;
    z-index: 1;
}
label[for="trigger"] span:nth-child(1) {
    top: 0;
}
label[for="trigger"] span:nth-child(2) {
    top: 50%;
}
label[for="trigger"] span:nth-child(3) {
    top: 100%;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -250px;
    width: 250px;
    height: 100vh;
    background-color: pink;
    transition: 0.3s;
}

탭 가로,세로 슬라이더 + 도트 navigation

- 가로 탭 슬라이더 와이어프레임

- html

        tabs에 overflow:hidden
        items > div*3 / items가 움직인다.

<div class="tab-inner">
        <h1>test</h1>
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <div class="tabs">
            <div class="items">
                <div>content1</div>
                <div>content2</div>
                <div>content3</div>
            </div>
        </div>
        
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>

- css

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.tab-inner {
    /* container 역할 */
    height: 500px;
    border: 1px solid green;
}
input[name=tabmenu] {
    display: none;
}
.tabs {
    position: relative;
    border: 1px solid red;
    width: 800px;
    height: 400px;
}
.items {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 400px;
    transition: 0.5s;
}
.items div {
    border: 1px solid blue;
    width: 800px;
    height: 400px;
    float: left;
    box-sizing: border-box;
}
.btn {
    text-align: center;
}
.btn label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -800px;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -1600px;
}
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;
}

가로 탭 슬라이더 완성

html

<div class="tab-inner">
        <h1>test</h1>
        <input type="radio" name="tabmenu" id="tab1" checked>
        <input type="radio" name="tabmenu" id="tab2">
        <input type="radio" name="tabmenu" id="tab3">
        <div class="tabs">
            <div class="items">
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
                <div>
                    <img src="img/face-01.jpg" alt="">
                    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dolorum quas rem quos optio eaque accusamus veritatis saepe quod numquam obcaecati. Voluptates molestiae natus quis odit minima quam corrupti, accusantium hic!</p>
                    <p>
                        <b>Ackerley</b>
                        Media Analyst at <span>ZenDesk</span>
                    </p>
                </div>
            </div>
        </div>
        <div class="btn">
            <label for="tab1"></label>
            <label for="tab2"></label>
            <label for="tab3"></label>
        </div>
    </div>

css

.tab-inner {
    /* container 역할 */
    height: 500px;
    /* border: 1px solid green; */
}
.tab-inner h1 {
    text-align: center;
}
input[name=tabmenu] {
    display: none;
}
.tabs {
    position: relative;
    /* border: 1px solid red; */
    width: 800px;
    height: 400px;
    overflow: hidden;
}
.items {
    position: absolute;
    top: 0;
    left: 0;
    width: 2400px;
    height: 400px;
    transition: 0.5s;
}
.items div {
    /* border: 1px solid blue; */
    padding: 50px;
    width: 800px;
    height: 400px;
    float: left;
    box-sizing: border-box;
    text-align: center;
}
.items div img {
    width: 100px;
    border-radius: 50%;
}
.items div p b {
    display: block;
}
.items div p span {
    color: orange;
}
.btn {
    text-align: center;
}
.btn label {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: lightgray;
    cursor: pointer;
}
input[id=tab1]:checked ~ .tabs .items {
    left: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    left: -800px;
}
input[id=tab3]:checked ~ .tabs .items {
    left: -1600px;
}

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;
    border-radius: 50%;
}

- 세로 탭 슬라이더 (가로 슬라이더에서 css만 수정)

/* items의 가로너비를 800px로 바꾸고 items위치 top으로 조정 */
.items {
    position: absolute;
    top: 0;
    left: 0;
    /* width: 2400px; */
    width: 800px;
    height: 400px;
    transition: 0.5s;
}
input[id=tab1]:checked ~ .tabs .items {
    /* left: 0; */
    top: 0;
}
input[id=tab2]:checked ~ .tabs .items {
    /* left: -800px; */
    top: -400px;
}
input[id=tab3]:checked ~ .tabs .items {
    /* left: -1600px; */
    top: -800px;
}