2287
No
https://braverokmc79.github.io/tailwind-clipboard-website/
https://github.dev/braverokmc79/tailwind-clipboard-website
1.설정 및 구성
프로젝트 설정:
- 'Simple Tailwind Starter'를 복사해 프로젝트 폴더에 붙여 넣고 npm install 명령어로 패키지를 설치한 후, npm run watch를 실행해 개발 환경을 설정합니다.
이미지 및 SVG 파일 준비:
- 프로젝트에 사용할 이미지를 'project assets' 폴더에서 가져와 root 폴더에 저장합니다.
- SVG 파일은 성능 문제로 직접 HTML 파일에 넣는 것이 좋지만, 이 프로젝트에서는 이미지 태그를 사용해 관리합니다.
Tailwind 설정 수정:
- Tailwind 설정 파일(tailwind.config.js)에서 화면 크기와 색상에 대한 설정을 추가합니다.
- 화면 크기: 480px, 768px, 976px, 1440px의 breakpoint를 설정합니다.
- 색상: Strong Cyan, Light Blue, Dark Grayish Blue, Grayish Blue 등의 커스텀 색상을 추가합니다.
글꼴 설정:
- Google Fonts에서 'Nanum Gothic' 폰트를 가져와 HTML 파일에 추가하고, Tailwind의 fontFamily 속성에 추가합니다.
<!DOCTYPE html>
<html lang="en">
<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=Bai+Jamjuree:wght@400;600&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<title>클립보드 웹사이트</title>
</head>
<body>
</body>
</html>
tailwind.config.js
module.exports = {
content: ['./*.html'],
theme: {
screens: {
sm: '480px',
md: '768px',
lg: '976px',
xl: '1440px',
},
extend: {
colors: {
strongCyan: 'hsl(171, 66%, 44%)',
lightBlue: 'hsl(233, 100%, 69%)',
darkGrayishBlue: 'hsl(210, 10%, 33%)',
grayishBlue: 'hsl(201, 11%, 66%)',
},
fontFamily: {
sans: ['Nanum Gothic', 'sans-serif'],
},
},
},
plugins: [],
}
1. Hero 섹션
Hero 섹션은 웹사이트의 첫인상을 결정짓는 중요한 부분으로, 로고와 헤딩, 설명, 다운로드 버튼을 포함합니다.
Hero 섹션 HTML 코드:
<section id="hero">
<div class="section-container mb-40 pt-16">
<img src="images/logo.svg" alt="" class="mx-auto my-16" />
<h3 class="font-sans text-4xl font-bold text-darkGrayishBlue mb-8">
복사한 모든 것의 기록
</h3>
<p class="section-content mb-10 text-2xl text-grayishBlue">
클립보드를 사용하면 복사한 모든 항목을 추적하고 정리할 수 있습니다.
모든 기기에서 클립보드를 즉시 사용할 수 있습니다.
</p>
<div class="button-container flex flex-col md:flex-row space-y-4 md:space-y-0 md:space-x-4">
<a href="#" class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80">
iOS 다운로드
</a>
<a href="#" class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80">
Mac용 다운로드
</a>
</div>
</div>
</section>
설명:
- section-container: Hero 섹션을 감싸는 컨테이너로, Tailwind 클래스를 사용하여 여백 및 패딩을 설정합니다.
- 로고 이미지: mx-auto 클래스를 사용해 가운데 정렬하고, my-16으로 상하 여백을 추가합니다.
- 제목 (H3): font-sans, text-4xl, font-bold, text-darkGrayishBlue, mb-8 클래스를 사용하여 폰트, 크기, 색상, 여백을 설정합니다.
- 설명 (Paragraph): section-content, mb-10, text-2xl, text-grayishBlue 클래스를 사용하여 텍스트 스타일을 설정합니다.
- 버튼: button-container 클래스를 사용하여 버튼을 수직 및 수평으로 정렬하며, Tailwind 클래스 p-4, px-8, rounded-full, shadow-lg, bg-strongCyan, bg-lightBlue, duration-200, hover:opacity-80를 사용해 스타일을 지정합니다.
2. Snippets 섹션
Snippets 섹션 HTML 코드:
<section id="snippets">
<div class="section-container my-20">
<h3 class="text-3xl font-semibold mb-6">스니펫을 추적하세요</h3>
<p class="section-content text-xl text-grayishBlue mb-24">
클립보드는 복사한 모든 항목을 클라우드에 즉시 저장하므로 모든 기기에서
스니펫에 쉽게 접근할 수 있습니다. Mac과 iOS 앱으로 모든 항목을 정리할 수 있습니다.
</p>
</div>
</section>
설명:
- 제목 (H3): text-3xl, font-semibold, mb-6 클래스를 사용하여 제목의 크기, 폰트 두께, 여백을 설정합니다.
- 설명 (Paragraph): section-content, text-xl, text-grayishBlue, mb-24 클래스를 사용하여 설명의 스타일을 설정합니다.
3. Features 섹션
Features 섹션 HTML 코드:
<section id="features">
<div class="section-container my-20">
<div class="relative flex flex-col md:flex-row md:space-x-32">
<div class="md:w-1/2">
<img src="images/image-computer.png" alt="" class="md:absolute top-0 right-0" />
</div>
<div class="flex flex-col mt-16 mb-24 space-y-12 text-xl md:w-1/2 md:mb-60 md:text-left md:pl-16">
<div>
<h5 class="text-2xl font-semibold mb-4">빠른 검색</h5>
<p class="max-w-md text-grayishBlue">
스니펫을 내용, 카테고리, 웹 주소, 애플리케이션 등으로 쉽게 검색하세요.
</p>
</div>
<div>
<h5 class="text-2xl font-semibold mb-4">iCloud 동기화</h5>
<p class="max-w-md text-grayishBlue">
모든 기기에서 스니펫이 즉시 저장되고 동기화됩니다.
</p>
</div>
<div>
<h5 class="text-2xl font-semibold mb-4">완전한 기록</h5>
<p class="max-w-md text-grayishBlue">
앱 사용을 시작한 첫 순간부터 모든 스니펫을 검색할 수 있습니다.
</p>
</div>
</div>
</div>
</div>
</section>
설명:
- 이미지: relative, md:absolute, top-0, right-0 클래스를 사용하여 이미지의 위치를 조정합니다.
- 기능 설명: 각 기능 설명 블록에 대해 text-2xl, font-semibold, mb-4 클래스를 사용하여 제목의 스타일을 설정하고, max-w-md, text-grayishBlue 클래스를 사용하여 텍스트 스타일을 설정합니다.
4. Access Anywhere 섹션
Access Anywhere 섹션 HTML 코드:
<section id="access">
<div class="section-container my-20">
<h3 class="text-3xl font-semibold mb-6">어디서나 클립보드에 접근하세요</h3>
<p class="section-content text-xl text-grayishBlue mb-24">
이동 중이든 컴퓨터 앞에 있든, 몇 번의 클릭만으로 모든 스니펫에 접근할 수 있습니다.
</p>
<img src="images/image-devices.png" alt="" class="mx-auto" />
</div>
</section>
설명:
- 제목 (H3): text-3xl, font-semibold, mb-6 클래스를 사용하여 제목의 크기, 폰트 두께, 여백을 설정합니다.
- 설명 (Paragraph): section-content, text-xl, text-grayishBlue, mb-24 클래스를 사용하여 설명의 스타일을 설정합니다.
- 이미지: mx-auto 클래스를 사용하여 이미지를 가운데 정렬합니다.
5. Supercharge 섹션
Supercharge 섹션 HTML 코드:
<section id="supercharge">
<div class="section-container my-20">
<h3 class="text-3xl font-semibold mb-6">작업 흐름을 강화하세요</h3>
<p class="section-content text-xl text-grayishBlue mb-16">
생산성을 높일 수 있는 도구를 제공합니다.
</p>
<div class="flex flex-col md:flex-row items-center justify-between space-y-16 md:space-y-0 md:space-x-12">
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-blacklist.svg" alt="" class="mb-6" />
<h5 class="text-2xl font-semibold">블랙리스트 생성</h5>
<p class="text-grayishBlue max-w-md">
특정 스니펫을 검색하거나 관리할 수 있습니다.
</p>
</div>
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-text.svg" alt="" class="mb-6" />
<h5 class="text-2xl font-semibold">평문 텍스트 스니펫</h5>
<p class="text-grayishBlue max-w-md">
복사한 텍스트에서 불필요한 서식을 제거하고 일관된 형식을 유지하세요.
</p>
</div>
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-preview.svg" alt="" class="mb-6" />
<h5 class="text-2xl font-semibold">미리보기</h5>
<p class="text-grayishBlue max-w-md">
클립보드의 모든 스니펫을 빠르게 미리 볼 수 있습니다.
</p>
</div>
</div>
</div>
</section>
설명:
- 기능 설명: 각 기능 설명 블록에 대해 text-2xl, font-semibold, mb-6 클래스를 사용하여 제목의 스타일을 설정하고, text-grayishBlue, max-w-md 클래스를 사용하여 텍스트 스타일을 설정합니다.
- 아이콘 이미지: mb-6 클래스를 사용하여 여백을 설정합니다.
Bottom CTA (Call-to-Action) 섹션
이 섹션은 iOS 및 Mac 앱 다운로드 링크를 제공하는 부분입니다. 간단한 제목과 설명 문구, 그리고 두 개의 버튼으로 구성됩니다.
개발 과정:
섹션 컨테이너 설정:
<section id="bottom"> <div class="section-container my-20">
section-container 클래스는 이 프로젝트 전반에 걸쳐 일관된 스타일을 유지하도록 설정되었습니다.
헤딩 및 설명 추가:
<h3>iOS 및 Mac용 클립보드</h3> <p class="section-content mb-10 text-xl"> 앱스토어에서 무료로 제공됩니다. Mac 또는 iOS용으로 다운로드하고 iCloud와 동기화하여 사용을 시작하세요. </p>
section-container 클래스는 이 프로젝트 전반에 걸쳐 일관된 스타일을 유지하도록 설정되었습니다.
헤딩 및 설명 추가:
<h3>iOS 및 Mac용 클립보드</h3> <p class="section-content mb-10 text-xl"> 앱스토어에서 무료로 제공됩니다. Mac 또는 iOS용으로 다운로드하고 iCloud와 동기화하여 사용을 시작하세요. </p>
- section-content: 텍스트에 일관된 스타일을 적용.
- mb-10: 하단에 여백을 추가하여 텍스트와 버튼 간 간격을 조정.
버튼 추가:
<div class="button-container"> <a href="#" class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80">iOS 다운로드</a> <a href="#" class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80">Mac용 다운로드</a> </div>
3. Footer 섹션
푸터는 로고, 메뉴, 그리고 소셜 아이콘으로 구성된 최하단 섹션입니다. 반응형 디자인을 통해 작은 화면에서는 세로로, 큰 화면에서는 가로로 정렬됩니다.
개발 과정:
푸터 컨테이너 설정:
<footer class="bg-gray-50">
<div class="section-container">
<div class="flex flex-col items-center justify-between md:flex-row">
- 푸터는 bg-gray-50 배경 색상을 사용해 구분되며, Flexbox를 통해 아이템들이 정렬됩니다.
로고 및 메뉴 추가:
<img src="images/logo.svg" alt="" class="scale-50" /> <div class="flex flex-col space-y-4 text-center md:text-left"> <div><a href="#" class="hover:text-strongCyan">FAQ</a></div> <div><a href="#" class="hover:text-strongCyan">연락처</a></div> </div>
- 메뉴는 FAQ, 연락처 등으로 구성되고, hover 시 글자 색상이 변하는 효과를 추가했습니다.
소셜 아이콘 추가:
<div class="flex justify-between w-32 py-1"> <a href="#"><img src="images/icon-facebook.svg" alt="" /></a> <a href="#"><img src="images/icon-twitter.svg" alt="" /></a> <a href="#"><img src="images/icon-instagram.svg" alt="" /></a> </div>
각 아이콘에 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=Bai+Jamjuree:wght@400;600&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css" />
<title>Clipboard Website</title>
</head>
<body>
<!-- Hero 섹션: 로고, 헤딩, 설명, iOS/Mac 다운로드 버튼 -->
<section id="hero">
<div class="section-container mb-40 pt-16">
<img src="images/logo.svg" alt="" class="mx-auto my-16" />
<h3 class="font-sans">복사한 모든 것의 기록</h3>
<p class="section-content mb-10 text-2xl">
클립보드를 사용하면 복사한 모든 항목을 추적하고 정리할 수 있습니다.
모든 기기에서 클립보드를 즉시 사용할 수 있습니다.
</p>
<div class="button-container">
<a
href="#"
class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80"
>
iOS 다운로드
</a>
<a
href="#"
class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80"
>
Mac용 다운로드
</a>
</div>
</div>
</section>
<!-- Snippets 섹션: 클립보드 기능 설명 -->
<section id="snippets">
<div class="section-container my-20">
<h3>스니펫을 추적하세요</h3>
<p class="section-content mb-24 text-xl">
클립보드는 복사한 모든 항목을 클라우드에 즉시 저장하므로 모든 기기에서
스니펫에 쉽게 접근할 수 있습니다. Mac과 iOS 앱으로 모든 항목을 정리할 수 있습니다.
</p>
</div>
</section>
<!-- Features 섹션: 주요 기능 3가지 소개 -->
<section id="features">
<div class="section-container my-20">
<div class="relative flex flex-col md:flex-row md:space-x-32">
<div class="md:w-1/2">
<img
src="images/image-computer.png"
alt=""
class="md:absolute top-0 right-[50%]"
/>
</div>
<div
class="flex flex-col mt-16 mb-24 space-y-12 text-xl md:w-1/2 md:mb-60 md:text-left md:pl-16"
>
<div>
<h5>빠른 검색</h5>
<p class="max-w-md text-grayishBlue">
스니펫을 내용, 카테고리, 웹 주소, 애플리케이션 등으로 쉽게 검색하세요.
</p>
</div>
<div>
<h5>iCloud 동기화</h5>
<p class="max-w-md text-grayishBlue">
모든 기기에서 스니펫이 즉시 저장되고 동기화됩니다.
</p>
</div>
<div>
<h5>완전한 기록</h5>
<p class="max-w-md text-grayishBlue">
앱 사용을 시작한 첫 순간부터 모든 스니펫을 검색할 수 있습니다.
</p>
</div>
</div>
</div>
</div>
</section>
<!-- Access Anywhere 섹션: 어디서든지 클립보드 접근 가능 -->
<section id="access">
<div class="section-container my-20">
<h3>어디서나 클립보드에 접근하세요</h3>
<p class="section-content mb-24 text-xl">
이동 중이든 컴퓨터 앞에 있든, 몇 번의 클릭만으로 모든 스니펫에 접근할 수 있습니다.
</p>
<img src="images/image-devices.png" alt="" class="mx-auto" />
</div>
</section>
<!-- Supercharge 섹션: 생산성 향상 도구 소개 -->
<section id="supercharge">
<div class="section-container my-20">
<h3>작업 흐름을 강화하세요</h3>
<p class="section-content mb-16 text-xl">
생산성을 높일 수 있는 도구를 제공합니다.
</p>
<div class="flex flex-col items-center justify-between space-y-16 md:flex-row md:space-y-0 md:space-x-12">
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-blacklist.svg" alt="" class="mb-6" />
<h5>블랙리스트 생성</h5>
<p class="max-w-md text-grayishBlue">
특정 스니펫을 검색하거나 관리할 수 있습니다.
</p>
</div>
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-text.svg" alt="" class="mb-6" />
<h5>평문 텍스트 스니펫</h5>
<p class="max-w-md text-grayishBlue">
복사한 텍스트에서 불필요한 서식을 제거하고 일관된 형식을 유지하세요.
</p>
</div>
<div class="flex flex-col items-center space-y-5">
<img src="images/icon-preview.svg" alt="" class="mb-6" />
<h5>미리보기</h5>
<p class="max-w-md text-grayishBlue">
클립보드의 모든 스니펫을 빠르게 미리 볼 수 있습니다.
</p>
</div>
</div>
</div>
</section>
<!-- References 섹션: 협력사 로고 -->
<section id="references">
<div
class="flex flex-col items-center justify-between max-w-6xl px-10 mx-auto space-y-16 my-44 md:flex-row md:space-y-0"
>
<img src="images/logo-google.png" alt="" />
<img src="images/logo-ibm.png" alt="" />
<img src="images/logo-microsoft.png" alt="" />
<img src="images/logo-hp.png" alt="" />
<img src="images/logo-vector-graphics.png" alt="" />
</div>
</section>
<!-- Bottom CTA 섹션: 다운로드 링크 제공 -->
<section id="bottom">
<div class="section-container my-20">
<h3>iOS 및 Mac용 클립보드</h3>
<p class="section-content mb-10 text-xl">
앱스토어에서 무료로 제공됩니다. Mac 또는 iOS용으로 다운로드하고 iCloud와 동기화하여 사용을 시작하세요.
</p>
<div class="button-container">
<a
href="#"
class="p-4 px-8 rounded-full shadow-lg bg-strongCyan duration-200 hover:opacity-80"
>
iOS 다운로드
</a>
<a
href="#"
class="p-4 px-8 rounded-full shadow-lg bg-lightBlue duration-200 hover:opacity-80"
>
Mac용 다운로드
</a>
</div>
</div>
</section>
<!-- Footer 섹션: 푸터에 메뉴와 소셜 아이콘 포함 -->
<footer class="bg-gray-50">
<div class="section-container">
<div class="flex flex-col items-center justify-between md:flex-row">
<img src="images/logo.svg" alt="" class="scale-50" />
<div
class="flex flex-col items-center justify-between flex-1 mb-10 space-y-6 md:flex-row md:mb-0 md:space-y-0 text-grayishBlue"
>
<div
class="flex flex-col space-y-4 md:flex-row md:ml-24 md:space-x-24 md:space-y-0"
>
<div class="flex flex-col space-y-4 text-center md:text-left">
<div><a href="#" class="hover:text-strongCyan">FAQ</a></div>
<div><a href="#" class="hover:text-strongCyan">연락처</a></div>
</div>
<div class="flex flex-col space-y-4 text-center md:text-left">
<div><a href="#" class="hover:text-strongCyan">개인정보 보호</a></div>
<div><a href="#" class="hover:text-strongCyan">이용 약관</a></div>
</div>
</div>
<div class="flex justify-between w-32 py-1">
<a href="#"><img src="images/icon-facebook.svg" alt="" /></a>
<a href="#"><img src="images/icon-twitter.svg" alt="" /></a>
<a href="#"><img src="images/icon-instagram.svg" alt="" /></a>
</div>
</div>
</div>
</div>
</footer>
</body>
</html>
style.css
/*
! tailwindcss v3.0.24 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: Nanum Gothic ,Bai Jamjuree, sans-serif;
/* 4 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font family by default.
2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-size: 1em;
/* 2 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-size: 100%;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/*
Ensure the default browser behavior of the `hidden` attribute.
*/
[hidden] {
display: none;
}
h3 {
margin-bottom: 2rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 700;
--tw-text-opacity: 1;
color: hsl(210 10% 33% / var(--tw-text-opacity));
}
@media (min-width: 768px) {
h3 {
font-size: 3rem;
line-height: 1;
}
}
h5 {
margin-bottom: 0.5rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
--tw-text-opacity: 1;
color: hsl(210 10% 33% / var(--tw-text-opacity));
}
*, ::before, ::after {
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
.relative {
position: relative;
}
.top-0 {
top: 0px;
}
.right-\[50\%\] {
right: 50%;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.my-16 {
margin-top: 4rem;
margin-bottom: 4rem;
}
.my-20 {
margin-top: 5rem;
margin-bottom: 5rem;
}
.my-44 {
margin-top: 11rem;
margin-bottom: 11rem;
}
.mb-40 {
margin-bottom: 10rem;
}
.mb-10 {
margin-bottom: 2.5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
.mt-16 {
margin-top: 4rem;
}
.mb-16 {
margin-bottom: 4rem;
}
.mb-6 {
margin-bottom: 1.5rem;
}
.flex {
display: flex;
}
.w-32 {
width: 8rem;
}
.max-w-md {
max-width: 28rem;
}
.max-w-6xl {
max-width: 72rem;
}
.flex-1 {
flex: 1 1 0%;
}
.scale-50 {
--tw-scale-x: .5;
--tw-scale-y: .5;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.flex-col {
flex-direction: column;
}
.items-center {
align-items: center;
}
.justify-between {
justify-content: space-between;
}
.space-y-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(3rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(3rem * var(--tw-space-y-reverse));
}
.space-y-16 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(4rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(4rem * var(--tw-space-y-reverse));
}
.space-y-5 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.25rem * var(--tw-space-y-reverse));
}
.space-y-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.space-y-4 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1rem * var(--tw-space-y-reverse));
}
.rounded-full {
border-radius: 9999px;
}
.bg-strongCyan {
--tw-bg-opacity: 1;
background-color: hsl(171 66% 44% / var(--tw-bg-opacity));
}
.bg-lightBlue {
--tw-bg-opacity: 1;
background-color: hsl(233 100% 69% / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.p-4 {
padding: 1rem;
}
.px-8 {
padding-left: 2rem;
padding-right: 2rem;
}
.px-10 {
padding-left: 2.5rem;
padding-right: 2.5rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
.pt-16 {
padding-top: 4rem;
}
.text-center {
text-align: center;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.text-grayishBlue {
--tw-text-opacity: 1;
color: hsl(201 11% 66% / var(--tw-text-opacity));
}
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.duration-200 {
transition-duration: 200ms;
}
.section-container {
margin-left: auto;
margin-right: auto;
max-width: 72rem;
padding-left: 2.5rem;
padding-right: 2.5rem;
text-align: center;
}
.section-content {
margin-left: auto;
margin-right: auto;
max-width: 48rem;
text-align: center;
line-height: 2.25rem;
--tw-text-opacity: 1;
color: hsl(201 11% 66% / var(--tw-text-opacity));
}
.button-container {
display: flex;
width: 100%;
flex-direction: column;
justify-content: center;
}
.button-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(1.5rem * var(--tw-space-y-reverse));
}
.button-container {
font-size: 1.25rem;
line-height: 1.75rem;
--tw-text-opacity: 1;
color: rgb(255 255 255 / var(--tw-text-opacity));
}
@media (min-width: 768px) {
.button-container {
flex-direction: row;
}
.button-container > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
--tw-space-x-reverse: 0;
margin-right: calc(1rem * var(--tw-space-x-reverse));
margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
}
}
body {
background-image: url('../images/bg-header-desktop.png');
background-repeat: no-repeat;
background-size: contain;
}
@media (max-width: 576px) {
body {
background-image: url('../images/bg-header-mobile.png');
}
}
.ficon:hover {
filter: invert(53%) sepia(68%) saturate(434%) hue-rotate(121deg)
brightness(101%) contrast(94%);
}
.hover\:text-strongCyan:hover {
--tw-text-opacity: 1;
color: hsl(171 66% 44% / var(--tw-text-opacity));
}
.hover\:opacity-80:hover {
opacity: 0.8;
}
@media (min-width: 768px) {
.md\:absolute {
position: absolute;
}
.md\:mb-60 {
margin-bottom: 15rem;
}
.md\:mb-0 {
margin-bottom: 0px;
}
.md\:ml-24 {
margin-left: 6rem;
}
.md\:w-1\/2 {
width: 50%;
}
.md\:flex-row {
flex-direction: row;
}
.md\:space-x-32 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(8rem * var(--tw-space-x-reverse));
margin-left: calc(8rem * calc(1 - var(--tw-space-x-reverse)));
}
.md\:space-y-0 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(0px * var(--tw-space-y-reverse));
}
.md\:space-x-12 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(3rem * var(--tw-space-x-reverse));
margin-left: calc(3rem * calc(1 - var(--tw-space-x-reverse)));
}
.md\:space-x-24 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(6rem * var(--tw-space-x-reverse));
margin-left: calc(6rem * calc(1 - var(--tw-space-x-reverse)));
}
.md\:pl-16 {
padding-left: 4rem;
}
.md\:text-left {
text-align: left;
}
}
댓글 ( 0)
댓글 남기기