포트폴리오 만들기

반응형 웹

화면 사이즈를 줄이게 되면 메뉴가 사라지면서 햄버거 아이콘이 나오는걸 구현하려고 합니다.

기존의 UI를 구성하면서 만들었던 사이즈는 가장 작은 사이즈부터 적용이 됩니다.

반응형 웹 헤더

메뉴와 다크모드가 기본 가장 작은 사이즈 일때는 안보이게 하고, md 사이즈 이상일 때부터는 보이게 설정합니다.

<!-- 메뉴 & 다크모드 -->
<div class="hidden md:flex items-center gap-x-6">

그 다음
햄버거 아이콘이 나오게 설정하기 위해 기존 메뉴 & 다크모드 밑에 button을 만들어 줍니다.

제일 작은 사이즈에서는 보이지만 md이상일 때부터는 안보이기 만들기 위해
class="md:hidden"을 추가해줍니다.

<button
id="menuToggle"
class="md:hidden p-2 text-gray-700 dark:text-white"
>
  <i class="fas fa-bars text-2xl"></i>
</button>

작은 사이즈 메뉴

header 밑에

<aside
  class="block md:hidden fixed right-0 inset-y-0 w-64 bg-white dark:bg-gray-800 shadow-lg"
>
  <button id="closeMenu" class="p-2 m-4 text-gray-700 dark:text-white">
    <i class="fas fa-times text-2xl"></i>
  </button>
  <nav class="flex flex-col space-y-4 mt-10 px-6">
    <a href="#home" class="hover:text-blue-500 transition-colors">홈</a>
    <a href="#about" class="hover:text-blue-500 transition-colors">소개</a>
    <a href="#skills" class="hover:text-blue-500 transition-colors">기술</a>
    <a href="#projects" class="hover:text-blue-500 transition-colors"
      >프로젝트</a
    >
    <a href="#contact" class="hover:text-blue-500 transition-colors">연락처</a>
    <button
      id="darkModeToggleMobile"
      class="p-2 w-full rounded-full bg-gray-200 dark:bg-gray-700 focus:outline-none focus:ring focus:ring-blue-500"
    >
      <i class="fas fa-moon text-gray-700 dark:text-yellow-400"></i>
    </button>
  </nav>
</aside>

• block md:hidden
  요소를 기본적으로 블록 레벨로 표시하지만, md(768px) 이상의 화면 크기에서는 숨깁니다.
  이는 작은 화면(모바일)에서만 메뉴가 보이도록 설정합니다.

• fixed right-0 inset-y-0 w-64
  요소를 화면의 오른쪽에 고정하고, 세로 방향으로 상하 꽉 차게 설정합니다.
  너비를 16rem(256px)로 지정하여 모바일 메뉴의 크기를 정의합니다.

• bg-white dark:bg-gray-800
  라이트 모드에서는 배경색을 흰색(bg-white)으로, 다크 모드에서는 어두운 회색(dark:bg-gray-800)으로 설정합니다.
  이는 다크 모드와 라이트 모드에 따라 스타일이 달라지도록 만듭니다.

메뉴를 열고 닫기

메뉴를 열고 닫는 모션은 사라지는 것이 아니라 메뉴가 x축 길이만큼 오른쪽으로 들어갔다가 왼쪽으로 오는 겁니다.
이때 transition 효과에 의해서 메뉴가 왼쪽으로 이동할 때 부드럽게 이동하게 되는 겁니다.

tailwind에서 x축 너비만큼 우측으로 이동시키는 방법은 translate-x-full 하면 됩니다.

translate-x-full 이 것을 지우면 다시 나타나고 없어지고를 구현할 수 있습니다.

aside에 id="mobileMenu"를 추가해줍니다.

// 모바일 메뉴 열기
document.getElementById('menuToggle').addEventListener('click', () => {
mobileMenu.classList.toggle('translate-x-full'); });
document.getElementById('closeMenu').addEventListener('click', () => {
mobileMenu.classList.add('translate-x-full'); }); initialTheme();

• document.getElementById('menuToggle').addEventListener('click', ...)
  메뉴 버튼(menuToggle)을 클릭하면, 모바일 메뉴(mobileMenu)의 상태를 전환하는 이벤트 리스너를 추가합니다.
  이를 통해 메뉴가 열리거나 닫히는 동작을 제어합니다.

• mobileMenu.classList.toggle('translate-x-full')
translate-x-full 클래스를 추가하거나 제거하여 메뉴의 가로 이동 애니메이션을 제어합니다.

  • 클래스가 제거되면 메뉴가 화면에 표시됩니다.
  • 클래스가 추가되면 메뉴가 화면 밖으로 이동하여 숨겨집니다.

• document.getElementById('closeMenu').addEventListener('click', ...)
  닫기 버튼(closeMenu)을 클릭하면, mobileMenu에 translate-x-full 클래스를 강제로 추가하여 메뉴를 닫습니다.

• translate-x-full
  메뉴를 X축으로 100% 이동시켜 화면에서 숨깁니다.
  이 클래스의 추가 및 제거를 통해 메뉴가 슬라이드로 열리고 닫히는 효과를 제공합니다.

그다음 위로 나타내기 위해 z-20과 부드러운 효과를 주기 위해 aside class에
"transition-transform duration-300 z-20"을 추가합니다.

<aside
  id="mobileMenu"
  class="block md:hidden fixed right-0 inset-y-0 w-64 bg-white dark:bg-gray-800 shadow-lg translate-x-full transition-transform duration-300 z-20">

반응형 웹 스타일링

나머지 섹션 전체도 반응형으로 만들어 보려고 합니다.
모바일 화면 사이즈에서는 홈 섹션이 가로 배치가 됐던 컨텐츠들이 세로로 배치가 되는 것입니다. 이는 소개 섹션도 마찬가지 입니다.

Home

Home section에서는 가로 배치가 됐던 컨텐츠들을 세로 배치로 바꿔야 해서
class에 flex-col md:flex-low로 바꾸어 줍니다.

<!-- Home Section -->
<section class="flex flex-col md:flex-low justify-between items-center mb-12">

이미지는 mb-6 md:mb-0 md:mr-10 클래스 추가

<!-- 이미지지 -->
<div id="home" class="shrink-0 mb-6 md:mb-0 md:mr-10">

소개 글 또한 글이 가운데 정렬 시키기 위해 text-center md:text-right로 설정 해줍니다.

<!-- 소개 -->
<div class="text-center md:text-right">

About

About section에서는 2개로 배치되는 것을 모바일에서는 1개가 배치 되어야 하기 때문에
gird-cols-1 md:grid-cols-2를 추가해줍니다.

<!-- About Section -->
<div class="grid gird-cols-1 md:grid-cols-2 gap-6">

Skills

Skills section에서는 3개로 배치되던 기술들을 모바일에서는 2개씩 배치 grid-cols-2 md:grid-cols-3

<!-- Skills -->
<div class="grid grid-cols-2 md:grid-cols-3 gap-4">

Projects & Contact

projects와 Contact sections에서는 2개씩 배치되는 것들을 1개씩 배치 grid-cols-1 md:grid-cols-2

부드러운 스크롤 만들기

페이지 내 링크를 클릭했을 때, 해당 섹션으로 부드럽게 스크롤되도록 설정하면 사용자의 경험이 개선 됩니다.
이는 태그에 scroll-smooth의 클래스를 추가하면 됩니다.

<html lang="ko" class="scroll-smooth">

스크롤 여백 설정하기

고정된 헤더가 있을 때, 페이지 내 앵커 링크를 클링학면 해당 섹션의 상단이 헤더 뒤에 가려지는 경우가 있습니다. 이 문제를 해결하려면 CSS의 scroll-margin-top 속성을 사용하여 상단에 여백을 추가해야 합니다.

<style>
  [id] {
    scroll-margin-top: 75px;
  }
</style>

이 스타일은 id 속성을 가진 모든 요소에 적용되어, 스크롤 시 상단에 75px의 여백을 줍니다.