From 54850b79b179237be0af674db01b7acbf0f1cfc3 Mon Sep 17 00:00:00 2001 From: 2620227 Date: Fri, 12 Jun 2026 05:36:27 +0000 Subject: [PATCH] =?UTF-8?q?init:=20=EC=95=88=EB=85=95=ED=95=98=EC=84=B8?= =?UTF-8?q?=EC=9A=94!=20=EC=83=98=ED=94=8C=20=EC=A0=95=EC=A0=81=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=ED=8A=B8=20(Coolify=20=EB=B0=B0=ED=8F=AC=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 홈(index.html), 소개(about.html), 연락처(contact.html) 3페이지 - 네비게이션 버튼으로 페이지 간 이동 - style.css 공통 스타일 --- about.html | 52 ++++++++++++++ contact.html | 48 +++++++++++++ index.html | 44 ++++++++++++ style.css | 189 +++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 333 insertions(+) create mode 100644 about.html create mode 100644 contact.html create mode 100644 index.html create mode 100644 style.css diff --git a/about.html b/about.html new file mode 100644 index 0000000..cab2ea9 --- /dev/null +++ b/about.html @@ -0,0 +1,52 @@ + + + + + + 소개 | 테스트 사이트 + + + + + +
+

소개 📖

+

이 프로젝트에 대해 소개합니다.

+ +
+ 프로젝트 소개 +

coder-build-test

+

이 프로젝트는 Coder 환경에서 Gitea 레포를 거쳐 Coolify로 배포하는 파이프라인을 검증하기 위한 테스트 사이트입니다.

+

빌드 스텝 없이 정적 HTML/CSS 파일로만 구성되어 있어, Coolify의 Static Site 배포 방식으로 바로 서빙할 수 있습니다.

+
+ +
+

기술 스택

+

최대한 단순하게 구성했습니다.

+
+ HTML5 + CSS3 + Vanilla JS + Gitea + Coolify +
+
+ +
+

배포 플로우

+

Coder에서 코드 작성 → Gitea push → Coolify가 감지하여 자동 배포 (또는 수동 트리거)

+
+ ← 홈으로 + 연락처 → +
+
+
+ + + + diff --git a/contact.html b/contact.html new file mode 100644 index 0000000..6ac9df5 --- /dev/null +++ b/contact.html @@ -0,0 +1,48 @@ + + + + + + 연락처 | 테스트 사이트 + + + + + +
+

연락처 📬

+

궁금한 점이 있으면 연락주세요.

+ +
+ 연락처 +

연락 방법

+
+
+ GitHub + github.com/2620227 +
+
+ Gitea + gitea.bokdev.in/2620227 +
+
+
+ +
+

빠른 이동

+

다른 페이지로 이동해보세요.

+
+ ← 홈으로 + 소개 보기 +
+
+
+ + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..6a8aec5 --- /dev/null +++ b/index.html @@ -0,0 +1,44 @@ + + + + + + 안녕하세요! + + + + + +
+

안녕하세요! 👋

+

Coolify 배포 테스트용 샘플 사이트입니다.

+ +
+ 홈 +

환영합니다!

+

이 사이트는 Gitea + Coolify를 이용한 배포 파이프라인 테스트를 위해 만들어졌습니다. 아래 버튼을 눌러 다른 페이지로 이동해보세요.

+
+ 소개 보기 + 연락처 보기 +
+
+ +
+

페이지 목록

+

이 사이트에는 3개의 페이지가 있습니다.

+
+ 홈 (현재) + 소개 + 연락처 +
+
+
+ + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..3b0bb9b --- /dev/null +++ b/style.css @@ -0,0 +1,189 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: 'Segoe UI', 'Malgun Gothic', sans-serif; + background: #f0f4ff; + color: #1a1a2e; + min-height: 100vh; +} + +nav { + background: #16213e; + padding: 1rem 2rem; + display: flex; + gap: 0.75rem; + align-items: center; +} + +nav .logo { + color: #e2e8f0; + font-weight: 700; + font-size: 1.1rem; + margin-right: auto; +} + +nav a.btn { + color: #a0aec0; + background: transparent; + text-decoration: none; + padding: 0.45rem 1rem; + border-radius: 6px; + font-size: 0.9rem; + transition: all 0.2s; + border: 1px solid transparent; +} + +nav a.btn:hover, +nav a.btn.active { + color: #fff; + background: #0f3460; + border-color: #4a5568; +} + +main { + max-width: 720px; + margin: 3rem auto; + padding: 0 1.5rem; +} + +h1 { + font-size: 2.8rem; + margin-bottom: 0.5rem; + color: #16213e; +} + +.subtitle { + color: #718096; + font-size: 1.05rem; + margin-bottom: 2rem; +} + +.card { + background: #fff; + border-radius: 12px; + padding: 2rem; + box-shadow: 0 2px 12px rgba(0,0,0,0.08); + margin-bottom: 1.5rem; +} + +.card h2 { + font-size: 1.3rem; + margin-bottom: 0.75rem; + color: #16213e; +} + +.card p { + color: #4a5568; + line-height: 1.7; + margin-bottom: 1.25rem; +} + +.card p:last-child { + margin-bottom: 0; +} + +.button-group { + display: flex; + gap: 0.75rem; + flex-wrap: wrap; + margin-top: 1.25rem; +} + +.btn { + display: inline-block; + padding: 0.6rem 1.4rem; + border-radius: 8px; + font-size: 0.95rem; + font-weight: 500; + cursor: pointer; + text-decoration: none; + transition: all 0.2s; + border: none; +} + +.btn.primary { + background: #0f3460; + color: #fff; +} + +.btn.primary:hover { + background: #16213e; +} + +.btn.secondary { + background: #e2e8f0; + color: #2d3748; +} + +.btn.secondary:hover { + background: #cbd5e0; +} + +.btn.outline { + background: transparent; + border: 2px solid #0f3460; + color: #0f3460; +} + +.btn.outline:hover { + background: #0f3460; + color: #fff; +} + +.badge { + display: inline-block; + background: #ebf8ff; + color: #2b6cb0; + padding: 0.25rem 0.75rem; + border-radius: 999px; + font-size: 0.8rem; + font-weight: 600; + margin-bottom: 1rem; +} + +.tag-list { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + margin-top: 0.75rem; +} + +.tag { + background: #f0f4ff; + color: #4a5568; + padding: 0.3rem 0.8rem; + border-radius: 6px; + font-size: 0.85rem; + border: 1px solid #cbd5e0; +} + +.contact-item { + display: flex; + align-items: center; + gap: 0.75rem; + padding: 0.75rem 0; + border-bottom: 1px solid #e2e8f0; + color: #4a5568; +} + +.contact-item:last-child { + border-bottom: none; +} + +.contact-label { + font-weight: 600; + width: 70px; + color: #2d3748; + flex-shrink: 0; +} + +footer { + text-align: center; + padding: 2rem; + color: #a0aec0; + font-size: 0.85rem; +}