마카로닉스

2289 No

Tailwind Loopstudios 웹사이트 만들기

2024-09-06 12:54:58 By 라이트 0 43 댓글수 0 포스트 하기

10월 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	31

소스 :
https://github.dev/braverokmc79/tailwind-loopstudios-website

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

1. 프로젝트 준비

폴더 구조:

/css
  - style.css
/fonts
  - (구글 폰트가 CDN을 통해 연결됨)
/images
  - (이미지 파일들)
/js
  - script.js
index.html

먼저 index.html, style.css, 그리고 Tailwind CSS를 설치한 다음, 프로젝트의 HTML 구조를 작성합니다.

Tailwind CSS 설치 방법:

Tailwind CSS는 CDN 또는 로컬 설치 방식으로 사용할 수 있습니다. 빠르게 시작하고 싶다면 아래와 같이 CDN을 사용하세요:

<head>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>

로컬에서 설치하려면 npm을 사용해서 설치합니다.

npm install tailwindcss
npx tailwindcss init

그 후, tailwind.config.js 파일에서 필요한 설정을 추가합니다.

2. HTML 기본 구조

index.html 파일에서 기본적인 HTML 구조를 만듭니다. Tailwind의 유틸리티 클래스를 활용하여 빠르게 스타일링할 수 있습니다.

HTML 기본 구조:

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Loopstudios 웹사이트</title>
    <!-- Tailwind CSS 연결 -->
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
    <!-- 히어로 섹션 시작 -->
    <section id="hero" class="bg-black text-white">
      <!-- 내용 추가 -->
    </section>
    <!-- 기능 섹션, 창작물 섹션, 푸터 -->
</body>
</html>

위와 같이 기본적인 HTML 태그를 구성한 후에 Tailwind CSS를 활용해 스타일을 지정해 나갑니다.

3. 헤더 및 네비게이션 바 만들기

먼저 section 태그를 사용해 히어로 섹션을 정의합니다. 이 섹션은 HTML5 구조에서 특정 역할을 나타내는 중요한 부분입니다.

<!-- 히어로 섹션 -->
<section id="hero">
  <!-- 히어로 컨테이너 -->
  <div class="container max-w-6xl mx-auto px-6 py-12">

id="hero": 이 섹션을 나중에 쉽게 참조할 수 있도록 ID를 지정합니다.
container: Tailwind에서 제공하는 기본적인 레이아웃 컨테이너입니다.
max-w-6xl: 최대 너비를 설정합니다. 6xl은 약 72rem(약 1152px)입니다.
mx-auto: 컨텐츠를 중앙에 배치합니다.
px-6 py-12: 수평과 수직으로 각각 6, 12의 패딩을 적용합니다.

메뉴/로고 컨테이너

메뉴와 로고는 Flexbox를 사용해 수평으로 정렬합니다. Flexbox는 요소들을 유연하게 배치하는 데 매우 유용합니다.

<!-- 메뉴/로고 컨테이너 -->
<nav class="flex items-center justify-between font-bold text-white">
  <!-- 로고 -->
  <img src="images/logo.svg" alt="로고" />

flex: Flexbox로 요소를 가로로 정렬합니다.
items-center: Flexbox 안의 요소들을 수직 가운데 정렬합니다.
justify-between: 로고와 메뉴 사이에 공간을 최대한 확보합니다.
font-bold: 글자를 굵게 표시합니다.
text-white: 텍스트 색상을 흰색으로 지정합니다.

메뉴 생성

다음으로 메뉴는 Flexbox를 사용해 가로로 정렬되며, 작은 화면에서는 숨기고 중간 크기 이상의 화면에서만 표시되도록 설정합니다.

<!-- 메뉴 -->
<div class="hidden h-10 font-alata md:flex md:space-x-8">
  <div class="group">
    <a href="#">소개</a>
    <div class="mx-2 group-hover:border-b group-hover:border-blue-50"></div>
  </div>
  <!-- 나머지 메뉴 항목들도 동일하게 처리 -->
</div>

hidden: 작은 화면에서는 메뉴가 보이지 않게 합니다.
md: 중간 크기 이상의 화면에서는 메뉴가 Flexbox로 보이도록 설정합니다.
md: 중간 크기 이상의 화면에서는 메뉴 항목 사이에 여백을 줍니다.
group-hover: 마우스를 올렸을 때 해당 그룹의 하단에 파란색 테두리가 생깁니다.

햄버거 버튼 추가

모바일 화면에서 사용할 햄버거 버튼을 추가합니다. 이 버튼은 작은 화면에서만 보입니다.

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

md: 중간 크기 이상의 화면에서는 햄버거 버튼이 보이지 않게 합니다.
focus: 버튼을 클릭할 때 생기는 기본 외곽선을 제거합니다.

모바일 메뉴

햄버거 버튼을 눌렀을 때 나오는 모바일 메뉴입니다. 이 메뉴는 화면 상단에 고정되며, 햄버거 버튼과 연결됩니다.

<!-- 모바일 메뉴 -->
<div
  id="menu"
  class="absolute top-0 bottom-0 left-0 hidden flex-col self-end w-full min-h-screen py-1 pt-40 pl-12 space-y-3 text-lg text-white uppercase bg-black"
>
  <a href="#" class="hover:text-pink-500">소개</a>
  <a href="#" class="hover:text-pink-500">경력</a>
  <a href="#" class="hover:text-pink-500">이벤트</a>
  <a href="#" class="hover:text-pink-500">제품</a>
  <a href="#" class="hover:text-pink-500">지원</a>
</div>

hidden: 기본적으로 숨겨져 있으며, 햄버거 버튼을 클릭하면 표시됩니다.
flex-col: 메뉴 항목을 수직으로 정렬합니다.
space-y-3: 항목들 사이에 수직 간격을 둡니다.
text-lg text-white: 텍스트는 크기가 크고 흰색으로 지정됩니다.

히어로 텍스트

히어로 섹션의 주요 메시지를 중앙에 배치하고, 텍스트 스타일을 설정합니다.

<div
  class="max-w-lg mt-32 mb-32 p-4 font-sans text-4xl text-white uppercase border-2 md:p-10 md:m-32 md:mx-0 md:leading-snug md:text-4xl"
>
  놀라운 경험을 제공합니다
</div>

max-w-lg: 최대 너비를 설정해 텍스트가 너무 넓어지지 않도록 제한합니다.
text-4xl: 텍스트 크기를 크게 설정합니다.
border-2: 2px의 테두리를 추가합니다.
md:: 중간 크기 이상의 화면에서 패딩과 여백 등을 재정의합니다.

       <!-- 히어로 섹션 -->
       <section id="hero">
        <!-- 히어로 컨테이너 -->
        <div class="container max-w-6xl mx-auto px-6 py-12">
          <!-- 메뉴/로고 컨테이너 -->
          <nav class="flex items-center justify-between font-bold text-white">
            <!-- 로고 -->
            <img src="images/logo.svg" alt="" />
            <!-- 메뉴 -->
            <div class="hidden h-10 font-alata md:flex md:space-x-8">
              <div class="group">
                <a href="#">소개</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">경력</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">이벤트</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">제품</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">지원</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
            </div>
            <!-- 햄버거 버튼 -->
            <div class="md:hidden">
              <button
                id="menu-btn"
                type="button"
                class="z-40 block hamburger md:hidden focus:outline-none"
              >
                <span class="hamburger-top"></span>
                <span class="hamburger-middle"></span>
                <span class="hamburger-bottom"></span>
              </button>
            </div>
          </nav>
  
          <!-- 모바일 메뉴 -->
          <div
            id="menu"
            class="absolute top-0 bottom-0 left-0 hidden flex-col self-end w-full min-h-screen py-1 pt-40 pl-12 space-y-3 text-lg text-white uppercase bg-black"
          >
            <a href="#" class="hover:text-pink-500">소개</a>
            <a href="#" class="hover:text-pink-500">경력</a>
            <a href="#" class="hover:text-pink-500">이벤트</a>
            <a href="#" class="hover:text-pink-500">제품</a>
            <a href="#" class="hover:text-pink-500">지원</a>
          </div>
  
          <div
            class="max-w-lg mt-32 
            mb-32 p-4 font-sans text-4xl            
             text-white uppercase border-2 md:p-10 md:m-32 md:mx-0 
            md:leading-snug md:text-4xl"
          >
            놀라운 경험을 제공합니다
          </div>
        </div>
      </section>

4. Tailwind를 이용한 반응형 디자인

Tailwind의 md:flex, hidden, space-x-8, group-hover:border-b 등의 클래스를 활용하여 각 요소에 반응형 디자인을 추가합니다.

5. 히어로 섹션 구성

히어로 섹션은 큰 텍스트와 배경 이미지를 포함하여 사용자에게 강한 첫인상을 주는 부분입니다.

<section id="hero" class="relative bg-cover bg-center" style="background-image: url('images/desktop/image-hero.jpg');">
  <div class="container mx-auto px-6 py-12 text-white">
    <div class="max-w-lg mt-32 mb-32 p-4 font-sans text-4xl uppercase border-2">
      인상적인 경험을 제공합니다
    </div>
  </div>
</section>

6. 기능 섹션 만들기

다음은 기능 섹션입니다. 이미지와 텍스트를 나란히 배치하며, Tailwind를 사용해 레이아웃을 조정합니다.

<!-- 기능 섹션 -->
<section id="feature">
  <!-- 기능 컨테이너 -->
  <div class="relative container flex flex-col max-w-6xl mx-auto my-32 px-6 text-gray-900 md:flex-row md:px-0">
    <!-- 이미지 -->
    <img src="images/desktop/image-interactive.jpg" alt="" />

    <!-- 텍스트 컨테이너 -->
    <div class="top-48 pr-0 bg-white md:absolute md:right-0 md:py-20 md:pl-20">
      <h2 class="max-w-lg mt-10 mb-6 font-sans text-4xl text-center text-gray-900 uppercase md:text-5xl md:mt-0 md:text-left">
        인터랙티브 VR의 선두주자
      </h2>
      <p class="max-w-md text-center md:text-left">
        2011년에 설립된 Loopstudios는 세계 최고의 기업들을 위해 세계적 수준의 가상 현실 프로젝트를 제작해왔습니다. 우리의 수상 경력이 있는 창작물들은 브랜드에 부합하는 디지털 경험을 통해 비즈니스를 변화시켰습니다.
      </p>
    </div>
  </div>
</section>

Tailwind CSS 클래스 설명

relative: 기능 컨테이너 안에 텍스트가 이미지 위에 겹치도록 하기 위해 사용.
flex flex-col: 작은 화면에서는 이미지와 텍스트가 위아래로 쌓이게 함.
max-w-6xl mx-auto my-32 px-6: 섹션의 최대 너비를 제한하고 중앙에 배치하며, 세로로 여백을 추가.
md:flex-row: 중간 사이즈 이상의 화면에서는 가로로 배치.
md:px-0: 중간 사이즈 이상의 화면에서는 양쪽 패딩 제거.
top-48 pr-0 bg-white md:absolute md:right-0 md:py-20 md:pl-20: 중간 사이즈 이상의 화면에서는 텍스트를 이미지 오른쪽에 위치시키고 배경색을 추가.
text-center md:text-left: 작은 화면에서는 텍스트를 가운데 정렬하고, 중간 사이즈 이상의 화면에서는 왼쪽 정렬.

md:flex-row, md:absolute, md:right-0: md는 Tailwind의 미디어 쿼리로, 중간 화면 이상에서 적용할 스타일을 정의.

7. 창작물 섹션 (그리드 레이아웃)

이미지를 그리드 형식으로 배치하고, 각 이미지에 마우스를 올렸을 때 애니메이션이 적용되도록 스타일링합니다.

<section id="creations" class="container mx-auto my-32 px-6">
  <h2 class="text-4xl uppercase mb-8 text-center">우리의 창작물</h2>
  <div class="grid grid-cols-1 md:grid-cols-4 gap-6">
    <div class="group">
      <img src="images/desktop/image-deep-earth.jpg" alt="Deep Earth" class="duration-200 group-hover:scale-110" />
      <h5 class="mt-4 text-center">딥 어스</h5>
    </div>
    <!-- 추가 항목들 -->
  </div>
</section>

<section id="creations">
  <div class="container max-w-6xl mx-auto my-32 px-6 text-gray-900 md:px-0">

<section> 태그: 웹 페이지의 특정 영역을 의미하며, 여기서는 "창작물"을 나타냅니다.
container 클래스: Tailwind CSS에서 사용되는 유틸리티 클래스입니다. 이 클래스는 중앙에 정렬된 컨텐츠 블록을 생성하며, max-w-6xl은 최대 폭을 6xl (6x 16rem)로 설정합니다.
mx-auto: 수평 방향으로 자동 여백을 설정하여 가운데 정렬합니다.
my-32: 상하 여백(margin)을 32px로 설정합니다.
px-6: 좌우 패딩(padding)을 6px로 설정하여 내용이 너무 가장자리로 붙지 않도록 합니다.
text-gray-900: 텍스트 색상을 진한 회색(#1a202c)으로 설정합니다.
md:px-0: 중간 화면 크기(md) 이상에서는 좌우 패딩을 0으로 설정합니다. 즉, 모바일과 데스크탑에서 다른 스타일을 적용합니다.

<div class="flex justify-center mb-20 md:justify-between">
  <h2 class="text-4xl text-center uppercase md:text-left md:text-5xl">우리의 창작물</h2>
  <button class="hidden btn md:block">모두 보기</button>
</div>

flex 클래스: 플렉스 박스 레이아웃을 사용하여 내부 요소를 정렬합니다.
justify-center: 자식 요소들을 중앙에 정렬합니다. 데스크탑 환경에서는 md:justify-between으로 요소들을 양 끝에 배치합니다.
text-4xl: 제목의 폰트 크기를 설정합니다. text-5xl은 데스크탑 환경에서 더 큰 폰트 크기를 설정합니다.
uppercase: 모든 텍스트를 대문자로 변환합니다.
md:block: 중간 크기 이상의 화면에서는 버튼을 표시하고, hidden 클래스로 모바일에서는 버튼을 숨깁니다.

<div class="item-container">
  <div class="group item">
    <img src="images/desktop/image-deep-earth.jpg" alt="" class="hidden w-full duration-200 md:block group-hover:scale-110"/>
    <img src="images/mobile/image-deep-earth.jpg" alt="" class="w-full md:hidden"/>
    <div class="item-gradient"></div>
    <h5>딥 어스</h5>
  </div>
  ...
</div>

item-container: 여러 항목들을 감싸는 컨테이너입니다. 이 컨테이너 안에 항목들을 배치합니다.
group item: 그룹 요소로, group-hover를 사용하여 그룹 내의 다른 요소들에 호버 효과를 줄 수 있습니다.
img 태그: 데스크탑과 모바일에서 다른 이미지를 표시합니다. hidden과 md:block, md:hidden을 사용하여 반응형 이미지를 제공합니다.
duration-200: 호버 시 이미지가 200ms 동안 스무스하게 변환됩니다.
group-hover:scale-110: 그룹에 호버하면 이미지를 110%로 확대합니다.
item-gradient: 그라디언트 효과를 주는 요소입니다.
h5 태그: 항목의 제목을 표시합니다.

<div class="flex justify-center mt-10">
  <button class="btn md:hidden">모두 보기</button>
</div>

justify-center: 버튼을 가운데에 배치합니다.
mt-10: 상단 여백을 10px로 설정합니다.
md:hidden: 이 버튼은 모바일 화면에서만 보이고, 데스크탑에서는 숨겨집니다.

8. 푸터 섹션

<footer class="bg-black text-white py-10">
  <div class="container mx-auto text-center">
    <img src="images/logo.svg" alt="Logo" class="w-44 mx-auto mb-4" />
    <div class="flex justify-center space-x-4">
      <a href="#"><img src="images/icon-facebook.svg" alt="Facebook" /></a>
      <a href="#"><img src="images/icon-twitter.svg" alt="Twitter" /></a>
    </div>
    <p class="mt-4">&copy; 2024 Loopstudios. All Rights Reserved.</p>
  </div>
</footer>

요약

Tailwind는 매우 간편하게 유연한 반응형 웹사이트를 만들 수 있도록 도와줍니다.
반응형 디자인: Tailwind의 유틸리티 클래스(md:, flex, space-x-8, hidden)를 사용하여 반응형 디자인을 쉽게 구현합니다.
애니메이션과 인터랙션: group-hover와 같은 클래스를 사용해 간단한 인터랙션을 추가할 수 있습니다.

전체 코드

<!DOCTYPE html>
<html lang="ko">
  <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=Alata&family=Josefin+Sans:wght@300&display=swap"rel="stylesheet"/>
    <link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">

    <script src="js/script.js" defer></script>
    <link rel="stylesheet" href="css/style.css" />
    <title>Tailwind  Loopstudios 웹사이트</title>
  </head>
  <body>

       <!-- 히어로 섹션 -->
       <section id="hero">
        <!-- 히어로 컨테이너 -->
        <div class="container max-w-6xl mx-auto px-6 py-12">
          <!-- 메뉴/로고 컨테이너 -->
          <nav class="flex items-center justify-between font-bold text-white">
            <!-- 로고 -->
            <img src="images/logo.svg" alt="" />
            <!-- 메뉴 -->
            <div class="hidden h-10 font-alata md:flex md:space-x-8">
              <div class="group">
                <a href="#">소개</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">경력</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">이벤트</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">제품</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <div class="group">
                <a href="#">지원</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
            </div>
            <!-- 햄버거 버튼 -->
            <div class="md:hidden">
              <button
                id="menu-btn"
                type="button"
                class="z-40 block hamburger md:hidden focus:outline-none"
              >
                <span class="hamburger-top"></span>
                <span class="hamburger-middle"></span>
                <span class="hamburger-bottom"></span>
              </button>
            </div>
          </nav>
  
          <!-- 모바일 메뉴 -->
          <div
            id="menu"
            class="absolute top-0 bottom-0 left-0 hidden flex-col self-end w-full min-h-screen py-1 pt-40 pl-12 space-y-3 text-lg text-white uppercase bg-black"
          >
            <a href="#" class="hover:text-pink-500">소개</a>
            <a href="#" class="hover:text-pink-500">경력</a>
            <a href="#" class="hover:text-pink-500">이벤트</a>
            <a href="#" class="hover:text-pink-500">제품</a>
            <a href="#" class="hover:text-pink-500">지원</a>
          </div>
  
          <div
            class="max-w-lg mt-32 mb-32 p-4 font-sans text-4xl text-white uppercase border-2 md:p-10 md:m-32 md:mx-0 md:text-6xl"
          >
            인상적인 경험을 제공합니다
          </div>
        </div>
      </section>
  

  <!-- 기능 섹션 -->
  <section id="feature">
    <!-- 기능 컨테이너 -->
    <div
      class="relative container flex flex-col max-w-6xl mx-auto my-32 px-6 text-gray-900 md:flex-row md:px-0"
    >
      <!-- 이미지 -->
      <img src="images/desktop/image-interactive.jpg" alt="" />

      <!-- 텍스트 컨테이너 -->
      <div
        class="top-48 pr-0 bg-white md:absolute md:right-0 md:py-20 md:pl-20"
      >
        <h2
          class="max-w-lg mt-10 mb-6 font-sans text-4xl text-center text-gray-900 uppercase md:text-5xl md:mt-0 md:text-left"
        >
          인터랙티브 VR의 선두주자
        </h2>

        <p class="max-w-md text-center md:text-left">
          2011년에 설립된 Loopstudios는 세계 최고의 기업들을 위해 세계적 수준의 가상 현실 프로젝트를 제작해왔습니다. 우리의 수상 경력이 있는 창작물들은 브랜드에 부합하는 디지털 경험을 통해 비즈니스를 변화시켰습니다.
        </p>
      </div>
    </div>
  </section>

    <!-- 창작물 섹션 -->
    <section id="creations">
      <!-- 창작물 컨테이너 -->
      <div class="container max-w-6xl mx-auto my-32 px-6 text-gray-900 md:px-0">
        <!-- 창작물 헤더 -->
        <div class="flex justify-center mb-20 md:justify-between">
          <h2 class="text-4xl text-center uppercase md:text-left md:text-5xl">
            우리의 창작물
          </h2>

          <button class="hidden btn md:block">모두 보기</button>
        </div>

        <!-- 항목 컨테이너 -->
        <div class="item-container">
          <!-- 항목 1 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-deep-earth.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-deep-earth.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>딥 어스</h5>
          </div>

          <!-- 항목 2 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-night-arcade.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-night-arcade.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>나이트 아케이드</h5>
          </div>

          <!-- 항목 3 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-soccer-team.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-soccer-team.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>축구팀 VR</h5>
          </div>

          <!-- 항목 4 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-grid.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-grid.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>더 그리드</h5>
          </div>
        </div>

        <!-- 항목 컨테이너 2 -->
        <div class="item-container mt-10">
          <!-- 항목 1 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-from-above.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-from-above.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>위에서 바라본 VR</h5>
          </div>

          <!-- 항목 2 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-pocket-borealis.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-pocket-borealis.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>포켓 보레알리스</h5>
          </div>

          <!-- 항목 3 -->
          <div class="group item">
            <!-- 데스크탑 이미지 -->
            <img
              src="images/desktop/image-curiosity.jpg"
              alt=""
              class="hidden w-full duration-200 md:block group-hover:scale-110"
            />
            <!-- 모바일 이미지 -->
            <img
              src="images/mobile/image-curiosity.jpg"
              alt=""
              class="w-full md:hidden"
            />
            <!-- 항목 그라디언트 -->
            <div class="item-gradient"></div>
            <!-- 항목 텍스트 -->
            <h5>큐리오시티</h5>
          </div>



        <!-- 항목 4 -->
        <div class="group item">
      <!-- 데스크탑 이미지 -->
          <img
            src="images/desktop/image-fisheye.jpg"
            alt=""
            class="hidden w-full duration-200 md:block group-hover:scale-110"
          />
         <!-- 모바일 이미지 -->
          <img
            src="images/mobile/image-fisheye.jpg"
            alt=""
            class="w-full md:hidden"
          />
           <!-- 항목 그라디언트 -->
          <div class="item-gradient"></div>
          <!-- 항목 3 -->
          <h5>Make It Fisheye</h5>
        </div>




        </div>

        <!-- 모두 보기 버튼 -->
        <div class="flex justify-center mt-10">
          <button class="btn md:hidden">모두 보기</button>
        </div>
      </div>
    </section>




    <footer class="bg-black">
      <!-- 컨테이너 -->
      <div class="container max-w-6xl py-10 mx-auto">
        <!-- 푸터 플렉스 컨테이너 -->
        <div
          class="flex flex-col items-center mb-8 space-y-6 md:flex-row md:space-y-0 md:justify-between md:items-start"
        >
          <!-- 메뉴 및 로고 컨테이너 -->
          <div
            class="flex flex-col items-center space-y-8 md:items-start md:space-y-4"
          >
            <!-- 로고 -->
            <div class="h-8">
              <img src="images/logo.svg" alt="" class="w-44 md:ml-3" />
            </div>
            <!-- 메뉴 컨테이너 -->
            <div
              class="flex flex-col items-center space-y-4 font-bold text-white md:flex-row md:space-y-0 md:space-x-6 md:ml-3"
            >
              <!-- 항목 1 -->
              <div class="h-10 group">
                <a href="#">소개</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <!-- 항목 2 -->
              <div class="h-10 group">
                <a href="#">채용</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <!-- 항목 3 -->
              <div class="h-10 group">
                <a href="#">이벤트</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <!-- 항목 4 -->
              <div class="h-10 group">
                <a href="#">제품</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
              <!-- 항목 5 -->
              <div class="h-10 group">
                <a href="#">지원</a>
                <div
                  class="mx-2 group-hover:border-b group-hover:border-blue-50"
                ></div>
              </div>
            </div>
          </div>
    
          <!-- 소셜 및 저작권 컨테이너 -->
          <div
            class="flex flex-col items-start justify-between space-y-4 text-gray-500"
          >
            <!-- 아이콘 컨테이너 -->
            <div
              class="flex items-center justify-center mx-auto space-x-4 md:justify-end md:mx-0"
            >
              <!-- 아이콘 1 -->
              <div class="h-8 group">
                <a href="#">
                  <img src="images/icon-facebook.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 아이콘 2 -->
              <div class="h-8 group">
                <a href="#">
                  <img src="images/icon-twitter.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 아이콘 3 -->
              <div class="h-8 group">
                <a href="#">
                  <img src="images/icon-pinterest.svg" alt="" class="h-6" />
                </a>
              </div>
              <!-- 아이콘 4 -->
              <div class="h-8 group">
                <a href="#">
                  <img src="images/icon-instagram.svg" alt="" class="h-6" />
                </a>
              </div>
            </div>
    
            <!-- 저작권 -->
            <div class="font-bold">
              &copy; 2024 Loopstudios. All Rights Reserved
            </div>
          </div>
        </div>
      </div>
    </footer>
    
  
  </body>
</html>