웹사이트 :  https://braverokmc79.github.io/tailwind-bookmark/

소스 :  https://github.dev/braverokmc79/tailwind-bookmark

1.프로젝트 설정

tailwind.config.js

module.exports = {
  content: ['./*.html'],
  theme: {
    screens: {
      sm: '480px',
      md: '768px',
      lg: '1020px',
      xl: '1440px',
    },
    extend: {
      colors: {
        softBlue: 'hsl(231, 69%, 60%)',
        softRed: 'hsl(0, 94%, 66%)',
        grayishBlue: 'hsl(229, 8%, 60%)',
        veryDarkBlue: 'hsl(229, 31%, 21%)',
      },
      fontFamily: {
        sans: ['Rubik', 'sans-serif'],
      },
      backgroundImage: () => ({
        dots: "url('../images/bg-dots.svg')",
      }),
    },
  },
  plugins: [],
}

• 프로젝트 생성:

  • 웹사이트 프로젝트를 생성한 후, 간단한 Tailwind 스타터를 복사해 Bookmark라는 새 이름으로 프로젝트를 설정합니다.
  • 이미지 에셋은 Tailwind 프로젝트의 bookmark 폴더에서 가져와 프로젝트 루트에 복사합니다.

• HTML 설정:

  • index.html 파일의 제목을 "bookmark website"로 변경합니다.
  • 구글 폰트에서 "Rubik" 폰트를 가져와 사용할 계획입니다. 이를 위해 400(보통)과 700(굵게) 스타일을 선택해 링크를 추가합니다.

• Tailwind 설정:

  • tailwind.config.js 파일에서 화면 크기와 색상을 정의합니다.
  • 화면 크기 설정:
    • 작은 화면(sm): 480px
    • 중간 화면(md): 768px
    • 큰 화면(lg): 1020px
    • 매우 큰 화면(xl): 1440px
  • 색상 설정:
    • softBlue, softRed, grayishBlue, veryDarkBlue 등의 사용자 정의 색상.
  • 폰트 설정: Rubik 폰트를 sans-serif 폰트 계열로 설정.

• Tailwind CLI와 Live Server 실행:

  • 통합 터미널에서 npm run watch 명령어로 Tailwind CLI를 실행하고, Live Server로 웹사이트를 확인합니다.

• 다음 단계:

  • 다음 비디오에서는 헤더와 네비게이션을 작업할 예정입니다. 햄버거 메뉴를 포함할지 결정 후 진행할 예정입니다.

2.Navbar

    <nav class="container relative mx-auto p-6">
      <!-- 네비게이션 항목을 위한 플렉스 컨테이너 -->
      <div class="flex items-center justify-between space-x-20 my-6">
        <!-- 로고 -->
        <div class="z-30">
          <img src="images/logo-bookmark.svg" alt="" id="logo" />
        </div>
    
        <!-- 메뉴 항목 -->
        <div class="hidden items-center space-x-10 uppercase text-grayishBlue md:flex">
          <a href="#features" class="tracking-widest hover:text-softRed">기능</a>
          <a href="#download" class="tracking-widest hover:text-softRed">다운로드</a>
          <a href="#faq" class="tracking-widest hover:text-softRed">자주 묻는 질문</a>
          <a href="#" class="px-8 py-2 text-white bg-softRed border-2 border-softRed rounded-lg shadow-md hover:text-softRed hover:bg-white">로그인</a>
        </div>
        <!-- 햄버거 버튼 -->
        <button id="menu-btn" class="z-30 block md:hidden focus:outline-none hamburger">
          <span class="hamburger-top"></span>
          <span class="hamburger-middle"></span>
          <span class="hamburger-bottom"></span>
        </button>
      </div>


      <!-- 모바일 메뉴 -->
      <div id="menu" class="fixed inset-0 z-20 hidden 
      flex-col items-center self-end w-full h-full 
      m-h-screen px-6 py-1 pt-24 pb-4 tracking-widest
       text-white uppercase divide-y divide-gray-500 
       opacity-90 bg-veryDarkBlue">
       
        <div class="w-full py-3 text-center">
          <a href="#features" class="block hover:text-softRed">기능</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#download" class="block hover:text-softRed">다운로드</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#faq" class="block hover:text-softRed">자주 묻는 질문</a>
        </div>
        <div class="w-full py-3 text-center">
          <a href="#" class="block hover:text-softRed">로그인</a>
        </div>
      </div>
    </nav>

    

• 네비게이션 바 구현:

  • <nav> 태그를 사용하여 네비게이션 바를 생성.
  • 로고와 메뉴 항목을 배치할 플렉스 컨테이너를 설정.
  • 로고는 images/logo-bookmark.svg 파일을 사용하며, 나중에 JavaScript로 다룰 수 있도록 id="logo"를 부여.

• 메뉴 항목:

  • 기능, 다운로드, 자주 묻는 질문, 로그인과 같은 항목을 상단 메뉴로 배치.
  • 각 메뉴 항목은 hover 시 빨간색(softRed)으로 바뀌도록 설정.
  • 로그인 버튼은 hover 시 글자색이 빨간색으로, 배경이 흰색으로 변경되도록 구현.
  • 작은 화면에서는 숨기고, 중간 크기 이상의 화면(md)에서는 flex로 표시되도록 설정.

• 햄버거 버튼:

  • 작은 화면에서만 보이도록 햄버거 버튼을 구현.
  • 나중에 JavaScript로 햄버거 메뉴를 클릭했을 때 동작하도록 구현 예정.

• 모바일 메뉴:

  • 햄버거 버튼 클릭 시 표시될 모바일 메뉴를 구현.
  • fixed 레이아웃을 사용해 전체 화면을 덮는 스타일로 설정.
  • 배경은 어두운 파란색(veryDarkBlue), 텍스트는 흰색으로 설정했으며, 항목을 클릭할 때마다 빨간색(softRed)으로 강조되도록 구현.

• 설명 및 개발 전략:

  • 메뉴의 항목들은 작은 화면에서는 보이지 않다가, 중간 크기 이상(md) 화면에서만 플렉스 컨테이너로 보이게 설정.
  • 로고는 z-index를 30으로 설정하여 나중에 모바일 메뉴 위로 오도록 함.
  • JavaScript로 햄버거 버튼 클릭 시 로고 색상 및 메뉴 동작을 제어할 예정.
  • 본문에는 overflow-x-hidden 속성을 추가하여 수평 스크롤바가 나타나지 않도록 함.

• 향후 작업:

  • 다음 단계에서는 네비게이션 바 외에 히어로 섹션(Hero Section)을 작업할 예정. 여기에는 텍스트 콘텐츠, 이미지, 배경 이미지 등이 포함될 것.
  • 햄버거 메뉴에 관련된 JavaScript는 나중에 구현할 계획.

2.Hero 섹션 만들기

우선, Hero 섹션을 만들기 위해 <section> 태그를 사용하겠습니다. 이 섹션은 전체적으로 이미지와 텍스트를 담고 있는 컨테이너로 구성됩니다

<section id="hero">
  <!-- 이미지와 내용이 들어갈 컨테이너 -->
  <div class="container flex flex-col-reverse mx-auto p-6 lg:flex-row lg:mb-0">

위 코드에서 flex-col-reverse는 작은 화면에서는 이미지가 텍스트 아래에 배치되도록 하고, 큰 화면에서는 lg:flex-row로 바꾸어 이미지와 텍스트를 나란히 배치하는 역할을 합니다.

텍스트와 버튼 구성

텍스트 부분을 먼저 구성하고, 그 아래에 버튼을 배치하겠습니다.

<!-- 내용 -->
<div class="flex flex-col space-y-10 lg:mt-16 lg:w-1/2">
  <h1 class="text-3xl font-semibold text-center lg:text-6xl lg:text-left">
    간단한 북마크 관리자
  </h1>
  <p class="max-w-md mx-auto text-lg text-center text-gray-400 lg:text-2xl lg:text-left lg:mt-0 lg:mx-0">
    즐겨찾는 웹사이트를 정리할 수 있는 깨끗하고 간단한 인터페이스입니다. 새 브라우저 탭을 열면 사이트가 즉시 로드됩니다. 무료로 사용해 보세요.
  </p>

위의 h1 태그는 Hero 섹션의 큰 제목입니다. 작은 화면에서는 중앙에 정렬(text-center)되고, 큰 화면에서는 왼쪽으로 정렬(lg:text-left)됩니다.
p 태그는 부가 설명 텍스트로, text-gray-400 클래스로 회색 톤을 적용했습니다.

버튼 추가

이제 두 개의 버튼을 추가하겠습니다. 하나는 Chrome에서 다운로드 버튼, 다른 하나는 Firefox에서 다운로드 버튼입니다.

<!-- 버튼 컨테이너 -->
<div class="flex items-center justify-center w-full space-x-4 lg:justify-start">
  <a href="#" class="p-4 text-sm font-semibold text-white bg-softBlue rounded shadow-md border-2 border-softBlue md:text-base hover:bg-white hover:text-softBlue">
    Chrome에서 다운로드
  </a>
  <a href="#" class="p-4 text-sm font-semibold text-black bg-gray-300 rounded shadow-md border-2 border-gray-300 md:text-base hover:bg-white hover:text-gray-600">
    Firefox에서 다운로드
  </a>
</div>

이 두 버튼은 flex를 이용해 수평으로 정렬하고, 버튼 간의 간격은 space-x-4로 설정했습니다. 버튼들은 hover시 배경색이 변경되도록 설정했습니다.

이미지 섹션

이미지를 삽입하는 부분을 추가하겠습니다.

<!-- 이미지 -->
<div class="relative mx-auto lg:mx-0 lg:mb-0 lg:w-1/2">
  <div class="bg-hero"></div>
  <img src="images/illustration-hero.svg" alt="" class="relative z-10 lg:top-24 xl:top-0 overflow-x-visible" />
</div>

이미지 컨테이너는 relative로 위치를 설정했고, 이미지는 z-index를 10으로 설정해 배경보다 앞에 오도록 했습니다.
작은 화면에서는 이미지를 자동으로 중앙에 배치(mx-auto), 큰 화면에서는 왼쪽에 맞춰 정렬(lg:mx-0)했습니다.

    <!-- Hero Section -->
<section id="hero">
  <!-- 이미지와 내용이 들어갈 컨테이너 -->
  <div class="container flex flex-col-reverse mx-auto p-6 lg:flex-row lg:mb-0">
    <!-- 내용 -->
    <div class="flex flex-col space-y-10 lg:mt-16 lg:w-1/2">
      <h1 class="text-3xl font-semibold text-center lg:text-6xl lg:text-left">
        간단한 북마크 관리자
      </h1>
      <p class="max-w-md mx-auto text-lg text-center text-gray-400 lg:text-2xl lg:text-left lg:mt-0 lg:mx-0">
        즐겨찾는 웹사이트를 정리할 수 있는 깨끗하고 간단한 인터페이스입니다.
        새 브라우저 탭을 열면 사이트가 즉시 로드됩니다. 무료로 사용해 보세요.
      </p>

      <!-- 버튼 컨테이너 -->
      <div class="flex items-center justify-center w-full space-x-4 lg:justify-start">
        <a
          href="#"
          class="p-4 text-sm font-semibold text-white bg-softBlue rounded shadow-md border-2
           border-softBlue md:text-base hover:bg-white hover:text-softBlue"
          >Chrome에서 다운로드</a
        >
        <a
          href="#"
          class="p-4 text-sm font-semibold text-black bg-gray-300 rounded shadow-md border-2
           border-gray-300 md:text-base hover:bg-white hover:text-gray-600"
          >Firefox에서 다운로드</a
        >
      </div>
    </div>

    <!-- 이미지 -->
    <div class="relative mx-auto lg:mx-0 lg:mb-0 lg:w-1/2">
      <div class="bg-hero"></div>
      <img
        src="images/illustration-hero.svg"
        alt=""
        class="relative z-10 lg:top-24 xl:top-0 overflow-x-visible"
      />
    </div>

  </div>
</section>

3.기능 및  탭 섹션

1. 기능 섹션 (Features Section)

<section id="features">
  <div class="container mx-auto mt-16 px-6">
    <h2 class="mb-6 text-4xl font-semibold text-center">기능</h2>
    <p class="max-w-md mx-auto text-center text-grayishBlue">
      저희의 목표는 즐겨찾는 웹사이트에 빠르고 쉽게 접근할 수 있도록 돕는 것입니다.
      북마크는 기기 간 동기화되므로 언제 어디서나 접근할 수 있습니다.
    </p>
  </div>
</section>

• 구조 설명: 이 섹션은 id="features"로 구분된 기능 섹션입니다. container 클래스를 사용해 가운데 정렬하고, Tailwind CSS 유틸리티 클래스를 사용해 여백과 텍스트 스타일링을 설정했습니다.
• 포인트: text-grayishBlue와 같은 커스텀 색상은 Tailwind 설정 파일에서 직접 정의할 수 있습니다.

2. 탭 섹션 (Tabs Section)

<section id="tabs">
  <div class="container relative mx-auto my-6 mb-32 mt-12 px-6">
    <div class="bg-tabs"></div>
    <!-- 탭 Flex 컨테이너 -->
    <div class="flex flex-col justify-center max-w-xl mx-auto mb-6 border-b md:space-x-10 md:flex-row">
      <!-- 탭 1 -->
      <div class="flex justify-center text-center cursor-pointer text-gray-600 border-b md:border-b-0 hover:text-softRed md:w-1/3 tab" data-target="panel-1">
        <div class="py-5 border-b-4 border-softRed" data-target="panel-1">간단한 북마크 추가</div>
      </div>
      <!-- 탭 2 -->
      <div class="flex justify-center text-center cursor-pointer text-gray-600 border-b md:border-b-0 hover:text-softRed md:w-1/3 tab" data-target="panel-2">
        <div class="py-5" data-target="panel-2">빠른 검색</div>
      </div>
      <!-- 탭 3 -->
      <div class="flex justify-center text-center cursor-pointer text-gray-600 border-b md:border-b-0 hover:text-softRed md:w-1/3 tab" data-target="panel-3">
        <div class="py-5" data-target="panel-3">쉬운 공유</div>
      </div>
    </div>
  </div>
</section>

• 구조 설명: 탭을 정의한 부분으로, 각각의 탭은 data-target 속성으로 특정 패널과 연동됩니다. 플렉스박스 레이아웃(flex), 텍스트 가운데 정렬(text-center), 그리고 마우스 호버 시 색상 변경을 위한 hover:text-softRed 등을 사용해 탭을 만들었습니다.
• 포인트: md:space-x-10은 md(중간 크기 화면 이상)에서만 간격을 적용하는 반응형 레이아웃입니다.

3. 패널 섹션 (Panel Section)

각 탭에 맞는 패널을 설정하는 부분입니다. 탭을 클릭하면 대응하는 패널이 보이도록 합니다.

패널 1

<div class="flex flex-col py-5 md:flex-row md:space-x-7 panel panel-1">
  <div class="flex justify-center md:w-1/2">
    <img src="images/illustration-features-tab-1.svg" alt="" class="relative z-10" />
  </div>
  <div class="flex flex-col space-y-8 md:w-1/2">
    <h3 class="mt-32 text-3xl font-semibold text-center md:mt-0 md:text-left">한 번의 클릭으로 북마크 추가</h3>
    <p class="max-w-md text-center text-grayishBlue md:text-left">
      북마크를 원하는 대로 정리하세요. 간단한 드래그 앤 드롭 인터페이스를 통해 즐겨찾는 사이트를 완벽하게 관리할 수 있습니다.
    </p>
    <div class="mx-auto md:mx-0">
      <a href="#" class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2">더 알아보기</a>
    </div>
  </div>
</div>

패널 2

<div class="flex flex-col hidden py-5 md:flex-row md:space-x-7 panel panel-2">
  <div class="flex justify-center md:w-1/2">
    <img src="images/illustration-features-tab-2.svg" alt="" class="relative z-10" />
  </div>
  <div class="flex flex-col space-y-8 md:w-1/2">
    <h3 class="mt-14 text-3xl font-semibold text-center md:mt-0 md:text-left">지능형 검색</h3>
    <p class="max-w-md text-center text-grayishBlue md:text-left">
      강력한 검색 기능을 통해 저장된 사이트를 빠르게 찾을 수 있습니다. 모든 북마크를 일일이 찾을 필요가 없습니다.
    </p>
    <div class="mx-auto md:mx-0">
      <a href="#" class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2">더 알아보기</a>
    </div>
  </div>
</div>

패널 3

<div class="flex flex-col hidden py-5 md:flex-row md:space-x-7 panel panel-3">
  <div class="flex justify-center md:w-1/2">
    <img src="images/illustration-features-tab-3.svg" alt="" class="relative z-10" />
  </div>
  <div class="flex flex-col space-y-8 md:w-1/2">
    <h3 class="mt-14 text-3xl font-semibold text-center md:mt-0 md:text-left">북마크 공유하기</h3>
    <p class="max-w-md text-center text-grayishBlue md:text-left">
      북마크와 컬렉션을 손쉽게 공유하세요. 클릭 한 번으로 공유 가능한 링크를 생성할 수 있습니다.
    </p>
    <div class="mx-auto md:mx-0">
      <a href="#" class="px-6 py-3 mt-4 font-semibold text-white border-2 border-white rounded-lg md:inline-flex bg-softBlue hover:bg-white hover:text-softBlue hover:border-softBlue hover:border-2">더 알아보기</a>
    </div>
  </div>
</div>

최종 정리

이 구조는 탭 인터페이스와 연결된 패널을 사용해 각각의 탭을 클릭할 때마다 관련된 패널이 보여지는 기능을 구현합니다. JavaScript를 추가해 탭 클릭 시 패널을 표시하거나 숨기는 기능을 완성할 수 있습니다.

JavaScript 예제 (탭 기능 활성화)

const tabs = document.querySelectorAll(".tab");
const panels = document.querySelectorAll(".panel");

tabs.forEach((tab) => {
  tab.addEventListener("click", function () {
    const target = tab.dataset.target;
    
    panels.forEach((panel) => {
      if (panel.classList.contains(target)) {
        panel.classList.remove("hidden");
      } else {
        panel.classList.add("hidden");
      }
    });
  });
});