[HTML/CSS] Hamburger slider 구현

아래는 SOPT 과제 Github 링크입니다.
전체 코드를 보고 싶으시면 참조해주세요 ☺️
https://github.com/NOW-SOPT-WEB/LeeJin

아래와 같이 햄버거 버튼을 누르면 오른쪽에서 메뉴바 모달창이 나오고
메뉴바 모달창에 있는 엑스 버튼을 누르면 모달창이 오른쪽으로 사라지는 기능입니다.

HTML/CSS 만으로도 label 태그와 input 태그의 checkbox, :checked 를 사용하면 구현할 수 있습니다.

<header class="header">
    <a href="index.html">
        <img src="assets/icon.png" alt="아이콘">
    </a>
    <h2 class="header-title">
        ༚✧⁎⁺˳찡탱's 쇼핑몰˳⁺⁎✧༚
    </h2>
    <div class="hamburger">
        <input type="checkbox" id="hamburger-toggle" class="hamburger-toggle"/>
        <label for="hamburger-toggle" class="fa-solid fa-bars"></label>
        <nav class="hamburger-menu">
            <label for="hamburger-toggle" class="fa-solid fa-xmark"></label>
            <ul>
                <li><a>관심상품 보기</a></li>
                <li><a href="cart.html">장바구니</a></li>
                <li><a>관리자</a></li>
            </ul>
        </nav>
    </div>
</header>

header에 있는 햄버거 버튼에 checkbox와 label 태그가 있습니다.
input 태그에 id를 지정해주고 해당 input 태그를 안 보이게 가려줍니다.
햄버거 버튼 UI는 fontawesome을 사용했는데 사용법은 아래 링크 참조해주시면 될 것 같아요 !
FontAwesome 사용법

해당 코드에서 label 태그는 두 가지 용도로 사용되고 있습니다.

1. 햄버거 메뉴를 열기 위한 버튼:
   첫 번째 label은 class="fa-solid fa-bars"로 설정되어 있고, 햄버거 아이콘(세 개의 가로 줄이 있는 아이콘)을 나타냅니다.
   이 label은 for 속성을 사용하여 id가 "hamburger-toggle"인 input 태그에 연결되어 있습니다.
   사용자가 이 label을 클릭하면, 실제로는 id가 "hamburger-toggle"인 체크박스를 클릭하는 것과 같은 효과를 낳습니다.
   따라서 사용자는 실제 체크박스 대신 label을 클릭하여 햄버거 메뉴를 토글할 수 있습니다.

2. 햄버거 메뉴를 닫기 위한 버튼:
   두 번째 label은 class="fa-solid fa-xmark"로 설정되어 있고, X 마크 아이콘(닫기 아이콘)을 나타냅니다.
   이 label 역시 for 속성을 통해 "hamburger-toggle" 체크박스에 연결되어 있습니다.
   이 label을 클릭하면, 햄버거 메뉴가 닫히는데, 이는 체크박스의 체크가 해제되기 때문입니다.

이렇게 label 태그를 사용하면 실제 input 태그 요소가 화면에서 숨겨져 있거나 스타일링이 어렵더라도, 사용자에게 보이는 label 요소를 클릭할 수 있는 버튼으로 만들 수 있습니다.
이 방법은 사용성을 향상시키고, 더 나은 사용자 인터페이스 디자인을 가능하게 합니다.

css는 아래와 같습니다.

.header {
    display: flex;
    align-items: center;

    position: fixed;
    z-index: 1;

    background-color: rgba(191, 163, 215, 0.7);

    top: 0;
    width: calc(100% - 3.7rem);
    padding: 1rem;
    margin: 1.5rem;

    img {
        width: 2rem;
        padding: 0;
        margin: 0;
    }

    .header-title {
        display: flex;
        justify-content: center;

        width: 100%;
        margin: 0;

        color: black;
    }
}

.hamburger-toggle {
    position: absolute;
    opacity: 0;   /* 실제로 체크박스가 보이면 안 되니까 */

    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    padding: 0;

    cursor: pointer;
}

.hamburger label {
    font-size: 1.5rem;
    cursor: pointer;
}


.hamburger-menu {
    position: fixed;

    top: 0;
    right: 0;
    width: 20%;
    height: 100%;

    background: white;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.7);
    transform: translateX(100%);
    transition: transform 0.3s ease-out;
    padding: 1rem;

    ul {
        margin-top: 3rem;
    }
    li {
        list-style: none;
        padding: 1.5rem 0;
        cursor: pointer;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        color: purple;
    }
}

.hamburger-toggle:checked + .fa-bars + .hamburger-menu {
    transform: translateX(0%);  /* 체크박스 체크될 때 모달 보이도록 */
}

체크박스 숨기는 속성으로 원래는 display: none; 을 사용했는데 그러니까 아예 누를 수 조차 없어지더라고요 !
이럴 때 opacity: 0; 이 유용한 것 같습니다.