서비스 센터 페이지 레이아웃
다음은 DIV+CSS를 사용하여 서비스 센터 페이지를 구성하는 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>서비스 센터 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
height: 670px;
margin: 0 auto;
border: 2px solid #333;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
height: 100px;
text-align: center;
background-color: #e0ffff;
display: flex;
align-items: center;
justify-content: center;
}
.navigation {
width: 100%;
height: 60px;
text-align: center;
background-color: #ffb6c1;
display: flex;
align-items: center;
justify-content: center;
}
.content-area {
flex: 1;
display: flex;
}
.sidebar {
width: 200px;
height: 100%;
text-align: center;
background-color: #fffacd;
padding: 10px;
}
.main-content {
flex: 1;
height: 480px;
background-color: #90ee90;
padding: 15px;
display: flex;
flex-direction: column;
}
.data-table {
width: 100%;
margin-top: auto;
border-collapse: collapse;
}
.data-table td {
width: 33.33%;
height: 200px;
background-color: #f0f8ff;
padding: 10px;
}
.footer {
width: 100%;
height: 30px;
text-align: center;
background-color: #add8e6;
display: flex;
align-items: center;
justify-content: center;
}
</style>
</head>
<body>
<div class="container">
<div class="header">헤더 영역</div>
<div class="navigation">네비게이션 메뉴</div>
<div class="content-area">
<div class="sidebar">사이드바</div>
<div class="main-content">
<h3>자주 묻는 질문</h3>
<p>고객센터에 문의하시는 분들께서 자주 문의하시는 내용입니다.</p>
<table class="data-table">
<tr>
<td>내용 A</td>
<td>내용 B</td>
<td>내용 C</td>
</tr>
</table>
</div>
</div>
<div class="footer">푸터 영역</div>
</div>
</body>
</html>
암벽 등반 페이지 레이아웃
다음은 DIV+CSS를 사용하여 암벽 등반 관련 페이지를 구성하는 예제 코드입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>암벽 등반 레이아웃</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: '맑은 고딕', sans-serif;
}
.page-wrapper {
width: 100%;
display: flex;
flex-direction: column;
}
.top-bar {
height: 70px;
background-color: #d3d3d3;
display: flex;
align-items: center;
justify-content: center;
}
.central-container {
width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
}
.top-section {
display: flex;
height: 104px;
}
.logo-area {
width: 400px;
height: 100px;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: center;
background-color: #f5f5f5;
}
.menu-area {
width: 400px;
height: 100px;
border: 2px solid #333;
display: flex;
align-items: center;
justify-content: space-around;
background-color: #f0f0f0;
}
.divider {
width: 820px;
height: 30px;
background-color: #808080;
margin: 5px 0;
}
.content-section {
width: 820px;
height: 260px;
border: 2px solid #333;
padding: 15px;
background-color: #fafafa;
}
.dual-content {
display: flex;
width: 800px;
height: 304px;
}
.content-left, .content-right {
width: 400px;
height: 300px;
border: 2px solid #333;
padding: 15px;
background-color: #f5f5f5;
}
.bottom-divider {
width: 820px;
height: 30px;
border: 2px solid #333;
text-align: center;
line-height: 30px;
}
.footer {
height: 50px;
background-color: #d3d3d3;
display: flex;
align-items: center;
justify-content: center;
}
h2 {
color: #696969;
font-size: 24px;
margin-bottom: 10px;
}
p {
color: #333;
line-height: 1.6;
margin-bottom: 10px;
}
a {
color: #0066cc;
text-decoration: none;
}
</style>
</head>
<body>
<div class="page-wrapper">
<div class="top-bar">상단 바</div>
<div class="central-container">
<div class="top-section">
<div class="logo-area">
<h1>암벽 등반</h1>
</div>
<div class="menu-area">
<span>홈</span>
<span>소개</span>
<span>기술</span>
<span>장비</span>
</div>
</div>
<div class="divider"></div>
<div class="content-section">
<h2>손으로 하는 암벽 등반</h2>
<p>암벽 등반은 자연의 아름다움과 도전을 동시에 경험할 수 있는 활동입니다. 이는 단순한 스포츠를 넘어, 정신적 훈련과 자기 성취감을 느끼게 해주는 특별한 경험입니다.</p>
<p>암벽 등반은 전 세계적으로 인기 있는 활동이며, 다양한 기술과 장비가 개발되어 왔습니다. 이는 근력, 유연성, 균형감각을 향상시키는 데 효과적입니다.</p>
<a href="#">더 알아보기...</a>
</div>
<div class="divider"></div>
<div class="dual-content">
<div class="content-left">
<h2>기원</h2>
<p>암벽 등반은 18세기 유럽에서 시작되었으며, 20세기에 독립적인 스포츠로 발전했습니다. 초기에는 주로 알파인 등반의 일부로 취급되었지만, 점차 독립적인 활동으로 인정받게 되었습니다.</p>
<p>현대 암벽 등반은 크게 보호 장비를 사용하는 스포츠 클라이밍과 최소한의 장비만 사용하는 트래디셔널 클라이밍으로 나뉩니다.</p>
</div>
<div class="content-right">
<h2>특징</h2>
<p>암벽 등반은 다양한 높이와 각도의 암벽에서 연속적인 동작을 요구합니다. 이는 신체적, 정신적 능력을 동시에 발휘해야 하는 활동으로, 많은 사람들에게 큰 매력을 줍니다.</p>
<p>안전은 암벽 등반에서 가장 중요한 요소입니다. 올바른 기술과 장비 사용, 그리고 충분한 훈련이 필수적입니다.</p>
</div>
</div>
<div class="divider"></div>
<div class="bottom-divider">
&span>저소권자 © 2023</span>
</div>
</div>
<div class="footer">하단 바</div>
</div>
</body>
</html>
위 예제들은 DIV+CSS를 사용한 웹 페이지 레이아웃의 기본 구조를 보여줍니다. 첫 번째 예제는 서비스 센터 페이지를 위한 전형적인 레이아웃이며, 두 번째 예제는 콘텐츠 중심의 암벽 등반 페이지를 위한 레이아웃입니다. 각 예제에서는 flexbox와 전통적인 float 기법을 혼합하여 사용하였으며, 이는 현대 웹 디자인에서 흔히 사용되는 접근 방식입니다.