11장: 프로젝트 - 간단한 웹 페이지 만들기
이 장에서는 지금까지 배운 HTML, CSS, JavaScript를 사용하여 간단한 웹 페이지를 만들어보겠습니다. 이 프로젝트를 통해 실제 웹 페이지를 만드는 과정을 체험해보고, 배운 내용을 실습해보겠습니다.
11.1 프로젝트 개요
이번 프로젝트에서는 다음과 같은 요소를 포함한 간단한 웹 페이지를 만들 것입니다:
- 헤더
- 네비게이션 메뉴
- 주요 콘텐츠 영역
- 사이드바
- 푸터
11.2 프로젝트 구조
HTML 파일과 외부 CSS 파일, 외부 JavaScript 파일을 사용하여 웹 페이지를 구성할 것입니다.
11.3 HTML 파일 작성
먼저 HTML 파일을 작성하여 웹 페이지의 구조를 정의합니다.
**index.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="style.css">
<script src="script.js" defer></script>
</head>
<body>
<header>
<h1>내 웹 페이지</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<main>
<section id="home">
<h2>홈</h2>
<p>여기는 홈 페이지입니다.</p>
</section>
<section id="about">
<h2>소개</h2>
<p>이 웹 페이지는 HTML, CSS, JavaScript를 사용하여 만들었습니다.</p>
</section>
</main>
<aside>
<h2>사이드바</h2>
<p>여기는 사이드바입니다.</p>
</aside>
<footer>
<p>© 2024 내 웹 페이지. 모든 권리 보유.</p>
</footer>
</body>
</html>
11.4 CSS 파일 작성
다음으로, 외부 CSS 파일을 작성하여 웹 페이지의 스타일을 정의합니다.
**style.css**
/* 기본 스타일 */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 헤더 스타일 */
header {
background-color: #4CAF50;
color: white;
padding: 1em;
text-align: center;
}
nav ul {
list-style-type: none;
padding: 0;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
/* 메인 콘텐츠 스타일 */
main {
padding: 1em;
}
/* 사이드바 스타일 */
aside {
background-color: #f4f4f4;
padding: 1em;
margin-top: 1em;
}
/* 푸터 스타일 */
footer {
background-color: #333;
color: white;
text-align: center;
padding: 1em;
position: absolute;
bottom: 0;
width: 100%;
}
11.5 JavaScript 파일 작성
마지막으로, 외부 JavaScript 파일을 작성하여 웹 페이지에 동적인 기능을 추가합니다.
**script.js**
document.addEventListener('DOMContentLoaded', function() {
// 페이지 로드 시 실행할 코드
console.log('웹 페이지가 로드되었습니다.');
});
11.6 프로젝트 실행
1. `index.html`, `style.css`, `script.js` 파일을 같은 폴더에 저장합니다.
2. `index.html` 파일을 브라우저에서 열어 웹 페이지를 확인합니다.
11.7 연습 문제
1. HTML 파일에 새로운 섹션을 추가하고, CSS를 사용하여 스타일을 적용해 보세요.
2. JavaScript를 사용하여 버튼 클릭 시 경고 메시지를 표시하는 기능을 추가해 보세요.
3. 네비게이션 메뉴의 링크를 클릭하면 해당 섹션으로 스크롤되는 기능을 추가해 보세요.
댓글
댓글 쓰기