웹사이트 :  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");
      }
    });
  });
});

4.FAQ 아코디언 만들기

이 섹션에서는 Tailwind CSS를 사용하여 자바스크립트 없이도 동작하는 FAQ 아코디언을 만드는 방법을 단계별로 설명합니다.

1. 아코디언 섹션 생성

먼저, FAQ 아코디언을 담을 section 태그를 생성하고 id를 지정합니다.

<!-- FAQ 아코디언 -->
<section id="faq-accordion">
  <!-- 내용이 여기에 들어갑니다 -->
</section>

2. 메인 컨테이너 설정

div 태그를 사용하여 메인 컨테이너를 만들고, Tailwind CSS 클래스를 통해 스타일을 지정합니다.

<!-- 메인 컨테이너 -->
<div class="container mx-auto px-6 mb-32">
  <!-- 내용이 여기에 들어갑니다 -->
</div>

• container: 콘텐츠의 너비를 제한하고 가운데 정렬을 도와줍니다.
•  
• mx-auto: 좌우 여백을 자동으로 설정하여 가운데 정렬을 유지합니다.
•  
• px-6: 좌우 패딩을 추가합니다.
•  
• mb-32: 하단에 여백을 추가하여 다음 섹션과의 간격을 둡니다.

3. 아코디언 컨테이너 생성

아코디언 전체를 감싸는 컨테이너를 생성하고 스타일을 지정합니다.

<!-- 아코디언 컨테이너 -->
<div class="max-w-2xl m-8 mx-auto overflow-hidden">
  <!-- 아코디언 탭들이 여기에 들어갑니다 -->
</div>

• max-w-2xl: 최대 너비를 2xl로 설정하여 아코디언의 폭을 제한합니다.
• m-8: 모든 방향에 여백을 추가합니다.
• mx-auto: 가운데 정렬을 유지합니다.
• overflow-hidden: 넘치는 콘텐츠를 숨깁니다.

4. 개별 탭 구조 만들기

각 FAQ 항목은 개별 탭으로 구성됩니다. 아래는 첫 번째 탭의 구조입니다.

<!-- 탭 1 -->
<div class="py-1 border-b outline-none group" tabindex="1">
  <!-- 탭 헤더 -->
  <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
    <!-- 탭 제목 -->
    <div class="transition duration-500 ease group-hover:text-red-500">
      Bookmark이란 무엇인가요?
    </div>
    <!-- 화살표 아이콘 -->
    <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
        <path
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          d="M1 1l8 8 8-8"
        />
      </svg>
    </div>
  </div>

  <!-- 탭 내용 -->
  <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
    <p class="py-2 text-justify text-gray-400">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
      repellat amet doloribus consequuntur eos similique provident
      tempora voluptates iure quia fuga dicta voluptatibus culpa
      mollitia recusandae delectus id suscipit labore?
    </p>
  </div>
</div>

설명:

1. 탭 컨테이너 (div 태그)

   • py-1: 상하 여백을 추가합니다.
   • border-b: 하단에 테두리를 추가합니다.
   • outline-none: 포커스 시 아웃라인을 제거합니다.
   • group: Tailwind CSS의 그룹 호버/포커스 기능을 활용하기 위한 클래스입니다.
   • tabindex="1": 키보드 내비게이션을 가능하게 합니다.

2. 탭 헤더 (div 태그)

   • flex: Flexbox 레이아웃을 사용합니다.
   • items-center: 수직 중앙 정렬을 합니다.
   • justify-between: 양쪽 끝으로 요소를 배치합니다.
   • py-3: 상하 패딩을 추가합니다.
   • text-gray-500: 텍스트 색상을 회색으로 설정합니다.
   • transition duration-500: 0.5초 동안의 전환 효과를 추가합니다.
   • cursor-pointer: 마우스 커서를 포인터로 변경하여 클릭 가능함을 나타냅니다.
   • group ease: 그룹 내 상태 변경 시 애니메이션 효과를 부드럽게 합니다.

3. 탭 제목 (div 태그)

   • transition duration-500 ease: 전환 효과를 부드럽게 설정합니다.
   • group-hover:text-red-500: 마우스를 올렸을 때 텍스트 색상이 빨간색으로 변경됩니다.

4. 화살표 아이콘 (div 태그)

   • transition duration-500 ease: 전환 효과를 부드럽게 설정합니다.
   • group-focus:-rotate-180: 탭이 활성화(포커스)되면 아이콘을 180도 회전시킵니다.
   • group-focus:text-red-500: 탭이 활성화되면 아이콘 색상이 빨간색으로 변경됩니다.
   • SVG 아이콘을 사용하여 화살표를 표시합니다.

5. 탭 내용 (div 태그)

   • overflow-hidden: 내용이 넘칠 경우 숨깁니다.
   • transition duration-500: 0.5초 동안의 전환 효과를 추가합니다.
   • group-focus:max-h-screen: 탭이 활성화되면 최대 높이를 화면 높이로 설정하여 내용을 표시합니다.
   • max-h-0: 초기 상태에서는 높이를 0으로 설정하여 내용을 숨깁니다.
   • ease: 전환 효과를 부드럽게 합니다.
   • p 태그에는 추가적인 패딩과 텍스트 정렬, 색상 설정이 되어 있습니다.

5. 추가 탭 생성

첫 번째 탭의 구조를 복사하여 여러 개의 FAQ 항목을 추가할 수 있습니다. 각 탭의 tabindex와 제목, 내용을 변경하면 됩니다.

<!-- 탭 2 -->
<div class="py-1 border-b outline-none group" tabindex="2">
  <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
    <div class="transition duration-500 ease group-hover:text-red-500">
      모바일 앱이 있나요?
    </div>
    <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
        <path
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          d="M1 1l8 8 8-8"
        />
      </svg>
    </div>
  </div>
  <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
    <p class="py-2 text-justify text-gray-400">
      모바일 앱에 대한 설명이 여기에 들어갑니다.
    </p>
  </div>
</div>

<!-- 탭 3 -->
<div class="py-1 border-b outline-none group" tabindex="3">
  <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
    <div class="transition duration-500 ease group-hover:text-red-500">
      다른 Chromium 브라우저도 지원되나요?
    </div>
    <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
      <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
        <path
          fill="none"
          stroke="currentColor"
          stroke-width="3"
          d="M1 1l8 8 8-8"
        />
      </svg>
    </div>
  </div>
  <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
    <p class="py-2 text-justify text-gray-400">
      Chromium 기반 브라우저에 대한 지원 내용이 여기에 들어갑니다.
    </p>
  </div>
</div>

• 각 탭마다 tabindex를 다르게 설정합니다 (tabindex="2", tabindex="3", 등).
• 탭 제목과 내용도 각 FAQ에 맞게 변경합니다.

6. 최종 HTML 구조

모든 탭을 포함한 최종 HTML 구조는 다음과 같습니다.

<!-- FAQ 아코디언 -->
<section id="faq-accordion">
  <!-- 메인 컨테이너 -->
  <div class="container mx-auto px-6 mb-32">
    <!-- 아코디언 컨테이너 -->
    <div class="max-w-2xl m-8 mx-auto overflow-hidden">
      
      <!-- 탭 1 -->
      <div class="py-1 border-b outline-none group" tabindex="1">
        <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
          <div class="transition duration-500 ease group-hover:text-red-500">
            Bookmark이란 무엇인가요?
          </div>
          <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
              <path
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                d="M1 1l8 8 8-8"
              />
            </svg>
          </div>
        </div>
        <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
          <p class="py-2 text-justify text-gray-400">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat,
            repellat amet doloribus consequuntur eos similique provident
            tempora voluptates iure quia fuga dicta voluptatibus culpa
            mollitia recusandae delectus id suscipit labore?
          </p>
        </div>
      </div>
      
      <!-- 탭 2 -->
      <div class="py-1 border-b outline-none group" tabindex="2">
        <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
          <div class="transition duration-500 ease group-hover:text-red-500">
            모바일 앱이 있나요?
          </div>
          <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
              <path
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                d="M1 1l8 8 8-8"
              />
            </svg>
          </div>
        </div>
        <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
          <p class="py-2 text-justify text-gray-400">
            모바일 앱에 대한 설명이 여기에 들어갑니다.
          </p>
        </div>
      </div>
      
      <!-- 탭 3 -->
      <div class="py-1 border-b outline-none group" tabindex="3">
        <div class="flex items-center justify-between py-3 text-gray-500 transition duration-500 cursor-pointer group ease">
          <div class="transition duration-500 ease group-hover:text-red-500">
            다른 Chromium 브라우저도 지원되나요?
          </div>
          <div class="transition duration-500 ease group-focus:-rotate-180 group-focus:text-red-500">
            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12">
              <path
                fill="none"
                stroke="currentColor"
                stroke-width="3"
                d="M1 1l8 8 8-8"
              />
            </svg>
          </div>
        </div>
        <div class="overflow-hidden transition duration-500 group-focus:max-h-screen max-h-0 ease">
          <p class="py-2 text-justify text-gray-400">
            Chromium 기반 브라우저에 대한 지원 내용이 여기에 들어갑니다.
          </p>
        </div>
      </div>
      
      <!-- 추가 탭은 동일한 구조로 작성 -->
      
    </div>
  </div>
</section>

7. 추가 기능: 뉴스레터 및 푸터

마지막으로, 뉴스레터 섹션과 푸터를 추가하여 웹사이트를 완성할 수 있습니다. 또한, 메뉴가 원활하게 동작하고 부드러운 스크롤 효과를 적용해야 합니다. 이는 추가적인 HTML과 Tailwind CSS 클래스를 사용하여 구현할 수 있습니다.

결론

위와 같이 HTML과 Tailwind CSS를 활용하여 자바스크립트 없이도 동작하는 FAQ 아코디언을 구현할 수 있습니다. group 클래스와 포커스 상태를 활용하여 사용자 인터랙션을 처리하며, 전환 효과를 통해 부드러운 UI 경험을 제공합니다. 각 탭을 추가할 때는 동일한 구조를 복사하여 tabindex, 제목, 내용을 변경하면 손쉽게 여러 개의 FAQ 항목을 만들 수 있습니다.

추가 팁:

• 접근성 고려: tabindex를 적절히 설정하여 키보드 사용자도 쉽게 접근할 수 있도록 합니다.
• 반응형 디자인: Tailwind CSS의 반응형 유틸리티를 사용하여 다양한 화면 크기에서도 잘 작동하도록 스타일을 조정합니다.
• 애니메이션 조정: transition 클래스의 속성과 지속 시간을 조정하여 원하는 애니메이션 효과를 구현할 수 있습니다.

5.뉴스레터 섹션 추가 및  푸

메뉴의 부드러운 스크롤 동작 추가

먼저, 메뉴 클릭 시 해당 섹션으로 부드럽게 스크롤되도록 설정합니다. Tailwind CSS에서는 scroll-smooth 클래스를 사용하여 간단하게 구현할 수 있습니다.

1. HTML 태그에 scroll-smooth 클래스 추가

<html> 태그에 scroll-smooth 클래스를 추가합니다. 이렇게 하면 페이지 내 모든 앵커 링크에서 부드러운 스크롤 효과가 적용됩니다.

<!DOCTYPE html>
<html lang="ko" class="scroll-smooth">
  <head>
    <!-- 메타 태그 및 링크 등 -->
  </head>
  <body>
    <!-- 콘텐츠가 여기에 들어갑니다 -->
  </body>
</html>

class="scroll-smooth": 페이지 내의 모든 스크롤 동작에 부드러운 애니메이션 효과를 추가합니다.

뉴스레터 섹션 추가

뉴스레터 섹션은 방문자들이 이메일을 입력하여 소식을 받아볼 수 있는 폼을 포함합니다. 반응형 디자인을 통해 작은 화면에서는 요소들이 세로로 쌓이고, 큰 화면에서는 가로로 배치됩니다.

1. 뉴스레터 섹션 생성

먼저, 뉴스레터 섹션을 생성하고 배경색을 설정합니다.

<!-- 뉴스레터 섹션 -->
<section id="newsletter" class="bg-softBlue">
  <!-- 내용이 여기에 들어갑니다 -->
</section>

• id="newsletter": 해당 섹션을 식별하기 위한 고유 ID입니다.
• class="bg-softBlue": 배경색을 부드러운 파란색으로 설정합니다. (bg-softBlue는 Tailwind CSS의 커스텀 색상일 수 있습니다. 필요에 따라 설정을 확인하세요.)

2. 메인 컨테이너 설정

컨텐츠를 중앙에 배치하고 적절한 여백을 추가합니다.

<!-- 메인 컨테이너 -->
<div class="max-w-lg mx-auto py-24">
  <!-- 콘텐츠가 여기에 들어갑니다 -->
</div>

• max-w-lg: 최대 너비를 lg로 설정하여 콘텐츠의 폭을 제한합니다.
• mx-auto: 좌우 여백을 자동으로 설정하여 중앙 정렬을 유지합니다.
• py-24: 상하 여백을 추가하여 섹션 내부의 공간을 확보합니다.

3. 텍스트 추가

가입 유도 문구와 제목을 추가합니다.

<p class="mb-6 text-lg tracking-widest text-center text-white uppercase">
  35,000+명이 이미 가입했습니다
</p>
<h2 class="px-3 mb-6 text-3xl font-semibold text-center text-white md:text-4xl">
  저희 소식을 놓치지 마세요
</h2>

• 가입 유도 문구 (<p> 태그)

  • mb-6: 하단 여백을 추가하여 다음 요소와의 간격을 둡니다.
  • text-lg: 텍스트 크기를 lg로 설정합니다.
  • tracking-widest: 문자 간격을 넓게 설정합니다.
  • text-center: 텍스트를 중앙 정렬합니다.
  • text-white: 텍스트 색상을 흰색으로 설정합니다.
  • uppercase: 텍스트를 대문자로 변환합니다.

• 제목 (<h2> 태그)

  • px-3: 좌우 패딩을 추가합니다.
  • mb-6: 하단 여백을 추가합니다.
  • text-3xl: 텍스트 크기를 3xl로 설정합니다.
  • font-semibold: 글꼴 두께를 세미 볼드로 설정합니다.
  • text-center: 텍스트를 중앙 정렬합니다.
  • text-white: 텍스트 색상을 흰색으로 설정합니다.
  • md:text-4xl: 중간 크기 이상의 화면에서는 텍스트 크기를 4xl로 확장합니다

4. 폼 생성

이메일 입력 필드와 제출 버튼을 포함한 폼을 만듭니다.

<!-- 폼 -->
<form class="flex flex-col items-start justify-center max-w-2xl mx-auto space-y-6 text-base px-6 md:flex-row md:space-y-0 md:space-x-4 md:px-0">
  <!-- 입력 및 버튼 컨테이너 -->
  <div class="flex flex-col justify-between items-center mx-auto md:flex-row md:mx-0">
    <input
      type="text"
      class="flex-1 px-6 pt-3 pb-2 mb-4 rounded-lg border-1 border-white focus:outline-none md:mr-3 md:mb-0"
      placeholder="이메일 주소를 입력하세요"
    />
    <input
      type="submit"
      class="inline-flex px-6 py-3 font-semibold text-center text-white duration-200 transform rounded-lg cursor-pointer focus:outline-none bg-softRed hover:opacity-90"
      value="문의하기"
    />
  </div>
</form>

• form 태그 클래스 설명:

  • flex flex-col: 폼을 Flexbox 레이아웃으로 설정하고, 기본 방향을 세로로 설정합니다.
  • items-start justify-center: 아이템을 시작점에 정렬하고, 중앙으로 배치합니다.
  • max-w-2xl: 폼의 최대 너비를 2xl로 설정합니다.
  • mx-auto: 폼을 중앙 정렬합니다.
  • space-y-6: 세로 간격을 6으로 설정합니다.
  • text-base: 기본 텍스트 크기를 설정합니다.
  • px-6: 좌우 패딩을 추가합니다.
  • md:flex-row md:space-y-0 md:space-x-4 md:px-0: 중간 크기 이상의 화면에서는 레이아웃을 가로로 변경하고, 세로 간격을 없애고, 가로 간격을 4로 설정하며, 좌우 패딩을 제거합니다.

• 입력 필드 (<input type="text">)

  • flex-1: 남은 공간을 모두 차지하도록 설정합니다.
  • px-6 pt-3 pb-2: 좌우 패딩과 상단, 하단 패딩을 추가합니다.
  • mb-4: 하단 여백을 추가하여 버튼과의 간격을 둡니다.
  • rounded-lg: 모서리를 둥글게 만듭니다.
  • border-1 border-white: 흰색 테두리를 추가합니다.
  • focus:outline-none: 포커스 시 기본 아웃라인을 제거합니다.
  • md:mr-3 md:mb-0: 중간 크기 이상의 화면에서는 오른쪽 마진을 3으로 설정하고, 하단 마진을 제거합니다.

• 제출 버튼 (<input type="submit">)

  • inline-flex: 인라인 Flexbox 레이아웃을 사용합니다.
  • px-6 py-3: 좌우 패딩과 상하 패딩을 추가합니다.
  • font-semibold: 글꼴 두께를 세미 볼드로 설정합니다.
  • text-center: 텍스트를 중앙 정렬합니다.
  • text-white: 텍스트 색상을 흰색으로 설정합니다.
  • duration-200: 전환 애니메이션의 지속 시간을 200ms로 설정합니다.
  • transform: 변형을 가능하게 합니다.
  • rounded-lg: 모서리를 둥글게 만듭니다.
  • cursor-pointer: 커서를 포인터로 변경하여 클릭 가능함을 표시합니다.
  • focus:outline-none: 포커스 시 기본 아웃라인을 제거합니다.
  • bg-softRed: 배경색을 부드러운 빨간색으로 설정합니다.
  • hover:opacity-90: 호버 시 불투명도를 90%로 줄입니다.

5. 전체 뉴스레터 섹션 HTML

이제 모든 요소를 합쳐서 전체 뉴스레터 섹션을 구성합니다.

<!-- 뉴스레터 섹션 -->
<section id="newsletter" class="bg-softBlue">
  <!-- 메인 컨테이너 -->
  <div class="max-w-lg mx-auto py-24">
    <p class="mb-6 text-lg tracking-widest text-center text-white uppercase">
      35,000+명이 이미 가입했습니다
    </p>
    <h2 class="px-3 mb-6 text-3xl font-semibold text-center text-white md:text-4xl">
      저희 소식을 놓치지 마세요
    </h2>

    <!-- 폼 -->
    <form class="flex flex-col items-start justify-center max-w-2xl mx-auto space-y-6 text-base px-6 md:flex-row md:space-y-0 md:space-x-4 md:px-0">
      <!-- 입력 및 버튼 컨테이너 -->
      <div class="flex flex-col justify-between items-center mx-auto md:flex-row md:mx-0">
        <input
          type="text"
          class="flex-1 px-6 pt-3 pb-2 mb-4 rounded-lg border-1 border-white focus:outline-none md:mr-3 md:mb-0"
          placeholder="이메일 주소를 입력하세요"
        />
        <input
          type="submit"
          class="inline-flex px-6 py-3 font-semibold text-center text-white duration-200 transform rounded-lg cursor-pointer focus:outline-none bg-softRed hover:opacity-90"
          value="문의하기"
        />
      </div>
    </form>
  </div>
</section>

푸터 섹션 추가

푸터 섹션은 웹사이트의 하단에 위치하며, 로고, 메뉴 링크, 소셜 아이콘 등을 포함합니다.

1. 푸터 섹션 생성

푸터 섹션을 생성하고 배경색과 패딩을 설정합니다.

<!-- 푸터 -->
<footer class="py-16 bg-veryDarkBlue">
  <!-- 내용이 여기에 들어갑니다 -->
</footer>

class="py-16 bg-veryDarkBlue": 상하 여백을 16으로 설정하고, 배경색을 매우 어두운 파란색으로 설정합니다. (bg-veryDarkBlue는 Tailwind CSS의 커스텀 색상일 수 있습니다. 필요에 따라 설정을 확인하세요.)

2. 푸터 컨테이너 설정

컨텐츠를 중앙에 배치하고 Flexbox 레이아웃을 적용합니다.

<!-- 푸터 플렉스 컨테이너 -->
<div class="container flex flex-col items-center justify-between mx-auto space-y-16 px-6 md:flex-row md:space-y-0">
  <!-- 내용이 여기에 들어갑니다 -->
</div>

• container: 콘텐츠의 너비를 제한하고 중앙 정렬을 도와줍니다.
• flex flex-col: Flexbox 레이아웃을 사용하고, 기본 방향을 세로로 설정합니다.
• items-center: 아이템을 수직 중앙에 정렬합니다.
• justify-between: 아이템 간의 공간을 균등하게 분배합니다.
• mx-auto: 좌우 여백을 자동으로 설정하여 중앙 정렬을 유지합니다.
• space-y-16: 세로 간격을 16으로 설정합니다.
• px-6: 좌우 패딩을 추가합니다.
• md:flex-row md:space-y-0: 중간 크기 이상의 화면에서는 레이아웃을 가로로 변경하고, 세로 간격을 없앱니다.

3. 로고 및 메뉴 항목 추가

로고와 메뉴 링크를 포함한 컨테이너를 만듭니다.

<!-- 로고/메뉴 컨테이너 -->
<div class="flex flex-col items-center justify-between space-y-8 text-lg font-light md:flex-row md:space-y-0 md:space-x-14 text-grayishBlue">
  <img src="images/logo-bookmark-footer.svg" alt="로고" class="mb-1" />

  <a href="#features" class="uppercase hover:text-softRed">기능</a>
  <a href="#download" class="uppercase hover:text-softRed">다운로드</a>
  <a href="#faq" class="uppercase hover:text-softRed">FAQ</a>
</div>

• flex flex-col: Flexbox 레이아웃을 사용하고, 기본 방향을 세로로 설정합니다.

• items-center: 아이템을 수직 중앙에 정렬합니다.

• justify-between: 아이템 간의 공간을 균등하게 분배합니다.

• space-y-8: 세로 간격을 8로 설정합니다.

• text-lg: 텍스트 크기를 lg로 설정합니다.

• font-light: 글꼴 두께를 라이트로 설정합니다.

• md:flex-row md:space-y-0 md:space-x-14: 중간 크기 이상의 화면에서는 레이아웃을 가로로 변경하고, 세로 간격을 없애며, 가로 간격을 14로 설정합니다.

• text-grayishBlue: 텍스트 색상을 회색빛 파란색으로 설정합니다.

• 로고 (<img> 태그)

  • src="images/logo-bookmark-footer.svg": 로고 이미지의 경로입니다.
  • alt="로고": 이미지의 대체 텍스트입니다.
  • class="mb-1": 하단에 작은 여백을 추가합니다.

• 메뉴 링크 (<a> 태그)

  • href="#features", href="#download", href="#faq": 각 메뉴 항목이 연결되는 섹션의 ID입니다.
  • class="uppercase hover:text-softRed": 텍스트를 대문자로 변환하고, 호버 시 텍스트 색상을 부드러운 빨간색으로 변경합니다.

4. 소셜 아이콘 추가

소셜 미디어 아이콘을 포함한 컨테이너를 만듭니다.

<!-- 소셜 컨테이너 -->
<div class="flex space-x-10">
  <a href="#">
    <img src="images/icon-facebook.svg" alt="페이스북" class="h-6 ficon" />
  </a>
  <a href="#">
    <img src="images/icon-twitter.svg" alt="트위터" class="h-6 ficon" />
  </a>
</div>

• flex: Flexbox 레이아웃을 사용합니다.

• space-x-10: 가로 간격을 10으로 설정합니다.

• 소셜 아이콘 링크 (<a> 태그)

  • href="#": 소셜 미디어 페이지의 링크입니다. 실제 URL로 변경하세요.

• 소셜 아이콘 이미지 (<img> 태그)

  • src="images/icon-facebook.svg", src="images/icon-twitter.svg": 소셜 아이콘 이미지의 경로입니다.
  • alt="페이스북", alt="트위터": 이미지의 대체 텍스트입니다.
  • class="h-6 ficon": 높이를 6으로 설정하고, 추가적인 커스텀 클래스(ficon)를 적용할 수 있습니다.

5. 전체 푸터 섹션 HTML

이제 모든 요소를 합쳐서 전체 푸터 섹션을 구성합니다.

<!-- 푸터 -->
<footer class="py-16 bg-veryDarkBlue">
  <!-- 푸터 플렉스 컨테이너 -->
  <div class="container flex flex-col items-center justify-between mx-auto space-y-16 px-6 md:flex-row md:space-y-0">
    
    <!-- 로고/메뉴 컨테이너 -->
    <div class="flex flex-col items-center justify-between space-y-8 text-lg font-light md:flex-row md:space-y-0 md:space-x-14 text-grayishBlue">
      <img src="images/logo-bookmark-footer.svg" alt="로고" class="mb-1" />

      <a href="#features" class="uppercase hover:text-softRed">기능</a>
      <a href="#download" class="uppercase hover:text-softRed">다운로드</a>
      <a href="#faq" class="uppercase hover:text-softRed">FAQ</a>
    </div>

    <!-- 소셜 컨테이너 -->
    <div class="flex space-x-10">
      <a href="#">
        <img src="images/icon-facebook.svg" alt="페이스북" class="h-6 ficon" />
      </a>
      <a href="#">
        <img src="images/icon-twitter.svg" alt="트위터" class="h-6 ficon" />
      </a>
    </div>
    
  </div>
</footer>

추가 설명 및 팁

1. 반응형 디자인 고려

Tailwind CSS의 반응형 유틸리티를 활용하여 다양한 화면 크기에서 레이아웃이 적절하게 조정되도록 합니다. 예를 들어, md:flex-row와 같은 클래스를 사용하여 중간 크기 이상의 화면에서 레이아웃 방향을 변경할 수 있습니다.

2. 접근성 고려

• alt 속성: 이미지 태그에 alt 속성을 추가하여 스크린 리더 사용자에게 이미지의 내용을 설명합니다.
• 키보드 내비게이션: 메뉴와 폼 요소가 키보드로도 쉽게 접근 가능하도록 tabindex와 같은 속성을 적절히 설정합니다.

3. 사용자 인터랙션 강화

• 호버 효과: 메뉴 링크와 버튼에 호버 효과를 추가하여 사용자 인터랙션을 강화합니다. 예를 들어, hover:text-softRed 클래스를 사용하여 호버 시 텍스트 색상이 변경되도록 설정할 수 있습니다.
• 전환 효과: transition 클래스를 사용하여 애니메이션 효과를 부드럽게 만듭니다. 예를 들어, transition duration-500은 0.5초 동안의 전환 효과를 추가합니다.

4. Tailwind CSS 커스텀 클래스 활용

프로젝트의 일관성과 유지 보수성을 높이기 위해 자주 사용하는 스타일을 커스텀 클래스로 정의할 수 있습니다. Tailwind CSS의 @apply 디렉티브를 사용하여 여러 유틸리티 클래스를 하나의 클래스에 적용할 수 있습니다.