Brad Taste 웹페이지 기본 레이아웃

홈페이지를 만들 때, 가장 많이 사용하는 레이아웃을 템플릿으로 만들었습니다.

💻 사용된 언어 및 프레임워크

HTML, CSS, UnoCSS(Tailwind CSS), AlpineJS

📙 사용법

웹페이지로 제작하려는 페이지 코드를<main-layout>으로 감싸주세요.

<main-layout>
    <div>
         페이지 컨텐츠
    <div>
</main-layout>

🏡 구조

main-layout을 구성하고 있는 meta 정보, header, footer 등은/components폴더 안에 있습니다.

main-layout의 파일은/layouts/main_layout.essepage입니다.

📝 추가 설명

- 레스폰시브 디자인

PC 화면 크기에서는 헤더에 로고와 메뉴 링크가 표시되고,
태블릿과 모바일 화면크기에서 햄버거 메뉴 버튼과 슬라이드 메뉴가 표시됩니다.

- 헤더메뉴

Essepage에서 제공하는pagePath를 활용해서 메뉴 링크에 해당하는 페이지에 접속했을 때 메뉴이름에 배경색이 들어가도록 제작되었습니다.

- 슬라이드 메뉴

슬라이드 메뉴바에서는 메뉴바가 표시되었을 때, 메뉴바의 뒤에 표시되는 웹페이지의 스크롤을 방지하는PreventScroll함수와 스크롤을 방지를 해제하는AllowScroll함수가 동작하고 있습니다.