헤더 반응형으로 만들기 - 모바일 버전 헤더 만들기

 

 

헤더 반응형으로 만들기

 

 

 

접속하는 유저들 절반 이상은 모바일 환경에서 접속할 것이다.

아시겠지만 모바일 버전에서는 마우스 hover 이펙트가 적용될 수 없다.

그리고 화면 픽셀도 다르기 때문에 PC 버전으로 만든 웹을 모바일 환경에서 볼 때 UI가 굉장히 깨져 보일게 된다.

그렇기 때문에 모바일 버전, 웹을 반응형으로 만드는 것은 필수라고 생각한다.

 

반응형으로 헤더를 변경하는 방법은 아래 포스팅으로 정리를 했었다.

2024.09.28 - [LAB/LAB 홈페이지 제작] - 헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용

헤더 반응형으로 만들기 - React 에서 Tailwindcss 적용

 

 

PC버전 헤더 / 모바일 버전 헤더

 

왼쪽 헤더는 PC 버전 헤더이다. 

hover effect를 했을 때 사이드바가 위에서 내려오도록 만들 예정이다.

 

오른쪽 햄버거 이모티콘은 모바일 버전 헤더이다.

모바일 버전은 hover effect가 적용되지 않기 때문에 클릭을 통해서 사이드바가 오른쪽에서 나오도록 만들 예정이다.

 

 

 

PC버전 - Tailwind CSS 형제 요소에게 hover 효과 주기

 

먼저 PC버전 헤더부터 만들어보자.

 

위 그림에서 보았듯이 ABOUT / PROJECT / DEPARTMENT 헤더쪽을 hover 했을 때 사이드바가 나타내게 만들기 위해서는 위 레이아웃의 형제 요소에게 hover 효과를 부여해야 한다.

Tailwind CSS 에서는 "peer" 라는 것으로 형제 요소에게 부여할 수 있다.

 

 

형제 선택자 peer

 

아래 div 태그 두개는 형제 관계에 있다.

형제 선택자에게 hover effect를 부여하는 방법은 다음과 같다.

1. 최초에 hover 되는 태그 className에  "peer"  라고 추가해둔다
2. hover effect를 부여하고 싶은 자식 태그에게  "peer-hover: ~ "  적어둔다.
3. 아래 코드에서는 선행되는 div 태그에 hover 되면 아래 div 태그가 보여지게 된다.(hidden → block 변하게 됨)

<div>
   <div className="peer h-20 flex items-center">    // peer 클래스 추가
      <nav>
         <ul className="flex justify-end mr-12">
		   ...
         </ul>
      </nav>
   </div>
   // 형제요소에게 peer + hover 부여
   <div className="hidden peer-hover:block hover:block animate-[gotoDownLow_0.4s_ease-in-out_both]">
      <nav>
         <ul className="flex justify-end mr-12">
           ...
         </ul>
      </nav>
   </div>
</div>

 

첫번째 div 태그에서 마우스가 사라지고 두번째 div 태그 위에 마우스가 있어도 사이드바가 사라지지 않도록 만들기 위해 두번째 div 태그 내에 자체적으로 hover 를 두어 "block" 이 유지가 되도록 만들어주었다.

 

결과는 아래처럼 잘 만들어졌다.

 

PC version header

 

 

 

모바일 버전 - useState로 관리

 

앞에서도 언급했듯이 햄버거 아이콘을 클릭했을 때 사이드바가 나타나야 한다.

그렇기 때문에 CSS 요소를 React를 이용해 동적으로 할당시켜줘야 한다.

 

<button className="mr-5" onClick={toggleSidebar}>
	// 햄버거 아이콘 들어가는 공간
</button>

 

 

onClick 이벤트로 toggleSliderbar 함수가 실행되도록 만든다.

toggleSliderbar 함수는 다음과 같다. useState 값을 바꿔주는 역할을 한다.

const [isSidebarOpen, setIsSidebarOpen] = useState(false);

const toggleSidebar = () => {
  setIsSidebarOpen(!isSidebarOpen);
};

 

 

Boolean 값을 가지는 useState 값은 CSS 요소를 다음과 같이 할당 시켜줄 수 있다.

"isSlidebarOpen = True" 일 때(오픈되어 있을 때) "translate-x-0" 요소가 할당되게 된다.

<div
  className={`fixed h-full bg-white transform transition-transform
    ${isSidebarOpen ? "translate-x-0" : "translate-x-full"} 
    ${width <= 500 ? "w-full" : "w-[350px]"}
  `}
>

</div>

 

 

 

오픈된 사이드바 안에서는 사이드바를 닫을 수 있는 버튼을 추가해야 한다.

코드는 다음과 같다.

const [isSidebarOpen, setIsSidebarOpen] = useState(false);

const closeSidebar = () => {
  setIsSidebarOpen(false);
};

return(
	...
  <button
    className="absolute top-5 right-5 text-xl"
    onClick={closeSidebar}
  >
  </button>
)

 

 

결과물은 다음과 같다.

 

 

첨부된 동영상들이 프레임이 낮아서 딱딱하게 보이는데 transition 요소를 이용해서 최대한 부드럽게 나타나도록 만들었다.

자세한 코드는 내 깃헙을 참고하길 바란다.

https://github.com/dev-junseo/LAB_webpage/blob/main/lab-webpage/src/components/layout/Header.tsx

LAB_webpage/lab-webpage/src/components/layout/Header.tsx at main · dev-junseo/LAB_webpage