2289
No
소스 :
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">© 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">
© 2024 Loopstudios. All Rights Reserved
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
댓글 ( 0)
댓글 남기기