| ▶ HTML Examples |
| HTML Examples |
| HTML Quiz |
| HTML Exercises |
| HTML Website |
HTML Website
HTML Website: 간단한 웹사이트 레이아웃 템플릿
다음은 HTML만으로 간단한 웹사이트 레이아웃을 구축하는 예시입니다. 이 템플릿은 헤더, 내비게이션 바, 메인 콘텐츠, 사이드바, 푸터로 구성되어 있으며, 웹 페이지의 기본 구조를 설명하는 데 적합합니다. CSS와 함께 추가적인 스타일링을 적용하여 원하는 대로 웹사이트를 확장할 수 있습니다.
1. 전체 웹사이트 레이아웃
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Simple Website</title>
<style>
/* 전체 레이아웃 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
/* 헤더 스타일 */
header {
background-color: #333;
color: white;
padding: 15px 0;
text-align: center;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
/* 내비게이션 스타일 */
nav {
background-color: #444;
padding: 10px;
text-align: center;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
display: inline-block;
}
nav ul li {
display: inline;
margin: 0 15px;
}
nav ul li a {
color: white;
text-decoration: none;
font-size: 1.2em;
}
nav ul li a:hover {
color: #ddd;
}
/* 메인 콘텐츠 레이아웃 */
.container {
display: flex;
margin: 20px;
}
/* 메인 콘텐츠 스타일 */
main {
flex: 3;
background-color: white;
padding: 20px;
margin-right: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
main h2 {
margin-top: 0;
}
/* 사이드바 스타일 */
aside {
flex: 1;
background-color: #f9f9f9;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 푸터 스타일 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 10px 0;
position: relative;
bottom: 0;
width: 100%;
}
footer p {
margin: 0;
}
/* 반응형 미디어 쿼리 */
@media (max-width: 768px) {
.container {
flex-direction: column;
}
main {
margin-right: 0;
}
nav ul li {
display: block;
margin: 10px 0;
}
}
</style>
</head>
<body>
<!-- 헤더 -->
<header>
<h1>My Simple Website</h1>
</header>
<!-- 내비게이션 바 -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- 메인 콘텐츠 및 사이드바 -->
<div class="container">
<!-- 메인 콘텐츠 -->
<main>
<h2>Main Content</h2>
<p>이 웹사이트는 기본적인 HTML 레이아웃을 설명하는 예시입니다. 메인 콘텐츠 영역은 주로 텍스트와 이미지를 포함하며, 웹 페이지의 핵심 정보를 전달합니다.</p>
<p>HTML과 CSS를 활용해 다양한 레이아웃을 구성할 수 있으며, 이 예시는 웹사이트의 기본 구조를 구축하는 데 도움을 줄 수 있습니다.</p>
</main>
<!-- 사이드바 -->
<aside>
<h2>Sidebar</h2>
<p>사이드바에는 추가적인 링크, 광고, 또는 관련 콘텐츠가 포함될 수 있습니다.</p>
</aside>
</div>
<!-- 푸터 -->
<footer>
<p>© 2024 My Simple Website. All rights reserved.</p>
</footer>
</body>
</html>
2. 설명
이 예제는 간단한 웹사이트 레이아웃을 구현한 HTML 템플릿으로, 각 부분을 설명합니다:
- 헤더: 웹사이트의 제목이 포함된 상단 영역으로, 사이트의 로고나 타이틀을 표시하는 데 사용됩니다.
- 내비게이션 바: 사용자가 웹사이트의 다른 페이지로 쉽게 이동할 수 있도록 돕는 메뉴입니다. 메뉴 항목을 클릭하면 해당 페이지로 이동할 수 있습니다.
- 메인 콘텐츠: 웹사이트의 주요 내용이 표시되는 영역입니다. 텍스트, 이미지, 비디오 등 다양한 콘텐츠를 배치할 수 있습니다.
- 사이드바: 메인 콘텐츠 옆에 위치한 보조 영역으로, 추가 정보나 광고, 관련 링크를 표시할 수 있습니다.
- 푸터: 웹사이트 하단에 위치하며, 저작권 정보나 추가적인 링크를 포함할 수 있습니다.
3. 반응형 디자인
이 템플릿에는 반응형 디자인이 적용되어, 화면 크기가 768px 이하로 줄어들 때 레이아웃이 변경됩니다.
@media (max-width: 768px) {
.container {
flex-direction: column;
}
main {
margin-right: 0;
}
nav ul li {
display: block;
margin: 10px 0;
}
}
- 미디어 쿼리를 통해 화면 너비가 작아지면, 메인 콘텐츠와 사이드바가 세로로 쌓이게 됩니다.
- 내비게이션 메뉴 항목도 가로에서 세로로 변경됩니다.
4. 커스터마이징 방법
이 템플릿은 다양한 방법으로 수정할 수 있습니다:
-
색상 변경: 배경색, 텍스트 색상 등을 쉽게 변경할 수 있습니다. 예를 들어, 헤더의 배경색을 바꾸려면
header스타일에서background-color속성을 수정하세요.header { background-color: #ff6600; /* 오렌지색으로 변경 */ } -
폰트 변경:
font-family속성을 수정하여 글꼴을 변경할 수 있습니다.body { font-family: 'Helvetica', sans-serif; /* 폰트 변경 */ } -
레이아웃 조정:
flex속성을 사용하여 메인 콘텐츠와 사이드바의 너비를 조정할 수 있습니다. 예를 들어, 메인 콘텐츠의 비율을 늘리려면flex: 3값을 변경하세요.main { flex: 4; /* 메인 콘텐츠 영역을 더 넓게 */ } aside { flex: 1; /* 사이드바는 그대로 */ }
5. 다음 단계
이 기본 템플릿을 확장하여 다음과 같은 요소를 추가할 수 있습니다:
- 이미지 갤러리: HTML과 CSS Grid를 사용해 이미지 갤러리를 추가하세요.
- 폼: 사용자 입력을 받는 폼 요소를 추가하고 서버에 데이터를 전송하는 방식으로 확장할 수 있습니다.
- 슬라이드 쇼: JavaScript를 사용해 이미지 슬라이드 쇼를 추가하여 시각적인 요소를 강화할 수 있습니다.
요약
이 HTML 웹사이트 템플릿은 웹 개발 초보자에게 적합한 기본 웹사이트 구조를 보여줍니다. 헤더, 내비게이션 바, 메인 콘텐츠, 사이드바, 푸터로 구성된 기본 구조를 통해 다양한 콘텐츠를 배치할 수 있으며, 반응형 디자인을 통해 다양한 기기에서 적절히 표시될 수 있습니다. 이 템플릿을 기반으로 스타일과 레이아웃을 변경해 자신만의 웹사이트를 만들어보세요.