반응형 웹사이트 - input, 속성/인접/형제 선택자

민겸·2023년 3월 22일
0

Making Portfolio

목록 보기
5/13

input과 선택자를 활용해 CSS만으로 메뉴 탭 만들기

<div> 태그와 <span> 태그 등을 이용해 stylesheet로 아이콘처럼 만든 다음

<input>태그에 checkbox 속성을 적용시키고, <label>태그와 연결한 후 가상선택자 :checked 를 이용해 아이콘을 클릭할 수 있게 만든다.

알맞은 선택자들을 사용해서 필요한 태그에만 style을 적용시키고, transform/transition 속성으로 부드러운 애니매이션을 넣는다.
클릭시 아이콘이 X자로 변하면서 메뉴창과 함께 부드럽게 오른쪽으로 이동한다.

실습

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>input 태그의 :checked와 확장선택자</title>

    <link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
    
    <!-- <ul>
        <li>목록1</li>
        <li>목록2</li>
        <li>목록3</li>
    </ul>
    <p>문단입니다.</p>
    <p>문단입니다.</p>
    <div>
        <p>div안에 자식 p입니다.</p>
    </div>
    <p>문단입니다.</p> -->

    <div class="container">
        <input type="checkbox" id="trigger">
        <label for="trigger">
            <span></span>
            <span></span>
            <span></span>
        </label>
        <div class="sidebar">
            <p>1번 태그입니다</p>
            <p>2번 태그입니다</p>
            <p>3번 태그입니다</p>
            <p>4번 태그입니다</p>
        </div>
    </div>
    
</body>
</html>

CSS

/* Google Web Fonts CDN */
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap');

/* Fontawesome 4.7 */
@import url('https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

body{
    font-family: 'Montserrat', sans-serif;

}
/* 선택자의 활용 */
/* ul + p{
    color: red;
} */

/* 선택자를 input과 함께 활용 */

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

label[for=trigger]{
    /* border: 1px solid red; */
    width: 30px;
    height: 20px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
    transition: 0.3s;
}

label[for=trigger] span{
    display: block;
    height: 2px;
    background-color: black;
    width: 100%;
    position: absolute;
    left: 0;
    transition: 0.3s;
    z-index: 100;
}

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

input[id=trigger]:checked + label span:nth-child(1){
    top: 50%;
    transform: rotate(45deg);
}
input[id=trigger]:checked + label span:nth-child(2){
opacity: 0;
}
input[id=trigger]:checked + label span:nth-child(3){
    top: 50%;
    transform: rotate(-45deg);
}

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


input[id=trigger]:checked ~ .sidebar{
    left: 0;
}

input[id=trigger]:checked + label{
    left: 250px;
}

0개의 댓글