소스 :

https://github.dev/braverokmc79/tailwind-shortly-website

https://braverokmc79.github.io/tailwind-shortly-website/

1.네비게이션 바 구성

1. 전체 네비게이션 바 구성

네비게이션 바는 nav 태그로 감싸며, Tailwind CSS의 container와 mx-auto를 사용해 중앙에 배치하고 p-6으로 패딩을 추가합니다.

<!-- 네비게이션 컨테이너 -->
<nav class="relative container mx-auto p-6">

2. 로고와 왼쪽 메뉴의 Flexbox 구성

flex를 사용해 로고와 메뉴를 하나의 컨테이너로 묶습니다. 메뉴 항목은 lg:flex로 설정해 작은 화면에서는 숨기고, 큰 화면에서는 보이도록 설정합니다.

  <!-- 모든 항목을 위한 플렉스 컨테이너 -->
  <div class="flex items-center justify-between">
    <!-- 로고/메뉴를 위한 플렉스 컨테이너 -->
    <div class="flex items-center space-x-20">
      <!-- 로고 -->
      <img src="images/logo.svg" alt="로고" />
      <!-- 왼쪽 메뉴 -->
      <div class="hidden space-x-8 font-bold lg:flex">
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">기능</a>
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">가격</a>
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">자원</a>
      </div>
    </div>

• hidden 클래스를 사용해 기본적으로 숨기고, lg:flex로 큰 화면에서만 보이게 설정합니다.
• 각 링크는 기본 색상을 text-grayishViolet으로 설정하고, 호버 시 hover:text-veryDarkViolet으로 색상이 변경됩니다.

3. 오른쪽 버튼 메뉴

로그인과 가입하기 버튼을 오른쪽에 배치하고, 작은 화면에서는 숨기고(hidden), 큰 화면에서만 표시되도록 설정합니다.

    <!-- 오른쪽 버튼 메뉴 -->
    <div class="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex">
      <div class="hover:text-veryDarkViolet">로그인</div>
      <a href="#" class="px-8 py-3 font-bold text-white bg-cyan rounded-full hover:opacity-70">가입하기</a>
    </div>

• 가입하기 버튼은 bg-cyan으로 배경을 설정하고, 텍스트는 text-white로 설정하여 깔끔한 버튼 스타일을 적용합니다.
• 호버 시 hover:opacity-70로 투명도를 조절해 사용자가 버튼에 커서를 올릴 때 시각적인 피드백을 줍니다.

4. 햄버거 메뉴 (모바일용)

작은 화면에서는 햄버거 메뉴 버튼이 보이게 하고, 큰 화면에서는 숨기도록 설정합니다. 이 버튼은 클릭하면 모바일 메뉴가 열립니다.

    <!-- 햄버거 버튼 -->
    <button id="menu-btn" class="block hamburger lg:hidden focus:outline-none" type="button">
      <span class="hamburger-top"></span>
      <span class="hamburger-middle"></span>
      <span class="hamburger-bottom"></span>
    </button>
  </div>

• block과 lg:hidden을 사용하여 작은 화면에서만 버튼이 보이게 설정합니다.
• 햄버거 메뉴 버튼은 focus:outline-none을 사용해 클릭 시 외곽선이 보이지 않도록 합니다.

5. 모바일 메뉴

햄버거 버튼을 클릭하면 나타나는 모바일 메뉴는 absolute로 설정하여 화면 위에 떠 있도록 만들고, 배경은 bg-darkViolet으로 설정합니다.

  <!-- 모바일 메뉴 -->
  <div id="menu" class="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100">
    <div class="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm">
      <a href="#" class="w-full text-center">기능</a>
      <a href="#" class="w-full text-center">가격</a>
      <a href="#" class="w-full text-center">자원</a>
      <a href="#" class="w-full pt-6 border-t border-gray-400 text-center">로그인</a>
      <a href="#" class="w-full py-3 text-center rounded-full bg-cyan">가입하기</a>
    </div>
  </div>
</nav>

• 메뉴 항목은 세로로 정렬하기 위해 flex-col을 사용하고, 각 항목 사이의 간격은 space-y-6으로 설정합니다.
• 메뉴 배경은 bg-darkViolet, 텍스트는 text-white로 설정하여 어두운 배경에서 흰색 텍스트가 돋보이게 만듭니다.

최종 Tailwind CSS 네비게이션 바 코드

<!-- 네비게이션 컨테이너 -->
<nav class="relative container mx-auto p-6">
  <!-- 모든 항목을 위한 플렉스 컨테이너 -->
  <div class="flex items-center justify-between">
    <!-- 로고/메뉴를 위한 플렉스 컨테이너 -->
    <div class="flex items-center space-x-20">
      <!-- 로고 -->
      <img src="images/logo.svg" alt="로고" />
      <!-- 왼쪽 메뉴 -->
      <div class="hidden space-x-8 font-bold lg:flex">
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">기능</a>
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">가격</a>
        <a href="#" class="text-grayishViolet hover:text-veryDarkViolet">자원</a>
      </div>
    </div>

    <!-- 오른쪽 버튼 메뉴 -->
    <div class="hidden items-center space-x-6 font-bold text-grayishViolet lg:flex">
      <div class="hover:text-veryDarkViolet">로그인</div>
      <a href="#" class="px-8 py-3 font-bold text-white bg-cyan rounded-full hover:opacity-70">가입하기</a>
    </div>

    <!-- 햄버거 버튼 -->
    <button id="menu-btn" class="block hamburger lg:hidden focus:outline-none" type="button">
      <span class="hamburger-top"></span>
      <span class="hamburger-middle"></span>
      <span class="hamburger-bottom"></span>
    </button>
  </div>

  <!-- 모바일 메뉴 -->
  <div id="menu" class="absolute hidden p-6 rounded-lg bg-darkViolet left-6 right-6 top-20 z-100">
    <div class="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm">
      <a href="#" class="w-full text-center">기능</a>
      <a href="#" class="w-full text-center">가격</a>
      <a href="#" class="w-full text-center">자원</a>
      <a href="#" class="w-full pt-6 border-t border-gray-400 text-center">로그인</a>
      <a href="#" class="w-full py-3 text-center rounded-full bg-cyan">가입하기</a>
    </div>
  </div>
</nav>

2.Hero 섹션 

1. Hero 섹션 구조 정의

<section> 태그를 사용하여 Hero 섹션을 정의하고, flex와 flex-col-reverse 클래스를 사용해 작은 화면에서는 이미지가 상단,

텍스트가 하단에 오도록 배치합니다. 큰 화면에서는 flex-row로 텍스트가 왼쪽, 이미지가 오른쪽에 배치되도록 설정합니다.

<section id="hero">
  <div class="container flex flex-col-reverse mx-auto p-6 lg:flex-row">

• container: Tailwind의 기본 컨테이너 클래스입니다.
• flex: 콘텐츠를 수평 또는 수직으로 정렬하기 위해 사용합니다.
• flex-col-reverse: 작은 화면에서는 이미지가 위에, 텍스트가 아래에 배치됩니다.
• lg:flex-row: 큰 화면(lg)에서는 텍스트가 왼쪽, 이미지가 오른쪽으로 배치됩니다.

2. 텍스트 콘텐츠 배치

텍스트 콘텐츠는 다음과 같이 h1과 p 태그로 구성되며, 작은 화면에서는 가운데 정렬, 큰 화면에서는 왼쪽 정렬되도록 합니다.

<div class="flex flex-col space-y-10 mb-44 lg:mt-16 lg:w-1/2 xl:mb-52">
  <h1 class="text-5xl font-bold text-center lg:text-6xl lg:max-w-md lg:text-left">
    단순한 링크 이상의 것
  </h1>
  <p class="text-2xl text-center text-gray-400 lg:max-w-md lg:text-left">
    브랜드 인지도를 구축하고 링크의 성과를 자세히 분석하세요.
  </p>

• flex flex-col: 텍스트 요소들이 수직으로 배치됩니다.
• space-y-10: 텍스트 요소들 간의 간격을 10으로 설정합니다.
• text-center: 작은 화면에서 텍스트를 가운데 정렬합니다.
• lg:text-left: 큰 화면에서는 텍스트를 왼쪽 정렬합니다.
• lg:max-w-md: 큰 화면에서 텍스트의 최대 너비를 설정하여 가독성을 높입니다.

3. 버튼 디자인

버튼은 hover 상태에서 색상 변화가 일어나도록 설정합니다.

<div class="max-auto lg:mx-0">
  <button class="bg-cyan px-10 py-4 text-white font-bold text-2xl 
    rounded-full lg:mx-0 hover:bg-cyanLight focus:outline-none">
    시작하기
  </button>
</div>

• bg-cyan: 버튼의 배경 색상을 Cyan으로 설정합니다.
• hover:bg-cyanLight: 마우스를 올리면 배경색이 cyanLight로 변경됩니다.
• px-10 py-4: 버튼의 padding 값을 설정하여 버튼의 크기를 조절합니다.

4.이미지 배치

이미지는 작은 화면에서는 화면의 중앙에, 큰 화면에서는 오른쪽에 배치됩니다.

<div class="mb-24 mx-auto md:w-180 lg:mb-0 lg:w-1/2">
  <img src="images/illustration-working.svg" alt="작업 중" />
</div>

• mb-24: 작은 화면에서 하단에 여백을 추가합니다.
• mx-auto: 이미지를 가운데 정렬합니다.
• lg:w-1/2: 큰 화면에서는 이미지의 너비를 50%로 설정합니다

<!-- Hero 섹션 -->
<section id="hero">
  <div class="container flex flex-col-reverse mx-auto p-6 lg:flex-row">

    <!-- 텍스트 콘텐츠 -->
    <div class="flex flex-col space-y-10 mb-44 lg:mt-16 lg:w-1/2 xl:mb-52">
      <h1 class="text-5xl font-bold text-center lg:text-6xl lg:max-w-md lg:text-left">
        단순한 링크 이상의 것
      </h1>
      <p class="text-2xl text-center text-gray-400 lg:max-w-md lg:text-left">
        브랜드 인지도를 구축하고 링크의 성과를 자세히 분석하세요.
      </p>

      <!-- 버튼 -->
      <div class="max-auto lg:mx-0">
        <button class="bg-cyan px-10 py-4 text-white font-bold text-2xl rounded-full 
        lg:mx-0 hover:bg-cyanLight focus:outline-none">
          시작하기
        </button>
      </div>
    </div>

    <!-- 이미지 -->
    <div class="mb-24 mx-auto md:w-180 lg:mb-0 lg:w-1/2">
      <img src="images/illustration-working.svg" alt="작업 중" />
    </div>

  </div>
</section>

3.링크 단축 섹션

1. 링크 단축 섹션 구조 만들기

우리는 기본적으로 Tailwind의 유틸리티 클래스만 사용해서 빠르게 스타일을 적용할 수 있습니다. 먼저 HTML 구조부터 작성해보겠습니다.

<!-- 링크 단축 섹션 -->
<section id="shorten" class="relative bg-gray-100">
  <div class="max-w-4xl mx-auto p-6 space-y-6">

• section 태그에 relative bg-gray-100 클래스를 사용하여 배경색과 상대적인 위치를 설정합니다.
• max-w-4xl mx-auto를 사용해 컨테이너의 최대 너비를 설정하고 중앙에 배치합니다.

2. 폼(Form) 만들기

이제 링크 입력과 버튼을 포함하는 폼을 만들어보겠습니다.

<form id="link-form" class="relative flex flex-col w-full p-10 -mt-20 space-y-4 bg-darkViolet rounded-lg md:flex-row md:space-y-0 md:space-x-3">
  <input type="text" class="flex-1 p-3 border-2 rounded-lg placeholder-yellow-500 focus:outline-none" placeholder="여기에 링크 주소를 입력하세요">
  <button class="px-10 py-3 text-white bg-cyan rounded-lg hover:bg-cyanLight focus:outline-none md:py-2">
    단축하기
  </button>
</form>

• flex flex-col: 플렉스 박스를 사용하여 입력란과 버튼을 세로로 배치합니다.
• md:flex-row: 중간 화면 이상에서는 입력란과 버튼을 가로로 배치합니다.
• space-y-4: 입력란과 버튼 사이에 세로 간격을 줍니다.
• bg-darkViolet: 배경색을 어두운 보라색으로 설정하고, 버튼은 bg-cyan을 사용해 청록색으로 스타일링합니다.

3. 링크 출력 구조 만들기

폼 아래에는 단축된 링크와 "복사" 버튼을 만들 것입니다. 이를 위해 flex 박스를 사용해 링크와 버튼을 가로로 배치합니다.

<div class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row">
  <p class="font-bold text-center text-veryDarkViolet md:text-left">https://frontendmentor.io</p>
  <div class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0">
    <div class="font-bold text-cyan">https://rel.ink/gxOXp9</div>
    <button class="p-2 px-8 text-white bg-cyan rounded-lg hover:opacity-70 focus:outline-none">복사</button>
  </div>
</div>

• flex-col: 작은 화면에서는 링크와 버튼을 세로로 배치하고, 중간 화면 이상에서는 md:flex-row로 가로 배치합니다.
• justify-between: 링크와 버튼 사이의 가용 공간을 균등하게 나눕니다.
• bg-white rounded-lg: 링크 및 버튼 섹션에 흰색 배경과 둥근 모서리를 적용합니다.

4. 링크 목록 추가

다음으로는 위의 구조를 복사하여 여러 개의 링크를 출력하는 형식으로 코드를 확장할 수 있습니다. 아래는 두 번째, 세 번째 링크를 추가한 예시입니다.

<!-- 링크 2 -->
<div class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row">
  <p class="font-bold text-center text-veryDarkViolet md:text-left">https://twitter.com/frontendmentor</p>
  <div class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0">
    <div class="font-bold text-cyan">https://rel.ink/gxOXp9</div>
    <button class="p-2 px-8 text-white bg-darkViolet rounded-lg hover:opacity-70 focus:outline-none">복사</button>
  </div>
</div>

<!-- 링크 3 -->
<div class="flex flex-col items-center justify-between w-full p-6 bg-white rounded-lg md:flex-row">
  <p class="font-bold text-center text-veryDarkViolet md:text-left">https://linkedin.com/frontend-mentor</p>
  <div class="flex flex-col items-center justify-end flex-1 space-x-4 space-y-2 md:flex-row md:space-y-0">
    <div class="font-bold text-cyan">https://rel.ink/gob3X9</div>
    <button class="p-2 px-8 text-white bg-cyan rounded-lg hover:opacity-70 focus:outline-none">복사</button>
  </div>
</div>

5. 결과 확인 및 스타일 조정

지금까지 작성한 코드를 실행하면, 작은 화면에서는 링크와 버튼이 세로로 쌓이고, 큰 화면에서는 가로로 정렬됩니다. 또한 각 링크 옆에는 복사 버튼이 있으며, 버튼을 클릭하면 링크를 복사하는 기능을 자바스크립트로 추가할 수 있습니다.

4.섹션 구조 및 박스 구성

1. 섹션 구조 설정

먼저, 섹션을 추가하고 ID와 배경색, 패딩 등을 Tailwind CSS 클래스를 사용하여 설정합니다.

<section id="features" class="pb-32 bg-gray-100">
  <div class="relative container flex flex-col items-start px-6 mx-auto md:flex-row md:space-x">

• pb-32: 아래쪽에 32만큼 패딩을 추가.
• bg-gray-100: 배경을 gray-100 색상으로 설정.
• relative: 안에 위치할 절대 위치 요소(absolute)를 위해 relative를 설정.
• container: 컨텐츠를 중앙에 배치하고 양쪽 여백을 맞추기 위한 Tailwind CSS 유틸리티 클래스.
• flex flex-col: Flexbox를 사용하여 작은 화면에서는 세로로 정렬.
• md:flex-row: md(medium, 중간 크기 이상의 화면)에서는 가로로 정렬.

2. 수직 및 수평 라인

작은 화면에서는 수직 라인을, 큰 화면에서는 수평 라인을 표시합니다.

  <!-- 수평 라인 (중간 화면 이상에서만 보임) -->
  <div class="hidden absolute w-10/12 top-24 left-16 h-3 bg-cyan md:block"></div>

  <!-- 수직 라인 (작은 화면에서만 보임) -->
  <div class="absolute w-2 left-1/2 h-full bg-cyan md:hidden"></div>

• hidden: 기본적으로 숨김 상태.
• absolute: 부모 요소(relative로 설정된 div)를 기준으로 절대 위치를 지정.
• w-10/12: 전체 너비의 10/12로 설정하여 크기를 맞춤.
• top-24, left-16: top과 left로 라인의 위치를 지정.
• bg-cyan: 배경색을 청록색(cyan)으로 설정.
• md:block: 중간 화면 이상에서는 수평 라인이 표시되도록 block으로 설정.
• h-full: 수직 라인은 컨테이너의 전체 높이만큼 차지.

3. 박스들

박스마다 아이콘과 텍스트를 포함한 내용이 들어갑니다.

박스 1

<!-- 박스 1 -->
<div class="relative flex flex-col p-6 space-y-6 bg-white rounded-lg mt-9 md:w-1/4 md:mx-10">
  <div class="absolute -ml-10 left-1/2 -top-10 md:left-16"> 
    <div class="flex items-center justify-center w-20 h-20 rounded-full bg-veryDarkViolet">
      <img src="images/icon-brand-recognition.svg" alt="브랜드 인식 아이콘" />
    </div>
  </div>
  <h5 class="pt-6 text-xl font-bold text-center capitalize md:text-left">브랜드 인식</h5>                  
  <p class="text-center text-gray-400 md:text-left">
    모든 단축 링크를 브랜드화하여 신뢰를 얻고 브랜드 인식을 높이세요.
  </p>
</div>

• relative: 아이콘 이미지를 절대 위치로 배치하기 위해 설정.
• flex flex-col: 세로 정렬을 위한 Flexbox 설정.
• p-6: 6만큼의 패딩을 추가.
• space-y-6: 자식 요소 간의 간격을 6만큼 추가.
• bg-white: 배경색을 흰색으로 설정.
• rounded-lg: 모서리를 둥글게.
• absolute -ml-10 left-1/2 -top-10: 아이콘을 중앙에 배치하고 위로 살짝 띄움.
• w-20 h-20: 아이콘 컨테이너의 크기를 지정.
• text-xl font-bold: 텍스트 크기와 두께 설정.
• text-center: 작은 화면에서는 텍스트를 중앙 정렬하고, md:text-left를 통해 중간 크기 이상에서는 왼쪽 정렬.

박스 2 & 3

박스 2와 3은 박스 1과 구조는 동일하지만, 내용이 다르고 화면 크기 별로 약간의 오프셋을 설정합니다.

<!-- 박스 2 -->
<div class="relative flex flex-col p-6 space-y-6 bg-white rounded-lg mt-24 md:mt-8 md:w-1/4 md:mx-10">
  <!-- 아이콘 및 텍스트 -->
  <h5 class="pt-6 text-xl font-bold text-center capitalize md:text-left">상세 기록</h5>                  
  <p class="text-center text-gray-400 md:text-left">
    단축 링크의 실적을 상세히 분석하여 링크의 성과를 추적하세요.
  </p>
</div>

<!-- 박스 3 -->
<div class="relative flex flex-col p-6 space-y-6 bg-white rounded-lg mt-24 md:mt-8 md:w-1/4 md:mx-10">
  <!-- 아이콘 및 텍스트 -->
  <h5 class="pt-6 text-xl font-bold text-center capitalize md:text-left">완전 맞춤화</h5>                  
  <p class="text-center text-gray-400 md:text-left">
    사용자 정의 도메인과 맞춤형 단축 링크로 브랜드 일관성을 유지하세요.
  </p>
</div>

• mt-24 md:mt-8: 작은 화면에서는 위로 24만큼 여백을 주고, 중간 화면 이상에서는 8만큼 여백을 줌으로써 박스 간 간격 조정.
• text와 img는 박스 1과 동일한 스타일을 따름.

5.CTA 섹션

CTA 섹션은 버튼과 텍스트를 포함하며 배경 이미지와 스타일을 지정합니다.

<!-- CTA Section -->
<section id="cta" class="py-24 bg-dark-violet text-white text-center">
  <div class="container mx-auto flex flex-col items-center space-y-6">
    <h5 class="text-4xl font-bold">Boost your links today</h5>
    <button class="px-10 py-5 mx-auto text-2xl font-bold text-white bg-cyan rounded-full hover:bg-cyan-light md:px-3 focus:outline-none">
      Get Started
    </button>
  </div>
</section>

<!-- 스타일링에 background 이미지 추가 -->
<style>
  #cta {
    background-image: url('../images/big-boost-desktop.svg');
    background-repeat: no-repeat;
    background-size: cover;
  }
</style>

푸터 섹션

푸터 섹션은 로고, 메뉴, 그리고 소셜 링크 아이콘으로 구성됩니다.

<!-- Footer Section -->
<footer class="p-16 bg-very-dark-violet text-white">
  <div class="container mx-auto flex flex-col items-center space-y-16 md:flex-row md:justify-between md:space-y-0">
    <!-- 로고 -->
    <img src="../images/logo.svg" alt="Logo">

    <!-- 메뉴들 -->
    <div class="flex flex-col space-y-16 md:flex-row md:space-x-20">
      <!-- 메뉴 1 -->
      <div class="flex flex-col items-center w-full md:items-start">
        <h4 class="mb-5 font-bold capitalize">Features</h4>
        <ul class="flex flex-col items-center space-y-3 md:items-start">
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Link Shortening</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Branded Links</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Analytics</a></li>
        </ul>
      </div>
      
      <!-- 메뉴 2 -->
      <div class="flex flex-col items-center w-full md:items-start">
        <h4 class="mb-5 font-bold capitalize">Resources</h4>
        <ul class="flex flex-col items-center space-y-3 md:items-start">
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Blog</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Developers</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Support</a></li>
        </ul>
      </div>

      <!-- 메뉴 3 -->
      <div class="flex flex-col items-center w-full md:items-start">
        <h4 class="mb-5 font-bold capitalize">Company</h4>
        <ul class="flex flex-col items-center space-y-3 md:items-start">
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">About</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Our Team</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Careers</a></li>
          <li><a href="#" class="capitalize text-grayish-violet hover:text-cyan">Contact</a></li>
        </ul>
      </div>
    </div>

    <!-- 소셜 아이콘 -->
    <div class="flex space-x-6">
      <a href="#"><img src="../images/icon-facebook.svg" class="f-icon"></a>
      <a href="#"><img src="../images/icon-twitter.svg" class="f-icon"></a>
      <a href="#"><img src="../images/icon-pinterest.svg" class="f-icon"></a>
      <a href="#"><img src="../images/icon-instagram.svg" class="f-icon"></a>
    </div>
  </div>
</footer>

<!-- 아이콘 hover 스타일링 -->
<style>
  .f-icon:hover {
    filter: invert(79%) sepia(61%) saturate(464%) hue-rotate(130deg) brightness(89%) contrast(85%);
  }
</style>

설명

• CTA 섹션: 배경 색상은 dark-violet, 텍스트는 중앙 정렬된 흰색, 버튼은 cyan 색상으로 라운드 처리되었습니다.
• 푸터: 로고와 메뉴는 각각 flex를 사용하여 수직, 수평으로 배치되며 소셜 아이콘에 hover 효과를 적용했습니다.

 <!-- CTA Section -->
  <section id="cta" class="py-24 bg-darkViolet" >
    <div class="flex flex-col p-2 space-6">

      <h5 class="
      mx-auto space-y-10 text-4xl font-bold text-white text-center      
      " >
        모두의 링크 단축
      </h5>
      <button class="
        mt-5
         px-10 py-5 mx-auto text-2xl  
        font-bold text-white  rounded-full      
        bg-cyan hover:bg-cyanLight md:text-base
         md:py-3 focus:outline-none">
        시작하기
      </button>
    </div>
  </section>

  <!-- relative container mx-auto p-6 -->
<footer class="py-16 bg-veryDarkViolet">
 <div class="container p-6 mx-auto flex flex-col items-center justify-between 
  max-auto space-y-16 md:flex-row md:space-y-0 md:items-start
 ">

 <div>
  <img src="images/logo.svg" alt="">
 </div>


  <!-- 메뉴 컨테이너 -->
 <div class="flex flex-col space-y-16 md:space-x-20 md:flex-row md:space-y-0">

  <!-- 메뉴1 -->
  <div class="flex flex-col item-center w-full md:items-start"> 
      <div class="mb-5 font-bold text-white capitalize">특징</div>        
        <div class="flex flex-col items-center space-y-3 md:items-start">
          <a href="#" class="capitalize text-grayishViolet hover:text-cyan">기능</a>
          <a href="#" class="capitalize text-grayishViolet hover:text-cyan">가격</a>
          <a href="#" class="capitalize text-grayishViolet hover:text-cyan">자원</a>
        </div>

      </div>
  



  <!-- 메뉴2 -->
  <div class="flex flex-col item-center w-full md:items-start"> 
    <div class="mb-5 font-bold text-white capitalize">자원</div>        
      <div class="flex flex-col items-center space-y-3 md:items-start">
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">기능</a>
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">가격</a>
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">자원</a>
      </div>

    </div>



      <!-- 메뉴3 -->
  <div class="flex flex-col item-center w-full md:items-start"> 
    <div class="mb-5 font-bold text-white capitalize">회사</div>        
      <div class="flex flex-col items-center space-y-3 md:items-start">
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">기능</a>
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">가격</a>
        <a href="#" class="capitalize text-grayishViolet hover:text-cyan">자원</a>
      </div>

    </div>





  </div>
 </div>


 <!-- 소셜 컨테이너 -->
 <div class="flex justify-center space-x-6">
  <a href="#" class="text-white hover:text-cyan">
    <img src="images/icon-facebook.svg" alt="Facebook" />
  </a>
  <a href="#" class="text-white hover:text-cyan">
    <img src="images/icon-twitter.svg" alt="Twitter" />
  </a>
  <a href="#" class="text-white hover:text-cyan">
    <img src="images/icon-pinterest.svg" alt="Pinterest" />
  </a>
  <a href="#" class="text-white hover:text-cyan">
    <img src="images/icon-instagram.svg" alt="Instagram" />
  </a>
</div>



 </div>
</footer>

6.햄버거 메뉴

1. 햄버거 메뉴 HTML 구조

<button id="menuButton" class="block lg:hidden">
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
  <span class="hamburger-line"></span>
</button>

<div id="menu"
  class="absolute hidden p-6 rounded-lg bg-darkViolet
    left-6 right-6 top-20 z-100"
>
  <div class="flex flex-col items-center justify-center w-full space-y-6 font-bold text-white rounded-sm">
    <a href="#" class="w-full text-center">기능</a>
    <a href="#" class="w-full text-center">가격</a>
    <a href="#" class="w-full text-center">자원</a>
    <a href="#" class="w-full pt-6 border-t border-gray-400 text-center">로그인</a>
    <a href="#" class="w-full py-3 text-center rounded-full bg-cyan">가입하기</a>
  </div>
</div>

• #menuButton은 햄버거 아이콘을 나타내는 버튼입니다. 클릭 시 메뉴를 열고 닫는 역할을 합니다.
• #menu는 실제로 보여질 메뉴이며, 초기에는 hidden 클래스를 가지고 있어 숨겨져 있다가, 버튼 클릭 시 flex 클래스로 전환됩니다.

2. 햄버거 메뉴 CSS

햄버거 버튼을 디자인하는 CSS는 다음과 같습니다.

.hamburger-line {
  width: 24px;
  height: 3px;
  background-color: white;
  margin: 4px 0;
  transition: all 0.3s ease;
  position: relative;
}

#menuButton.open .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#menuButton.open .hamburger-line:nth-child(2) {
  opacity: 0;
}

#menuButton.open .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(5px, -5px);
}

• 각 햄버거 라인은 width: 24px; height: 3px;으로 설정되어 있으며, #menuButton이 open 클래스를 가질 때 첫 번째와 세 번째 라인은 회전되어 X 모양이 됩니다. 중간 라인은 숨겨집니다.

3. 자바스크립트를 이용한 메뉴 토글

document.getElementById('menuButton').addEventListener('click', function() {
  this.classList.toggle('open');
  const menu = document.getElementById('menu');
  menu.classList.toggle('hidden');
  menu.classList.toggle('flex');
});

• menuButton을 클릭하면 open 클래스가 토글되며 햄버거 버튼이 X 모양으로 변경됩니다.
• 동시에 #menu 요소의 hidden 클래스가 제거되고 flex 클래스를 추가하여 메뉴가 화면에 나타나도록 합니다.

4. 전체적인 흐름

• 사용자가 햄버거 버튼을 클릭하면 메뉴가 화면에 표시되고, 다시 클릭하면 메뉴가 숨겨집니다.