init: 안녕하세요! 샘플 정적 사이트 (Coolify 배포 테스트)
- 홈(index.html), 소개(about.html), 연락처(contact.html) 3페이지 - 네비게이션 버튼으로 페이지 간 이동 - style.css 공통 스타일
This commit is contained in:
52
about.html
Normal file
52
about.html
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>소개 | 테스트 사이트</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<span class="logo">🌸 테스트 사이트</span>
|
||||||
|
<a href="index.html" class="btn">홈</a>
|
||||||
|
<a href="about.html" class="btn active">소개</a>
|
||||||
|
<a href="contact.html" class="btn">연락처</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>소개 📖</h1>
|
||||||
|
<p class="subtitle">이 프로젝트에 대해 소개합니다.</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="badge">프로젝트 소개</span>
|
||||||
|
<h2>coder-build-test</h2>
|
||||||
|
<p>이 프로젝트는 Coder 환경에서 Gitea 레포를 거쳐 Coolify로 배포하는 파이프라인을 검증하기 위한 테스트 사이트입니다.</p>
|
||||||
|
<p>빌드 스텝 없이 정적 HTML/CSS 파일로만 구성되어 있어, Coolify의 Static Site 배포 방식으로 바로 서빙할 수 있습니다.</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>기술 스택</h2>
|
||||||
|
<p>최대한 단순하게 구성했습니다.</p>
|
||||||
|
<div class="tag-list">
|
||||||
|
<span class="tag">HTML5</span>
|
||||||
|
<span class="tag">CSS3</span>
|
||||||
|
<span class="tag">Vanilla JS</span>
|
||||||
|
<span class="tag">Gitea</span>
|
||||||
|
<span class="tag">Coolify</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>배포 플로우</h2>
|
||||||
|
<p>Coder에서 코드 작성 → Gitea push → Coolify가 감지하여 자동 배포 (또는 수동 트리거)</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<a href="index.html" class="btn secondary">← 홈으로</a>
|
||||||
|
<a href="contact.html" class="btn primary">연락처 →</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>배포 테스트 사이트 — Coolify + Gitea</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
48
contact.html
Normal file
48
contact.html
Normal file
@@ -0,0 +1,48 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>연락처 | 테스트 사이트</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<span class="logo">🌸 테스트 사이트</span>
|
||||||
|
<a href="index.html" class="btn">홈</a>
|
||||||
|
<a href="about.html" class="btn">소개</a>
|
||||||
|
<a href="contact.html" class="btn active">연락처</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>연락처 📬</h1>
|
||||||
|
<p class="subtitle">궁금한 점이 있으면 연락주세요.</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="badge">연락처</span>
|
||||||
|
<h2>연락 방법</h2>
|
||||||
|
<div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-label">GitHub</span>
|
||||||
|
<span>github.com/2620227</span>
|
||||||
|
</div>
|
||||||
|
<div class="contact-item">
|
||||||
|
<span class="contact-label">Gitea</span>
|
||||||
|
<span>gitea.bokdev.in/2620227</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>빠른 이동</h2>
|
||||||
|
<p>다른 페이지로 이동해보세요.</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<a href="index.html" class="btn secondary">← 홈으로</a>
|
||||||
|
<a href="about.html" class="btn primary">소개 보기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>배포 테스트 사이트 — Coolify + Gitea</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
44
index.html
Normal file
44
index.html
Normal file
@@ -0,0 +1,44 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="ko">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>안녕하세요!</title>
|
||||||
|
<link rel="stylesheet" href="style.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<nav>
|
||||||
|
<span class="logo">🌸 테스트 사이트</span>
|
||||||
|
<a href="index.html" class="btn active">홈</a>
|
||||||
|
<a href="about.html" class="btn">소개</a>
|
||||||
|
<a href="contact.html" class="btn">연락처</a>
|
||||||
|
</nav>
|
||||||
|
|
||||||
|
<main>
|
||||||
|
<h1>안녕하세요! 👋</h1>
|
||||||
|
<p class="subtitle">Coolify 배포 테스트용 샘플 사이트입니다.</p>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<span class="badge">홈</span>
|
||||||
|
<h2>환영합니다!</h2>
|
||||||
|
<p>이 사이트는 Gitea + Coolify를 이용한 배포 파이프라인 테스트를 위해 만들어졌습니다. 아래 버튼을 눌러 다른 페이지로 이동해보세요.</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<a href="about.html" class="btn primary">소개 보기</a>
|
||||||
|
<a href="contact.html" class="btn secondary">연락처 보기</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<h2>페이지 목록</h2>
|
||||||
|
<p>이 사이트에는 3개의 페이지가 있습니다.</p>
|
||||||
|
<div class="button-group">
|
||||||
|
<a href="index.html" class="btn outline">홈 (현재)</a>
|
||||||
|
<a href="about.html" class="btn outline">소개</a>
|
||||||
|
<a href="contact.html" class="btn outline">연락처</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>배포 테스트 사이트 — Coolify + Gitea</footer>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
189
style.css
Normal file
189
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user