우한 여행 가이드 웹사이트는 지역의 관광 명소, 문화, 미식, 숙박 정보를 제공하는 정적 웹 프로젝트입니다. 본 가이드에서는 시맨틱 HTML5 구조와 현대적인 CSS3 레이아웃 기법을 사용하여 다중 페이지 관광 정보 포털을 구축하는 과정을 다룹니다.
기술 스택 및 아키텍처
- HTML5: 시맨틱 태그(
<header>,<main>,<section>)를 활용한 구조화 - CSS3: Flexbox 및 Grid를 활용한 레이아웃, CSS 변수를 이용한 테마 관리
- JavaScript: 이미지 슬라이더 및 DOM 인터랙션 구현
프로젝트 디렉토리 구조
/wuhan-travel-guide
├── index.html # 메인 페이지
├── /css
│ └── main.css # 전역 및 컴포넌트 스타일
├── /js
│ └── slider.js # 이미지 캐러셀 스크립트
└── /assets
└── /images # 정적 이미지 리소스HTML 구조 구현
기존의 div 중심 레이아웃에서 벗어나 검색 엔진 최적화(SEO)와 접근성을 고려한 시맨틱 태그를 적용했습니다.
<!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="css/main.css">
</head>
<body>
<div class="app-wrapper">
<header class="site-header">
<div class="header-inner">
<div class="logo">
<img src="assets/images/logo.png" alt="우한 여행 가이드 로고">
</div>
<nav class="main-navigation">
<a href="index.html">홈</a>
<a href="news.html">여행 소식</a>
<a href="attractions.html">관광 명소</a>
<a href="food.html">로컬 미식</a>
<a href="hotels.html">숙박 정보</a>
<a href="gallery.html">포토 갤러리</a>
</nav>
</div>
</header>
<main class="content-area">
<section class="hero-slider" id="heroSlider">
<!-- JavaScript를 통한 동적 이미지 렌더링 영역 -->
</section>
<section class="info-grid">
<div class="grid-item news-section">
<h2 class="section-title">최신 여행 소식</h2>
<ul class="article-list">
<li><a href="#">우한시 관광 표준화 추진 현황</a> <span>2023-10-28</span></li>
<li><a href="#">장강을 가로지르는 대관람차 프로젝트</a> <span>2023-10-28</span></li>
<li><a href="#">국제 관광 축제 주요 하이라이트</a> <span>2023-10-28</span></li>
</ul>
</div>
<div class="grid-item highlight-section">
<h2 class="section-title">추천 명소</h2>
<div class="highlight-card">
<img src="assets/images/yellow-crane-tower.jpg" alt="황학루">
<p>황학루는 우한시에 위치한 중국 강남 3대 명루 중 하나로, 장강과 한수가 만나는 웅장한 풍경을 한눈에 담을 수 있는 역사적인 랜드마크입니다.</p>
</div>
</div>
<div class="grid-item attractions-section">
<h2 class="section-title">명소 알림</h2>
<ul class="article-list">
<li><a href="#">동호 생태 관광 구역 개방</a> <span>2023-10-28</span></li>
<li><a href="#">후베이성 박물관 특별전 안내</a> <span>2023-10-28</span></li>
</ul>
</div>
</section>
<section class="gallery-section">
<h2 class="section-title">포토 갤러리</h2>
<div class="gallery-grid">
<figure><img src="assets/images/view_1.jpg" alt="황학루 야경"></figure>
<figure><img src="assets/images/view_2.jpg" alt="동호 풍경"></figure>
<figure><img src="assets/images/view_3.jpg" alt="후베이성 박물관"></figure>
<figure><img src="assets/images/view_4.jpg" alt="귀원사"></figure>
<figure><img src="assets/images/view_5.jpg" alt="장강 대교"></figure>
</div>
</section>
</main>
<footer class="site-footer">
<p>고객센터: 027-5555-5555 | 이메일: contact@wuhantravel.example.com</p>
<p>© 2023 우한 여행 가이드. All rights reserved.</p>
</footer>
</div>
<script src="js/slider.js"></script>
</body>
</html>CSS 스타일링
Float 기반의 오래된 레이아웃 방식 대신 CSS Grid와 Flexbox를 사용하여 코드의 가독성과 유지보수성을 높였습니다.
:root {
--primary-color: #0066cc;
--text-main: #333333;
--text-light: #666666;
--bg-light: #f9f9f9;
--border-color: #e0e0e0;
--max-width: 1200px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
font-size: 16px;
color: var(--text-main);
background-color: #ffffff;
line-height: 1.6;
}
a {
text-decoration: none;
color: inherit;
transition: color 0.3s ease;
}
a:hover {
color: var(--primary-color);
}
.app-wrapper {
max-width: var(--max-width);
margin: 0 auto;
background: #fff;
box-shadow: 0 0 20px rgba(0,0,0,0.05);
}
/* Header Styles */
.site-header {
background: linear-gradient(135deg, #004a99, var(--primary-color));
color: #fff;
}
.header-inner {
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 30px;
}
.logo img {
height: 40px;
filter: brightness(0) invert(1);
}
.main-navigation {
display: flex;
gap: 25px;
}
.main-navigation a {
color: #fff;
font-weight: 500;
padding: 5px 0;
border-bottom: 2px solid transparent;
}
.main-navigation a:hover {
border-bottom-color: #fff;
}
/* Hero Slider */
.hero-slider {
width: 100%;
height: 400px;
background: var(--bg-light) url('../assets/images/hero-bg.jpg') center/cover no-repeat;
position: relative;
}
/* Grid Layout */
.info-grid {
display: grid;
grid-template-columns: 1fr 1.5fr 1fr;
gap: 20px;
padding: 30px;
}
.grid-item {
background: #fff;
border: 1px solid var(--border-color);
border-radius: 8px;
padding: 20px;
}
.section-title {
font-size: 1.25rem;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid var(--primary-color);
color: var(--text-main);
}
.article-list {
list-style: none;
}
.article-list li {
display: flex;
justify-content: space-between;
padding: 10px 0;
border-bottom: 1px dashed var(--border-color);
font-size: 0.9rem;
}
.article-list li span {
color: var(--text-light);
font-size: 0.85rem;
}
.highlight-card {
display: flex;
gap: 15px;
}
.highlight-card img {
width: 150px;
height: 120px;
object-fit: cover;
border-radius: 4px;
}
.highlight-card p {
font-size: 0.95rem;
color: var(--text-light);
}
/* Gallery */
.gallery-section {
padding: 0 30px 30px;
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 15px;
margin-top: 20px;
}
.gallery-grid figure {
overflow: hidden;
border-radius: 8px;
aspect-ratio: 4/3;
}
.gallery-grid img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.gallery-grid figure:hover img {
transform: scale(1.1);
}
/* Footer */
.site-footer {
background: var(--bg-light);
text-align: center;
padding: 25px;
font-size: 0.875rem;
color: var(--text-light);
border-top: 1px solid var(--border-color);
}개발 주요 기술 및 최적화 방안
- 이미지 지연 로딩(Lazy Loading): JavaScript의
IntersectionObserverAPI를 활용하여 뷰포트에 진입할 때만 이미지를 로드하도록 처리하여 초기 페이지 렌더링 속도를 개선합니다. - 반응형 레이아웃 처리:
@media쿼리와 CSS Grid의auto-fit,minmax함수를 결합하여 다양한 해상도의 디바이스에서 갤러리 및 정보 그리드가 자연스럽게 재배열되도록 구현합니다. - CSS 변수 활용:
:root의사 클래스에 색상 및 간격 변수를 정의하여 테마 변경 시 일관성을 유지하고 코드 중복을 줄입니다.