Skip to content

Commit 73fe6af

Browse files
eggtart-365eggtart-365
committed
feat: 기존 작업물 이전
0 parents  commit 73fe6af

14 files changed

Lines changed: 4306 additions & 0 deletions

File tree

‎README.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
## 웹페이지 레이아웃 및 메인페이지 작성
2+
3+
### 개요
4+
5+
주제 : 맛집 정보 제공 사이트
6+
7+
용도 : 인기 맛집 목록 제공, 주변 맛집 목록 제공, 카테고리별 맛집 분류
8+
9+
### 추가 설명
10+
11+
기존 마켓컬리 회원가입 폼 구성과제에서 제작한 회원가입 폼에서 Primary 컬러만 변경하여 사이트의 톤앤매너를 맞추었으며 input 필드나 버튼 디자인은 로그인 페이지에도 재활용 하였습니다.
12+
13+
각 페이지는 Header를 기본적으로 포함하고 있으며 공용으로 사용되는 컴포넌트의 CSS 디자인은 main.css에 정의 되어 있습니다.
14+
15+
메인 페이지는 광고형 배너, 최근 인기 맛집 리스트, 카테고리별 맛집 리스트, 기능 바로가기, Footer 순으로 제작되어있으며
16+
소개 페이지는 사이트의 주요 기능이라 생각되는 (지도를 구현하지는 못했습니다.) 맛집 지도를 Hero 섹션으로 설정하였고 아래에는 가상의 소개를 작성하였습니다.
17+
18+
사이트 전반적으로 수업에서 배운 translate나 transition을 사용하여 애니메이션을 구성하였습니다.
19+
20+
[참고] 음식점 이름 및 카테고리 리스트는 생성형 AI를 통해 생성하였습니다.
21+
22+
### 업데이트
23+
2026-05-29 : 로그인 및 회원가입 validation 추가, 하단 error 텍스트 추가하면서 레이아웃 일부 변형됨.

‎about.html‎

Lines changed: 165 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,165 @@
1+
<!doctype html>
2+
<html lang="ko">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>소개 - 맛길</title>
7+
<link
8+
rel="stylesheet"
9+
as="style"
10+
crossorigin
11+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
12+
/>
13+
<!-- JSDelivr 를 통해 Pretendard 폰트 추가 (JSDelivr는 오픈소스를 위해 운영되는 CDN(Content Delivery Network) 서비스) -->
14+
<link rel="stylesheet" href="css/main.css" />
15+
<link rel="stylesheet" href="css/about.css" />
16+
</head>
17+
<body>
18+
<header class="site-header">
19+
<div class="header-inner">
20+
<div class="header-left">
21+
<a href="index.html" class="logo">맛길</a>
22+
<!-- 로고: 클릭 시 메인 페이지로 이동 -->
23+
<nav class="nav">
24+
<a href="index.html">홈</a>
25+
<a href="#">이벤트</a>
26+
<a href="about.html">소개</a>
27+
</nav>
28+
</div>
29+
<div class="header-right">
30+
<div class="search-bar">
31+
<input
32+
class="search-input"
33+
type="text"
34+
placeholder="검색어를 입력해주세요"
35+
/>
36+
<button class="search-button" type="button">
37+
<svg
38+
width="16"
39+
height="16"
40+
viewBox="0 0 24 24"
41+
fill="none"
42+
stroke="currentColor"
43+
stroke-width="2"
44+
stroke-linecap="round"
45+
stroke-linejoin="round"
46+
>
47+
<circle cx="11" cy="11" r="8" />
48+
<line x1="21" y1="21" x2="16.65" y2="16.65" />
49+
</svg>
50+
</button>
51+
</div>
52+
<a href="login.html" class="btn-login">로그인</a>
53+
</div>
54+
</div>
55+
</header>
56+
57+
<main class="main-content">
58+
<!-- 히어로 배너 -->
59+
<section class="hero-banner">
60+
<!-- 배경 장식용 원형 도형 (포인터 이벤트 차단, 클릭 불가) -->
61+
<div class="hero-bg-shapes">
62+
<div class="hero-shape shape-1"></div>
63+
<div class="hero-shape shape-2"></div>
64+
<div class="hero-shape shape-3"></div>
65+
</div>
66+
<div class="hero-inner">
67+
<div class="hero-text">
68+
<p class="hero-eyebrow">우리 동네 맛집 탐색기</p>
69+
<h1 class="hero-title">맛있는 길을<br/>함께 걸어요</h1>
70+
<p class="hero-desc">내 주변 숨은 맛집을 지도 위에서 바로 찾고,<br/>실제 방문자의 솔직한 후기까지 한 번에.</p>
71+
<div class="hero-actions">
72+
<a href="#" class="hero-btn-primary">맛집 탐색하기</a>
73+
</div>
74+
</div>
75+
<div class="hero-visual">
76+
<div class="hero-card">
77+
<div class="hero-card-map"> <!-- 격자 배경 지도 미리보기 -->
78+
<!-- 맛집 위치를 나타내는 핀 (호버 시 툴팁 표시) -->
79+
<div class="map-pin pin-1">
80+
<span class="pin-dot"></span>
81+
<div class="pin-tooltip">김밥천국 ⭐ 4.8</div>
82+
</div>
83+
<div class="map-pin pin-2">
84+
<span class="pin-dot"></span>
85+
<div class="pin-tooltip">홍콩반점 ⭐ 4.5</div>
86+
</div>
87+
<div class="map-pin pin-3">
88+
<span class="pin-dot"></span>
89+
<div class="pin-tooltip">이태원갈비 ⭐ 4.9</div>
90+
</div>
91+
<div class="map-grid"></div>
92+
</div>
93+
</div>
94+
</div>
95+
</div>
96+
</section>
97+
98+
<!-- 수치 통계 섹션 -->
99+
<section class="about-stats">
100+
<div class="about-stats-inner">
101+
<div class="stat-item">
102+
<span class="stat-number">2,400<span class="stat-unit">+</span></span>
103+
<span class="stat-label">등록된 맛집</span>
104+
</div>
105+
<div class="stat-divider"></div> <!-- 수치 항목 사이 세로 구분선 -->
106+
<div class="stat-item">
107+
<span class="stat-number">18,000<span class="stat-unit">+</span></span>
108+
<span class="stat-label">누적 리뷰</span>
109+
</div>
110+
<div class="stat-divider"></div>
111+
<div class="stat-item">
112+
<span class="stat-number">4.8<span class="stat-unit">★</span></span>
113+
<span class="stat-label">평균 평점</span>
114+
</div>
115+
</div>
116+
</section>
117+
118+
<!-- 서비스 특징 카드 섹션 -->
119+
<section class="about-features">
120+
<div class="about-features-inner">
121+
<div class="features-header">
122+
<p class="features-eyebrow">WHY MATGIL</p>
123+
<h2 class="features-title">맛길만의 특징</h2>
124+
</div>
125+
<!-- 특징 카드 3개 (아이콘 + 제목 + 설명 구조) -->
126+
<div class="features-cards">
127+
<div class="feature-card">
128+
<div class="feature-icon">📍</div>
129+
<h3 class="feature-title">내 주변 맛집 탐색</h3>
130+
<p class="feature-desc">현재 위치를 기반으로 걸어서 갈 수 있는 맛집을 지도 위에서 바로 확인하세요.</p>
131+
</div>
132+
<div class="feature-card">
133+
<div class="feature-icon">💬</div>
134+
<h3 class="feature-title">솔직한 실사용자 리뷰</h3>
135+
<p class="feature-desc">광고 없이 실제 방문자가 남긴 리뷰만 모았습니다. 진짜 맛집을 찾는 가장 빠른 방법.</p>
136+
</div>
137+
<div class="feature-card">
138+
<div class="feature-icon">🗂️</div>
139+
<h3 class="feature-title">카테고리 & 필터</h3>
140+
<p class="feature-desc">한식, 양식, 카페 등 원하는 카테고리와 평점·거리 필터로 딱 맞는 곳만 골라보세요.</p>
141+
</div>
142+
</div>
143+
</div>
144+
</section>
145+
</main>
146+
147+
<footer class="site-footer">
148+
<div class="footer-inner">
149+
<div class="footer-top">
150+
<a href="index.html" class="footer-logo">맛길</a>
151+
<!-- 푸터 로고: 메인 페이지 링크 -->
152+
<nav class="footer-nav">
153+
<a href="about.html" class="footer-nav-link">소개</a>
154+
<!-- target="_blank": 새 탭에서 열기 -->
155+
<a href="https://github.com/eggtart-365" class="footer-nav-link" target="_blank">GitHub</a>
156+
</nav>
157+
</div>
158+
<div class="footer-bottom">
159+
<span class="footer-desc">컴퓨터소프트웨어공학과 26학번 김태현 웹프로그래밍 과제</span>
160+
<span class="footer-copy">&copy; 2026 맛길. All rights reserved.</span>
161+
</div>
162+
</div>
163+
</footer>
164+
</body>
165+
</html>

‎assets/img/waffle.jpg‎

2.87 MB
Loading

0 commit comments

Comments
 (0)