마카로닉스

2293 No

Tailwind 로 파일로 웹사이트 만들기 , 다크 모드, 배경색 선택

2024-09-12 11:24:05 By 라이트 0 318 댓글수 0 포스트 하기

11월 2024
일	월	화	수	목	금	토
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30

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

https://braverokmc79.github.io/tailwind-fylo/

tailwind.config.js

module.exports = {
  content: ['./*.html'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        darkBlue: 'hsl(217, 28%, 15%)',
        darkBlue1: 'hsl(218, 28%, 13%)',
        darkBlue2: 'hsl(216, 53%, 9%)',
        darkBlue3: 'hsl(219, 30%, 18%)',
        accentCyan: 'hsl(176, 68%, 64%)',
        accentBlue: 'hsl(198, 60%, 50%)',
        lightRed: 'hsl(0, 100%, 63%)',
      },
      fontFamily: {
        sans: ['Raleway', 'sans-serif'],
        opensans: ['Open Sans', 'sans-serif'],
        nanumGothic: ['Nanum Gothic', 'sans-serif'],
      },
      backgroundImage: (theme) => ({
        'logo-dark-mode': "url('../images/logo-dark-mode.svg')",
        'logo-light-mode': "url('../images/logo-light-mode.svg')",
        'curvy-dark-mode': "url('../images/bg-curvy-dark-mode.svg')",
        'curvy-light-mode': "url('../images/bg-curvy-light-mode.svg')",
      }),
    },
  },
  variants: {
    extend: {
      backgroundImage: ['dark'],
    },
  },
  plugins: [],
}

1.프로젝트 설정 및 헤더 구성 요약

1. Tailwind CSS 설정

tailwind.config.js 파일:
- 다크 모드: darkMode: 'class' 설정을 통해 HTML 클래스 기반으로 다크 모드와 라이트 모드를 적용합니다.
- 사용자 정의 색상: 다양한 색상 설정 (예: darkBlue, accentCyan)이 포함됩니다.
- 폰트: 사용자 정의 폰트 (Raleway, Open Sans, Nanum Gothic)가 설정되어 있습니다.
- 배경 이미지: 다크 모드와 라이트 모드에 따라 다른 배경 이미지를 사용합니다 (logo-dark-mode, logo-light-mode 등).

2. HTML 구조

기본 구조:
- <html> 태그에 class="dark"를 추가하여 초기 다크 모드를 적용합니다.
- <body> 태그에 기본 스타일을 설정하고, 다크 모드 및 라이트 모드를 위한 클래스 (dark:bg-darkBlue, dark:text-white, font-nanumGothic)를 사용합니다.
헤더 구성:
- 헤더: container, mx-auto, px-6, text-center 클래스를 사용하여 중앙 정렬 및 패딩을 설정합니다.
- 로고:
  - 다크 모드와 라이트 모드에 따라 다른 로고를 표시합니다.
  - bg-logo-light-mode와 bg-logo-dark-mode 클래스를 통해 로고 이미지가 변경됩니다.
  - bg-no-repeat, h-20, w-48, mx-auto 등의 클래스로 로고 크기 및 위치를 설정합니다.
- 메뉴:
  - 메뉴 링크 (기능, 추천사)는 가운데 정렬되며, 호버 시 색상이 변경됩니다 (hover:text-accentCyan).
  - 메뉴 항목은 작은 화면에서는 세로 정렬되고, 큰 화면에서는 가로 정렬됩니다 (space-x-4, md:space-x-10).
- 다크/라이트 모드 토글 버튼:
  - 버튼에는 다크 모드와 라이트 모드를 전환할 수 있는 아이콘이 포함되어 있습니다.
  - 기본 버튼 스타일: text-gray-500, dark:text-gray-400, hover:bg-gray-100, dark:hover:bg-gray-700 등으로 설정됩니다.
  - 포커스 상태와 호버 상태에 대한 스타일도 정의되어 있습니다 (focus:ring-4, focus:ring-gray-200).
아이콘:
- 다크 모드 아이콘: 달 모양의 아이콘 (theme-toggle-dark-icon).
- 라이트 모드 아이콘: 해 모양의 아이콘 (theme-toggle-light-icon).
- 아이콘은 초기에는 숨겨져 있으며 (hidden 클래스 사용), JavaScript를 통해 현재 모드에 맞는 아이콘을 표시합니다.

3. JavaScript

페이지 로드 시, 로컬 저장소에서 테마 정보를 가져와 현재 모드를 설정합니다.
테마 변경 버튼 (id="theme-toggle")을 클릭하면 모드가 전환되고, 변경된 모드는 로컬 저장소에 저장됩니다. 이렇게 하면 사용자가 페이지를 새로 고침하거나 브라우저를 재시작해도 동일한 모드가 유지됩니다.

<!DOCTYPE html>
<html lang="ko" class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Raleway:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet" />
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/style.css" />
    <script>
      // 다크 모드 초기 설정
      if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
        document.documentElement.classList.add('dark');
      } else {
        document.documentElement.classList.remove('dark');
      }
    </script>
    <title>파일로 웹사이트</title>
  </head>
  <body class="dark:bg-darkBlue dark:text-white font-nanumGothic">
    <header class="container mx-auto mt-10 px-6 text-center h-40 md:h-20">
      <div class="bg-logo-light-mode dark:bg-logo-dark-mode bg-no-repeat h-20 w-48 mx-auto md:mx-0 md:absolute top-10 left-10"></div>
      <div class="flex items-center justify-center space-x-4 md:space-x-10 md:absolute top-12 right-10">
        <a href="#features" class="hover:text-accentCyan">기능</a>
        <a href="#testimonials" class="hover:text-accentCyan">추천사</a>
        <button id="theme-toggle" class="text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2">
          <svg id="theme-toggle-dark-icon" class="w-5 h-5 hidden" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
          </svg>
          <svg id="theme-toggle-light-icon" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
            <path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z" fill-rule="evenodd" clip-rule="evenodd"></path>
          </svg>
        </button>
      </div>
    </header>
  </body>
</html>

다크 모드 토글 버튼 자바스크립트 설명

HTML 요소 선택

const themeToggleBtn = document.getElementById('theme-toggle')
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon')
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon')

themeToggleBtn: 다크 모드를 토글할 버튼 요소입니다.
themeToggleDarkIcon: 다크 모드 아이콘 요소입니다.
themeToggleLightIcon: 라이트 모드 아이콘 요소입니다.

2. 초기 상태 설정

if (
  localStorage.getItem('color-theme') === 'dark' ||
  (!('color-theme' in localStorage) &&
    window.matchMedia('(prefers-color-scheme: dark)').matches)
) {
  // 다크 모드가 활성화된 경우, 라이트 모드 아이콘을 표시
  themeToggleLightIcon.classList.remove('hidden')
} else {
  // 라이트 모드가 활성화된 경우, 다크 모드 아이콘을 표시
  themeToggleDarkIcon.classList.remove('hidden')
}

- 로컬 스토리지에서 color-theme이 'dark'로 설정되어 있거나, 사용자의 운영 체제의 색상 모드가 다크 모드인 경우에는 라이트 모드 아이콘을 표시합니다. 그렇지 않으면 다크 모드 아이콘을 표시합니다.

3, 토글 버튼 클릭 이벤트 리스너 추가

themeToggleBtn.addEventListener('click', toggleMode)

- 토글 버튼 클릭 시 toggleMode 함수를 호출하여 모드를 변경합니다.

4. 모드 토글 함수

function toggleMode() {
  // 아이콘 토글
  themeToggleDarkIcon.classList.toggle('hidden')
  themeToggleLightIcon.classList.toggle('hidden')

  // 로컬 스토리지에 색상 테마가 설정되어 있는지 확인
  if (localStorage.getItem('color-theme')) {
    // 라이트 모드가 설정된 경우, 다크 모드로 변경하고 로컬 스토리지 업데이트
    if (localStorage.getItem('color-theme') === 'light') {
      document.documentElement.classList.add('dark')
      localStorage.setItem('color-theme', 'dark')
    } else {
      // 다크 모드가 설정된 경우, 라이트 모드로 변경하고 로컬 스토리지 업데이트
      document.documentElement.classList.remove('dark')
      localStorage.setItem('color-theme', 'light')
    }
  } else {
    // 로컬 스토리지에 테마 설정이 없는 경우
    if (document.documentElement.classList.contains('dark')) {
      // 현재 다크 모드인 경우, 라이트 모드로 변경
      document.documentElement.classList.remove('dark')
      localStorage.setItem('color-theme', 'light')
    } else {
      // 현재 라이트 모드인 경우, 다크 모드로 변경
      document.documentElement.classList.add('dark')
      localStorage.setItem('color-theme', 'dark')
    }
  }
}

사용자가 클릭할 때마다 아이콘을 토글합니다.
로컬 스토리지에 저장된 테마에 따라 다크 모드와 라이트 모드를 전환하며, 해당 값을 로컬 스토리지에 저장합니다. 로컬 스토리지에 설정이 없는 경우에는 현재 페이지의 모드에 따라 다크 모드 또는 라이트 모드로 변경합니다.

2.히어로 섹션

<!-- 히어로 섹션 -->
<section
  id="hero"
  class="bg-curvy-light-mode dark:bg-curvy-dark-mode bg-no-repeat bg-contain bg-bottom"
>
  <!-- 히어로 컨테이너 -->
  <div class="container mx-auto px-6 text-center md:pt-20 pb-52">
    <img src="images/illustration-intro.png" alt="" class="mx-auto" />
    <h1
      class="max-w-2xl mx-auto mb-10 text-3xl font-bold leading-normal mt-14 md:text-4xl"
    >
      모든 파일을 안전하게 저장하고 어디서나 접근하세요
    </h1>
    <p class="max-w-sm mx-auto mb-10 text-sm md:max-w-xl md:text-lg">
      Fylo는 모든 중요한 파일을 하나의 안전한 위치에 저장합니다.
      언제 어디서나 파일에 접근하고, 친구, 가족 및 동료와 공유하고 협업하세요.
    </p>
    <button class="p-3 rounded-full w-52 bg-accentCyan hover:scale-95">
      시작하기
    </button>
  </div>
</section>

주요 포인트 설명:

배경 이미지:
- bg-curvy-light-mode: 기본적으로 라이트 모드에서 표시되는 배경 이미지.
- dark:bg-curvy-dark-mode: 다크 모드에서는 이 배경 이미지로 전환됨.
- bg-no-repeat: 이미지 반복 없음.
- bg-contain: 이미지가 컨테이너에 맞춰 축소되거나 확대됨.
- bg-bottom: 배경 이미지가 하단에 위치함.
컨테이너:
- container mx-auto: 컨테이너를 중앙에 배치.
- px-6: 좌우 패딩을 6단위로 설정.
- text-center: 텍스트를 중앙 정렬.
- md:pt-20 pb-52: 중간 크기 이상의 화면에서 위쪽 패딩을 20, 하단 패딩을 52로 설정.
이미지:
- mx-auto: 이미지가 중앙에 배치되도록 설정.
H1 텍스트:
- max-w-2xl mx-auto: H1 텍스트의 최대 너비를 2XL로 설정하고 중앙에 배치.
- text-3xl: 기본 텍스트 크기를 3XL로 설정.
- md:text-4xl: 중간 크기 이상의 화면에서 텍스트 크기를 4XL로 설정.
- font-bold: 텍스트를 굵게 표시.
단락(P):
- max-w-sm mx-auto: 단락의 최대 너비를 작은 화면에서는 sm로, 중간 화면에서는 xl로 설정.
- text-sm md:text-lg: 기본 텍스트 크기를 작게(sm) 설정하고 중간 크기 이상의 화면에서는 lg로 증가시킴.
버튼:
- p-3 rounded-full w-52: 패딩을 3단위로 설정하고, 둥근 모양으로 버튼을 만들며, 너비는 52로 고정.
- bg-accentCyan: 버튼의 배경색을 accentCyan으로 설정.
- hover:scale-95: 버튼에 마우스를 올리면 크기가 약간 줄어듦.

이 섹션은 다크 모드와 라이트 모드에서 배경 이미지를 다르게 표시하며, 텍스트와 버튼이 중앙에 정렬된 히어로 섹션입니다.

3.Tailwind CSS로 Features 섹션과 Stay Productive 섹션 구현

1. Features 섹션

레이아웃: 두 개의 행(Row)과 각 행에 두 개의 열(Column)로 구성됩니다.
기본 설정:
- section 태그에 id="features"를 부여하고, 배경색을 라이트 모드에서는 bg-gray-50, 다크 모드에서는 bg-dark-blue-1로 설정합니다.

<section id="features" class="pt-12 bg-gray-50 dark:bg-dark-blue-1">
    <!-- Features Container -->
    <div class="container mx-auto px-6 pb-32">
        <!-- 첫 번째 Row -->
        <div class="flex flex-col space-y-24 text-center md:flex-row">
            <!-- 첫 번째 Item -->
            <div class="flex flex-col items-center space-y-2 md:w-1/2">
                <div class="flex items-center justify-center h-24 mb-6">
                    <img src="images/icon-access-anywhere.svg" alt="Access Anywhere">
                </div>
                <h3 class="text-xl font-bold">Access your files from anywhere</h3>
                <p class="max-w-md">
                    The ability to use your devices without ever feeling like you're disconnected.
                </p>
            </div>
            <!-- 두 번째 Item -->
            <div class="flex flex-col items-center space-y-2 md:w-1/2">
                <div class="flex items-center justify-center h-24 mb-6">
                    <img src="images/icon-security.svg" alt="Security">
                </div>
                <h3 class="text-xl font-bold">Security you can trust</h3>
                <p class="max-w-md">
                    Your security is our top priority. We use advanced encryption to keep your data safe.
                </p>
            </div>
        </div>
        <!-- 두 번째 Row 복사 후 적용 -->
        <div class="flex flex-col space-y-24 text-center md:flex-row mt-28">
            <!-- 세 번째 Item -->
            <div class="flex flex-col items-center space-y-2 md:w-1/2">
                <div class="flex items-center justify-center h-24 mb-6">
                    <img src="images/icon-collaboration.svg" alt="Collaboration">
                </div>
                <h3 class="text-xl font-bold">Real-time collaboration</h3>
                <p class="max-w-md">
                    Work together and share files in real time. Everything you need, all in one place.
                </p>
            </div>
            <!-- 네 번째 Item -->
            <div class="flex flex-col items-center space-y-2 md:w-1/2">
                <div class="flex items-center justify-center h-24 mb-6">
                    <img src="images/icon-any-file.svg" alt="Any File">
                </div>
                <h3 class="text-xl font-bold">Store any type of file</h3>
                <p class="max-w-md">
                    Whether it’s work, pictures, or videos, store any file and access it from anywhere.
                </p>
            </div>
        </div>
    </div>
</section>

설명:

flex-col을 사용하여 작은 화면에서는 세로 정렬을, md:flex-row로 중간 이상 화면에서는 가로 정렬을 설정했습니다.
각 아이템은 50%의 너비를 차지(md:w-1/2)하고, space-y-24로 행 간의 여백을 설정했습니다.
각 아이콘과 텍스트는 flex items-center justify-center로 중앙 정렬하고, 이미지 아래에 h3와 p를 추가하여 제목과 설명을 표시합니다.

2. Stay Productive 섹션

기본 설정:
- 배경색을 라이트 모드에서는 bg-white, 다크 모드에서는 bg-dark-blue로 설정합니다.

<section id="productive" class="bg-white dark:bg-dark-blue py-24">
    <!-- Stay Productive Container -->
    <div class="container flex flex-col mx-auto px-6 md:flex-row md:space-x-16">
        <!-- 이미지 영역 -->
        <div class="md:w-1/2">
            <img class="mb-10" src="images/illustration-stay-productive.png" alt="Stay Productive">
        </div>
        <!-- 콘텐츠 영역 -->
        <div class="flex flex-col items-start md:w-1/2">
            <div class="flex flex-col space-y-5">
                <h4 class="max-w-md text-xl font-bold md:text-4xl">Stay productive wherever you are</h4>
                <p class="text-medium md:text-lg">
                    Never let location be an issue when accessing your files. File storage has been simplified.
                </p>
                <p class="text-medium md:text-lg">
                    Secure collaboration and seamless access to your documents from anywhere in the world.
                </p>
            </div>
            <!-- 링크 영역 -->
            <div class="block mt-4">
                <a href="#" class="border-b border-accent-cyan text-accent-cyan">
                    See how Flyo works
                </a>
                <img class="inline pb-2" src="images/icon-arrow.svg" alt="Arrow">
            </div>
        </div>
    </div>
</section>

설명:

container flex-col mx-auto로 중앙 정렬과 Flexbox 컬럼 레이아웃을 설정한 후, 중간 화면 이상에서 md:flex-row로 가로 정렬을 적용했습니다.
이미지와 텍스트는 각각 너비의 절반(md:w-1/2)을 차지하며, 텍스트 아래에 링크가 있고 그 옆에 아이콘 이미지를 배치했습니다.
텍스트 크기(text-medium, md:text-lg)와 헤딩 크기(text-xl, md:text-4xl)는 화면 크기에 따라 동적으로 변경됩니다.

4.Testimonials 섹션을 Tailwind CSS로 구현하기

1. Testimonials 섹션 정의

<section id="testimonials" class="bg-gray-50 dark:bg-darkBlue">
  <div class="container mx-auto px-6 pb-12 md:pb-96">
    <div class="relative flex flex-col md:flex-row md:space-x-12 space-y-6 md:space-y-0">
      <!-- Testimonial Box 1 -->
      <div class="relative flex flex-col p-10 space-y-6 rounded-lg bg-gray-100 dark:bg-darkBlue3 md:w-1/3">
        <img src="images/quotes.svg" class="absolute left-1 -top-2 w-10 md:-top-16 md:w-20" alt="quote icon">
        <p class="text-sm leading-5 md:text-lg">
          “간단한 예시 텍스트입니다. 사용자의 후기 내용을 여기 작성합니다.”
        </p>
        <div class="flex items-center space-x-4">
          <img src="images/profile1.jpg" class="w-10 h-10 rounded-full" alt="user image">
          <div>
            <h5 class="text-sm font-semibold">Satish Patel</h5>
            <p class="text-xs font-extralight">Founder & CEO, Huddle</p>
          </div>
        </div>
      </div>

      <!-- Testimonial Box 2 -->
      <div class="relative flex flex-col p-10 space-y-6 rounded-lg bg-gray-100 dark:bg-darkBlue3 md:w-1/3">
        <img src="images/quotes.svg" class="absolute left-1 -top-2 w-10 md:-top-16 md:w-20" alt="quote icon">
        <p class="text-sm leading-5 md:text-lg">
          “또 다른 예시 텍스트입니다. 고객의 긍정적인 피드백을 여기에 표시합니다.”
        </p>
        <div class="flex items-center space-x-4">
          <img src="images/profile2.jpg" class="w-10 h-10 rounded-full" alt="user image">
          <div>
            <h5 class="text-sm font-semibold">Bruce Mackenzie</h5>
            <p class="text-xs font-extralight">Founder & CEO, Huddle 2</p>
          </div>
        </div>
      </div>

      <!-- Testimonial Box 3 -->
      <div class="relative flex flex-col p-10 space-y-6 rounded-lg bg-gray-100 dark:bg-darkBlue3 md:w-1/3">
        <img src="images/quotes.svg" class="absolute left-1 -top-2 w-10 md:-top-16 md:w-20" alt="quote icon">
        <p class="text-sm leading-5 md:text-lg">
          “세 번째 예시 텍스트입니다. 사용자의 감동적인 이야기를 표시합니다.”
        </p>
        <div class="flex items-center space-x-4">
          <img src="images/profile3.jpg" class="w-10 h-10 rounded-full" alt="user image">
          <div>
            <h5 class="text-sm font-semibold">Alex Johnson</h5>
            <p class="text-xs font-extralight">CEO, Huddle 3</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

설명:

Testimonials 섹션: section 태그에 id="testimonials"를 부여하여 나중에 smooth scroll에 사용할 수 있도록 했습니다.
- 배경색은 light mode에서는 gray-50, dark mode에서는 darkBlue를 사용했습니다.
메인 컨테이너: container 클래스를 사용하여 중앙 정렬과 기본 여백을 설정하고, 작은 화면에서는 padding-bottom을 pb-12로, 중간 화면 이상에서는 pb-96으로 설정하여 충분한 여백을 추가했습니다.
Testimonial 박스: 각 testimonial은 flex-col로 세로 정렬되며, 중간 화면 이상에서는 flex-row로 가로 정렬됩니다.
- 세 testimonial 박스 모두 동일한 구조를 따르며, 각 박스의 크기를 md:w-1/3으로 설정해 가로로 세 개가 나란히 배치됩니다.
Quote 아이콘: Quote 아이콘 이미지는 testimonial 박스 내부에 absolute로 위치하여 상단에 배치되며, 작은 화면과 중간 화면에서 각각 다른 크기와 위치를 가지게 됩니다.
사용자 정보: 사용자 이미지는 w-10 h-10으로 설정해 원형으로 표시되며, 이름과 직책이 텍스트로 표시됩니다.

5.푸터 추가

1)푸터 태그를 사용하여 시작합니다.

<footer class="bg-darkBlue2 text-white">

푸터의 배경색은 dark blue로 설정하고, 글자 색상은 white로 지정하여 가독성을 유지합니다.

2) 푸터 내부에는 여러 요소들을 가운데 정렬하기 위해 컨테이너를 설정하고, 여기에 적절한 패딩을 줍니다.

<div class="container mx-auto pt-12 px-5 pb-10">

3) Flex 컨테이너를 사용하여 내부 아이템들을 정렬합니다. 작은 화면에서는 **세로(flex-col)**로 쌓이고, 중간 이상의 화면에서는 **가로(flex-row)**로 배치되게 합니다.

<div class="flex flex-col justify-between space-y-24 md:flex-row md:space-y-0">

4)이메일 & 전화번호 섹션에서는 아이콘과 함께 정보를 표시합니다. 아이콘 크기를 적절하게 설정하고, 전화번호 및 이메일 주소를 배치합니다.

<div class="mt-10 space-y-6">
  <div class="flex items-center space-x-3 md:-mt-10">
    <div class="w-6">
      <img src="images/icon-phone.svg" alt="" class="scale-10" />
    </div>
    <div>+1-543-123-4567</div>
  </div>
  <div class="flex items-center space-x-3">
    <div class="w-6">
      <img src="images/icon-email.svg" alt="" class="scale-10" />
    </div>
    <div>example@fylo.com</div>
  </div>
</div>

5)메뉴 섹션에서는 두 개의 컬럼으로 메뉴 항목을 나열합니다. 각각의 메뉴는 Flexbox를 사용해 정렬되고, 중간 화면 이상에서는 **가로 정렬(flex-row)**로 변경됩니다.

<div class="flex flex-col space-y-10 text-xl md:text-base md:space-x-20 md:space-y-0 md:flex-row">
  <div class="flex flex-col space-y-3">
    <a href="#">회사 소개</a>
    <a href="#">채용</a>
    <a href="#">언론 보도</a>
    <a href="#">블로그</a>
  </div>
  <div class="flex flex-col space-y-3">
    <a href="#">문의하기</a>
    <a href="#">이용 약관</a>
    <a href="#">개인정보 처리방침</a>
  </div>
</div>

6) 마지막으로 소셜 미디어 아이콘을 추가합니다.

각 아이콘은 원형으로 만들고, 아이콘을 클릭할 수 있게 링크를 추가합니다. hover 효과를 적용해 마우스 오버 시 시각적인 변화를 줄 수 있습니다.

<div class="flex justify-center pb-10 space-x-3">
  <div>
    <a href="#">
      <img src="images/facebook.svg" alt="" class="p-2 bg-darkBlue rounded-full ficon" />
    </a>
  </div>
  <div>
    <a href="#">
      <img src="images/twitter.svg" alt="" class="p-2 bg-darkBlue rounded-full ficon" />
    </a>
  </div>
  <div>
    <a href="#">
      <img src="images/instagram.svg" alt="" class="p-2 bg-darkBlue rounded-full ficon" />
    </a>
  </div>
</div>