햄버거 버튼 만들기 - 1. 기본 모양

티스토리 뷰

기록

햄버거 버튼 만들기 - 1. 기본 모양

als982001 2023. 9. 14. 15:22

얼마 전에 배웠던 햄버거 버튼 만들기를 복습할 것이다. 햄버거 버튼이란 위의 이미지처럼 3개의 선이 가로로 놓여져 있는 버튼이다. 이 버튼을 처음부터 만들어보자. html 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <main>
      <button type="button" class="hamburger">
        <span class="button_text">햄버거 버튼을 위한 선</span>
      </button>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

1. 대략적인 버튼 크기 설정

우선 대략적인 버튼의 크기를 설정할 것이다. 가로, 세로 200px인 정사각형이 적당할 것 같다. 이를 위해 button을 아래처럼 적절히 설정한다.

/* 버튼 초기 설정 */
button {
  appearance: none;
  border: 0;
  padding: 0;
  background-color: transparent;
  border-radius: 0;
}

main {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hamburger {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  position: relative;
}

크게 어려울 것이 없는 부분이다. 편의를 위해 border로 버튼의 크기를 알 수 있게 했다. 나중에 border는 지울 것이다.

2. 햄버거 버튼의 가운데 선 만들기

가운데 선은 button의 span을 이용해 만들 것이다. 이를 위해 span의 텍스트를 숨기고 span을 적절히 수정해 (선처럼 보이게) 선을 만들어야 한다.

.button_text {
  /* 글자를 숨기는 부분 */

  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: rgba(0, 0, 0, 0);

  /* ===== */

  /* 버튼의 선을 그리는 부분 */

  width: 150px;
  height: 10px;
  background-color: black;
  border-radius: 5px;

  /* ===== */

  /* 선을 가운데로 맞추는 부분 */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

우선 글자를 숨기는 부분이다. width, height, font-size 등 글자를 숨기기 위해 가능할 것 같은 모든 수단을 이용하였다. 이를 통해 글자를 지울 수 있다. 다음은 선을 그리는 부분이다. 가로 150px, 세로 10px정도가 적절한 것 같았다. 이를 위해 width, height의 값을 각각 150px, 10px로 설정한 후 배경색을 검정색으로 설정하였다. 마지막으로 선을 가운데로 맞추는 부분이다. position을 absoulte로 설정하여 button을 기준으로 위치를 조정할 수 있게 하였다. 그리고 left, top을 각각 50%로 설정하여 span을 button의 가운데로 옮겼다. 정확히는 span의 왼쪽 윗 부분을 가운데로 옮겼다.

그래서 선을 정확히 button의 가운데로 위치시키기 위해 transform을 이용하였다. transform을 이용해 자기 자신을 기준으로 50%씩 이동시켜 가운데로 선을 이동시켰다.

3. 위아래 선 추가하기

선을 위아래로 두 개 더 추가해야 한다. 이를 위해 span을 두 개 더 추가해도 된다. 하지만 이번에는 before와 after라는 가상 요소를 이용할 것이다. before와 after를 간단히 말하자면, before는 선택한 요소의 가장 앞에, after는 가장 뒤에 내용이나 장식을 추가할 수 있다. 여기서는 hamburger라는 버튼을 선택할 것이다. 간단한 확인을 위해 before와 after를 아래처럼 설정해보자.

.hamburger::before {
  content: "나는 Before다.";
  position: absolute;
  top: 0;
  left: 0;
  font-size: 20px;
}

.hamburger::after {
  content: "나는 After다.";
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 20px;
}

위의 css 코드는 hambergur를 선택하여 before, after를 설정하였다. 편의상 before는 왼쪽 위, after는 오른쪽 아래에 위치시켰다. 결과는 다음과 같다.

이처럼 before, after를 이용하면 선택한 요소의 앞, 뒤에 무언가를 추가할 수 있다.

before는 위, after는 아래의 선을 보여주게 할 것이다. 그런데 3개의 선은 모두 같은 모양이다. 그렇기에 button_text의 선 디자인 코드를 이용할 수 있을 것이다.

.button_text {
  /* 글자를 숨기는 부분 */

  width: 0;
  height: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: rgba(0, 0, 0, 0);

  /* ===== */

  /* 선을 가운데로 맞추는 부분 */

  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hamburger::before,
.hamburger::after,
.hamburger span {
  content: "";
  width: 150px;
  height: 10px;
  background-color: black;
  border-radius: 5px;
}

.button_text의 선을 그리는 부분을 위 코드의 마지막 부분처럼 수정하였다. 이를 통해 before, after, span 모두 동일한 디자인을 가지게 되었다.

하지만 버튼에는 선이 하나밖에 존재하지 않는 것처럼 보인다. 왜냐하면 지금은 before, after, span이 모두 겹쳐진 상태이기 때문이다. 그렇기에 before는 위로, after는 아래로 이동시켜야 한다. 그렇기에 before, after도 position을 absolute로 설정한 후, 적절히 위치를 조정할 것이다.

.hamburger::before,
.hamburger::after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.hamburger::before {
  margin-top: -50px;
}

.hamburger::after {
  margin-top: 50px;
}

이를 통해 버튼 속에 3개의 선을 만들 수 있었다.

https://developer.mozilla.org/ko/docs/Web/CSS/transform

transform - CSS: Cascading Style Sheets | MDN

CSS transform 속성으로 요소에 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있습니다. transform은 CSS 시각적 서식 모델의 좌표 공간을 변경합니다.

developer.mozilla.org

https://developer.mozilla.org/ko/docs/Web/CSS/::after

::after (:after) - CSS: Cascading Style Sheets | MDN

CSS에서, ::after 는 선택한 요소의 맨 마지막 자식으로 의사 요소를 하나 생성합니다. 보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가할 때 사용합니다. 기본값은 인라인입니다.

developer.mozilla.org

'기록' 카테고리의 다른 글

햄버거 버튼 만들기 - 3. 클릭 시 모양 바꾸기 (0)	2023.09.15
햄버거 버튼 만들기 - 2. 클릭된 버튼의 모양 (0)	2023.09.15
Next.js에서 npm run build 시 생겼던 에러 (1)	2023.09.03
개인 Next.js 프로젝트 현재까지 후기 (0)	2023.08.31
useRef와 forwardRef (0)	2023.08.13

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/06 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

글 보관함

기록창고

티스토리 뷰