[Tailwind CSS] 모바일 상단 Navbar, 햄버거 메뉴 버튼 만들기

[Tailwind CSS] 모바일 상단 Navbar, 햄버거 메뉴 버튼 만들기

기본적인 블로그 글을 작성하는 것이 블로그에는 도움이 되지는 않는 것 같지만,

현재 내 상황에서는 작은 것, 기본적인 것도 기록하는 것이 도움이 되기에 작성한다.

 

모바일 화면에서 next.js + react + tailwind css를 사용해서 Navbar를 만들어 보려고 한다.

 

 

 

결과부터 보면 다음과 같은 Navbar이다.

 

상단 Navbar는 우선 모바일에 맞추어서 보여지는 화면을 구성할 것인데,

코드를 한 줄 씩 작성해 보면 다음과 같을 것이다. (이하 return 구문 미포함)

return(
	<nav className="flex justify-between items-center p-4 bg-white">
	</nav>
);

요즘 HTML, CSS에서 UI를 작성할 때 박스 모델 flex를 대부분 사용한다.

 

Tailwind CSS는 className의 이름이 곧 CSS 스타일이 세팅된 선택자를 부여하는 것이다.

 

className은 flex는 다음과 같은 스타일이 세팅되어 있다.

.flex{
	display : flex
}

 

className justify-between은 다음과 같은 스타일이 세팅되어 있다.

.justify-between {
    justify-content: space-between;
}

박스 모델 flex에서 justify-content: space-between은 내부 Element들을 동일한 적정 간격을 두어 떨어트리는 것이다.

 

 

처음에 봤던 이미지를 다시 보면

햄버거 버튼, 사이트 제목, 검색 아이콘이 동일한 간격을 두고 떨어져 있는 것을 볼 수 있다.

 

 

className item-center는 세로 혹은 height 기준에서 가운데 정렬이 된 것으로 볼 수 있다.

.items-center {
    align-items: center;
}

 

className p-4는 padding 다음과 같은 스타일이 세팅되어 있다.

.p-4 {
    padding: 1rem/* 16px */;
}

 

1rem은 16px을 기준으로 배수 적용이 된다.

 

rem 단위는 부모 엘리먼트 등의 영향을 받지 않고 root 기준 1rem -> 16px로 적용이 되어서

1rem은 Just 16px 이기 때문에 rem 단위를 사용해 작업하는 것이 헷갈리지 않고 좋은 것 같다.

 

className p-2 는 padding : 0.5rem  /* 8px */ 을 적용한다.

classname p-1 은 padding : 0.25rem /* 4px */ 가 적용된다.

 

 

이제 배치시킬 준비는 끝났다.

Navbar 완성도 곧이다.

 

 

햄버거 버튼 배치시키자.

반응형

햄버거 버튼 코드다.

  <div className="md:hidden flex flex-col cursor-pointer">
    <div className="w-6 h-1 bg-black mb-1"></div>
    <div className="w-6 h-1 bg-black mb-1"></div>
    <div className="w-6 h-1 bg-black"></div>
  </div>

간단하게 설명하자면 다음과 같다.

 

md:hidden - 최소 너비 (가로) 768px 까지 display : none 으로 하여 보이지 않게 한다.

@media (min-width: 768px) {
    .md\:hidden {
        display: none;
    }
}

 

 

tailwind CSS 정의 기준으로 보통 768px 미만을 모바일 사이즈로 보는 것.

반응형이기 때문에 위와 같은 코드를 사용했다.

 

그 다음 중요한 것이 flex, flex-col 이다.

박스 모델을 flex로 하고, flex-col로 엘리먼트가 위에서 아래로 쌓이도록 구성한다.

 

className flex-col은 flex-direction을 column으로 하여, 위에서 아래 방향으로 엘리먼트가 구성되도록 한다.

.flex-col {
    flex-direction: column;
}

 

 

내부 구성된 div 들에 대한 설명

<div className="w-6 h-1 bg-black mb-1"></div>
<div className="w-6 h-1 bg-black mb-1"></div>
<div className="w-6 h-1 bg-black"></div>

w-6 : width 1.5rem /* 24px */

h-1 : height 0.25rem /* 4px */

bg-black : 색상 검정

mb-1 : margin-bottom 0.25rem /* 4px */

 

햄버거 버튼 모양을 이미지로 사용한 것이 아니라 코드로 구성한 것이다.

 

제목 텍스트는 다음과 같이 세팅이 되었다.

<h1 className="text-xl font-bold text-center flex-grow">토퍼프렌즈</h1>

 

 

검색 버튼 코드는 다음과 같다.

      <svg
        xmlns="http://www.w3.org/2000/svg"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        className="w-6 h-6 text-gray-800 hover:text-gray-600 cursor-pointer"
      >
        <circle cx="10" cy="10" r="8" />
        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 17l3 3" />
      </svg>

 

제목이 '[Tailwind CSS] 모바일 상단 Navbar 햄버거 메뉴 버튼 만들기' 이듯이

Navbar와 햄버거 메뉴 버튼 만들기에 중점을 두어서 설명하였다.

 

 

 

 

1. Navbar 컴포넌트를 만들었고

 

2. Main page.tsx에서 Navbar 컴포넌트를 호출하여서 구성하였다.

 

 

좀 슬픈 게 공부를 해두었던 것들을 자주 사용하지 않으면 까먹게 된다.

현재 회사에선 tailwind를 사용하지 않기 때문에 자주 까먹어서 그냥 블로그 글로 작성했다.

 

---

참고 및 이미지 사용 출처

 

https://css-tricks.com/almanac/properties/j/justify-content/

justify-content | CSS-Tricks

 

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

align-items - CSS: Cascading Style Sheets | MDN