[CSS100DAYS :: 2일차] CSS로 인터렉티브 웹 구현 - 햄버거 버튼 만들기 (transform 응용하기)

이 포스트는 100 Days of CSS 사이트의 예제를 직접 구현한 내용을 정리해 포스팅한 것입니다. 제가 아주 오랫동안 블로그를 쉬었고... 그래서 저도 제가 이걸 어떻게 만들었는지 조금도 기억나지 않아서 되새기는 김에 함께 구현 방법에 대해서 알아보도록 하겠습니다.

완성본은 다음과 같습니다. (제가 만들었지만 꽤 잘 만든 편 아닌가요?)

먼저 html 코드를 보겠습니다. 여기서는 CSS 내용이 더 중요하기 때문에 대략적인 모양을 갖출 수 있도록 구성했습니다.

기본적으로 세 개의 바 모양은 같기 때문에 효율적으로 스타일을 주기 위해 bar 클래스를 통일했고, 클릭했을 때의 애니메이션 동작이 세 개가 전부 다르기 때문에 one two three 세 개의 별개의 클래스를 주어 조절하도록 하겠습니다.

<div class="frame">
  <div class="center">
        <div class="wrap_bar">
          <div class="bar one"></div>
          <div class="bar two"></div>
          <div class="bar three"></div>
        </div>
  </div>
</div>

가장 먼저 각 부분에 스타일을 주도록 하겠습니다. 예시로 나온 이미지가 다음과 같으므로 모양 및 스타일을 사이트에서 준 예시와 비슷하게 (그러나 색이 마음에 안드니까 절반은 제 마음대로) 구성해 봅니다. 나머지는 사이트 예시에 세팅되어 있는 것을 그대로 사용하였습니다.

* 배경색은 임의로 설정해주세요! *

.wrap_bar{
    width:6rem;
    height:4rem;
    cursor:pointer;
}

.bar{
    width:100%;
    height:10px;
    * transition 동작이 0.7s의 delay를 가지고 실행된다. *
    transition: 0.7s;
    background: #fff;
    background-color: #fff;
    border-radius: 3px;
    box-shadow: 0 2px 10px 0 rgb(0 0 0 / 30%);
}

.bar.two{
    margin: 10px auto;
}

자, 이렇게 기본적인 세팅이 완료되었습니다. 이제 클릭했을 때, 각각의 div가 움직이면서 X 모양을 만들 수 있도록 설정을 해 줄겁니다. 이를 위해서는 가장 먼저 JS를 통해 엘리먼트의 클릭 여부와 active인지 deactive인지를 알 수 있도록 해 줍니다.

(active 되었을 때 햄버거 모양에서 X모양으로, deactive 상태일 때 정반대의 모양으로 애니메이션이 움직이도록 두가지 class가 토글되도록 했군요. 지금이라면 이렇게 안 짤 것 같습니다.)

const menu = document.querySelector(".wrap_bar");
let count = 0;

menu.addEventListener("click",()=>{
    menu.classList.toggle("active");
    count ++;
    if((count&2) === 0){
        menu.classList.add('deactive');
    }
});

먼저 각각의 <bar>에 클래스와 동일한 애니메이션을 걸어주겠습니다. 저희는 각각의 바가 가진 동작을 하나, 그리고 그 역이 되는 동작 애니메이션 총 6개의 애니메이션 키프레임을 만들어 줄 것입니다.

.active .one{
    animation: one 0.7s forwards;
}

.active .two{
    animation: two 0.7s forwards;
}

.active .three{
    animation: three 0.7s forwards;
}

.deactive .one{
    animation: one-re 0.7s forwards;
}

.deactive .two{
    animation: two-re 0.7s forwards;
}

.deactive .three{
    animation: three-re 0.7s forwards;
}

먼저 one의 키프레임을 보도록 하겠습니다.

여기서 translate3d(x, y, z)는 해당 앨리먼트가 x축 y축 z축에 따라 이동할 수 있게 해주는데요. 그냥 rotate만 사용해서 옮기면 x모양이 예쁘게 안나오고 틀어져서 해당 기능을 사용하여 예쁘게 정 가운데에서 x 모양을 만들어 줄 수 있도록 추가한 것입니다.

transform:rotate()를 사용하면 해당 element를 회전 시켜주는 게 가능합니다. X 모양을 만들어야 하니 가장 위에 있는 one은 45도 회전을 해서 X의 한 부분을 맡아 주어야겠죠?

@keyframes one {
    0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
    transform: translate3d(0, 10px, 0) rotate(0);
    }
    100% {
    transform: translate3d(0, 10px, 0) rotate(45deg);
    }
}

@keyframes one-re {
    0% {
    transform: translate3d(0, 10px, 0) rotate(45deg);
    }
    50% {
    transform: translate3d(0, 10px, 0) rotate(0);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

그 다음 two는 제일 가운데 있는 bar를 담당합니다. 얘는 X모양이 될 때 자연스럽게 사라져야 하므로 scale() 이라는 앨리먼트의 크기를 조절하는 함수를 사용하여 사라지고 나타나게 만들어 주겠습니다. 여기서 margin:0과 opacity:0을 넣어주지 않으면 애매하게 two가 있던 자리에 빈 공간이 남아서 X모양을 예쁘게 잡아주지 못합니다.

@keyframes two {
    0% {
    transform :scale(1);
        opacity:1;
        margin:10px 0 10px
    }
    100% {
        transform: scale(0);
      opacity:0;
      margin:0;
    }
}

@keyframes two-re {
    0% {
      transform: scale(0);
      opacity:0;
      margin:0;
    }
    100% {
        transform :scale(1);
        opacity:1;
        margin:10px 0 10px
    }
}

three의 수정은 더욱 간단합니다. one의 동작을 정 반대 수치로 바꿔주면 three의 동작입니다.

@keyframes three {
    0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    }
    50% {
    transform: translate3d(0, -10px, 0) rotate(0);
    }
    100% {
    transform: translate3d(0, -10px, 0) rotate(-45deg);
    }
}

@keyframes three-re {
    0% {
        transform: translate3d(0, -10px, 0) rotate(-45deg);
    }
    50% {
    transform: translate3d(0, -10px, 0) rotate(0);
    }
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }
}

이렇게 간단하게 인터렉티브한 햄버거 모양 동작을 구현해 보았습니다. 해당 사이트에 진짜 재밌느 CSS 인터렉티브 연습을 할 수 있는 예제들이 여러개 있는데요. 앞으로도 하나하나 깨보면서 ineractive 웹 개발자로 더 성장할 수 있도록 공부를 해 보려 합니다. 그러면 읽어주셔서 감사했습니다!

100 Days CSS Challenge

 

제 코드는 아래의 코드펜에서도 확인할 수 있습니다. 시간 나실 때 좋아요 부탁드려요! 🙏

css challenge 100days : day1