웹사이트 주제
개인 포트폴리오 웹사이트, 이력서 제작, 정적 HTML 개인 웹페이지, 인물 소개 템플릿 등의 디자인과 구현
웹사이트 요구사항
- 페이지 구조: 헤더, 네비게이션 바(드롭다운 지원), 콘텐츠 영역, 푸터로 구성
- 페이지 간 연결: 5-10개 페이지로 구성, 3단계 깊이의 내부 링크 지원
- 디자인 일관성: Div+CSS 기반 레이아웃, 전체적인 스타일 통일
- 네비게이션: 시각적으로 구분되는 메뉴, 2단계 하위 메뉴 기능 구현
- 동적 효과: 자동/수동 이미지 캐러셀, CSS/JS 애니메이션 적용
- 미디어 요소: GIF, 비디오, 오디오 삽입, 폼 요소 활용
- 디자인 원칙: 독창적이고 심미적인 인터페이스, 색상 및 레이아웃 조화
기술 구현 전략
레이아웃
주요 브라우저 호환성 보장, 안정적인 표시를 위한 플렉스박스 기반 반응형 디자인
개발 언어
HTML5, CSS3, JavaScript를 활용한 프론트엔드 구현, 크로스 브라우징 지원
파일 구조
📁 프로젝트_폴더/
├── 📄 index.html # 메인 페이지
├── 📁 pages/ # 서브 페이지
├── 📁 css/ # 스타일시트
├── 📁 js/ # 자바스크립트
└── 📁 images/ # 이미지 리소스HTML 구조 예시
<!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/styles.css">
</head>
<body>
<header class="main-header">
<div class="logo-section">
<img src="images/logo_left.png" alt="좌측 로고">
</div>
<div class="title-section">
<h1>세상을 함께 빛내는 아티스트</h1>
</div>
<div class="logo-section">
<img src="images/logo_right.png" alt="우측 로고">
</div>
</header>
<nav class="navigation">
<a href="index.html">홈</a>
<a href="works.html">작품</a>
<a href="activities.html">활동</a>
<a href="discography.html">음반</a>
</nav>
<div class="animation-area">
<div class="animated-text">공식 팬페이지에 오신 것을 환영합니다</div>
</div>
<main class="content-container">
<aside class="sidebar">
<h3>대표 작품</h3>
<ul>
<li>기적의 빛</li>
<li>미래의 문</li>
<li>별을 쫓는 꿈</li>
<li>내면의 불꽃</li>
</ul>
</aside>
<section class="main-content">
<div class="featured-image">
<img src="images/featured.jpg" alt="주요 활동 사진">
</div>
<article class="profile-info">
<h3>아티스트 프로필</h3>
<p>중국 후난성 출신의 배우이자 가수. 중앙희극학원 재학 중이며, 다양한 영화와 음반으로 활동 중입니다. 댄스와 연기 분야에서 두각을 나타내며 대중문화에 기여하고 있습니다.</p>
</article>
</section>
<aside class="promotion">
<img src="images/promo.png" alt="신규 앨범 프로모션">
</aside>
</main>
</body>
</html>CSS 스타일 예시
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f0f0f0;
font-family: 'Segoe UI', Tahoma, sans-serif;
}
.main-header {
display: flex;
height: 180px;
background: linear-gradient(90deg, #1a2a6c, #b21f1f, #1a2a6c);
}
.logo-section {
flex: 1;
padding: 10px;
}
.title-section {
flex: 3;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2.2rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.navigation {
display: flex;
background-color: #2c3e50;
}
.navigation a {
flex: 1;
padding: 15px 0;
text-align: center;
color: white;
text-decoration: none;
transition: background 0.3s;
}
.navigation a:hover {
background-color: #3498db;
}
.animation-area {
padding: 15px 0;
background-color: #e74c3c;
overflow: hidden;
}
.animated-text {
position: relative;
white-space: nowrap;
animation: textScroll 25s linear infinite;
color: white;
font-weight: bold;
}
@keyframes textScroll {
0% { left: 100%; }
100% { left: -100%; }
}
.content-container {
display: flex;
padding: 20px;
gap: 20px;
}
.sidebar {
flex: 1;
background-color: #3498db;
padding: 15px;
border-radius: 8px;
color: white;
}
.sidebar h3 {
margin-bottom: 15px;
text-align: center;
}
.sidebar ul li {
padding: 8px 0;
border-bottom: 1px dashed rgba(255,255,255,0.3);
}
.main-content {
flex: 3;
display: flex;
flex-direction: column;
gap: 20px;
}
.featured-image img {
width: 100%;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.profile-info {
background-color: white;
padding: 20px;
border-radius: 8px;
line-height: 1.6;
}
.promotion {
flex: 1;
}
.promotion img {
width: 100%;
border-radius: 8px;
}