코딩 배우기: 60세 컴퓨터 초보자를 위한 쉬운 가이드 - 다섯 번째 날
HTML, CSS, JavaScript를 이용한 간단한 웹 프로젝트 만들기
다섯 번째 날에는 지금까지 배운 HTML, CSS, JavaScript를 종합하여 간단한 웹 프로젝트를 만들어 보겠습니다. 이번 프로젝트에서는 개인 정보를 입력하고, 버튼을 클릭하면 입력된 정보가 표시되는 웹 페이지를 제작합니다. 이 과정을 통해 웹 개발의 기본적인 흐름을 익히고, 실제로 웹 페이지를 만드는 경험을 쌓을 수 있습니다.
프로젝트 개요
목표
사용자가 자신의 이름과 나이를 입력하고 "제출" 버튼을 클릭하면, 입력된 정보가 화면에 표시되는 간단한 웹 페이지를 만듭니다.
필요한 기술
HTML: 페이지 구조
CSS: 페이지 스타일링
JavaScript: 사용자 입력 처리 및 동적 화면 업데이트
HTML 작성
먼저, HTML로 기본 페이지 구조를 만듭니다. 입력 필드와 버튼을 포함한 간단한 폼을 작성합니다.
<!DOCTYPE html>
<html>
<head>
<title>다섯 번째 날 학습</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>개인 정보 입력</h1>
<form id="userForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age" required><br>
<button type="button" onclick="submitForm()">제출</button>
</form>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
위의 코드는 이름과 나이를 입력할 수 있는 필드, 그리고 제출 버튼을 포함하는 폼을 정의합니다. <div id="output"> 요소는 나중에 JavaScript로 입력된 정보를 표시하기 위해 사용됩니다.
CSS 작성
다음으로, CSS를 사용하여 페이지를 스타일링합니다. 폼과 결과 출력 부분을 보기 좋게 꾸며줍니다.
/* styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
h1 {
color: #4682b4;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #4682b4;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #5a9bd3;
}
#output {
margin-top: 20px;
padding: 10px;
background-color: #e6f7ff;
border: 1px solid #b3d8ff;
}
이 스타일시트는 페이지 배경, 폼 요소의 레이아웃, 버튼 스타일 등을 정의하여 전체적인 페이지 디자인을 개선합니다.
JavaScript 작성
마지막으로, JavaScript를 사용하여 폼 입력 데이터를 처리하고, 결과를 출력합니다.
// script.js
function submitForm() {
let name = document.getElementById('name').value;
let age = document.getElementById('age').value;
let outputDiv = document.getElementById('output');
if(name && age) {
outputDiv.innerHTML = `<p>이름: ${name}</p><p>나이: ${age}</p>`;
} else {
outputDiv.innerHTML = '<p>모든 필드를 입력해주세요.</p>';
}
}
submitForm 함수는 사용자가 폼에 입력한 데이터를 읽어와서, output 요소에 표시합니다. 이름과 나이를 모두 입력했는지 확인하고, 입력이 없을 경우 경고 메시지를 표시합니다.
전체 프로젝트 통합
이제 작성한 HTML, CSS, JavaScript 파일을 통합하여 완성된 웹 페이지를 확인합니다.
HTML 파일 (index.html):
<!DOCTYPE html>
<html>
<head>
<title>다섯 번째 날 학습</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>개인 정보 입력</h1>
<form id="userForm">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required><br>
<label for="age">나이:</label>
<input type="number" id="age" name="age" required><br>
<button type="button" onclick="submitForm()">제출</button>
</form>
<div id="output"></div>
<script src="script.js"></script>
</body>
</html>
CSS 파일 (styles.css):
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
margin: 0;
padding: 20px;
}
h1 {
color: #4682b4;
}
form {
margin-bottom: 20px;
}
label {
display: block;
margin-top: 10px;
font-weight: bold;
}
input {
width: 100%;
padding: 8px;
margin-top: 5px;
box-sizing: border-box;
}
button {
margin-top: 15px;
padding: 10px 20px;
background-color: #4682b4;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #5a9bd3;
}
#output {
margin-top: 20px;
padding: 10px;
background-color: #e6f7ff;
border: 1px solid #b3d8ff;
}
JavaScript 파일 (script.js):
function submitForm() {
let name = document.getElementById('name').value;
let age = document.getElementById('age').value;
let outputDiv = document.getElementById('output');
if(name && age) {
outputDiv.innerHTML = `<p>이름: ${name}</p><p>나이: ${age}</p>`;
} else {
outputDiv.innerHTML = '<p>모든 필드를 입력해주세요.</p>';
}
}
실행 및 테스트
이제 위의 파일들을 모두 준비했으면, 브라우저에서 index.html 파일을 열어 프로젝트가 제대로 작동하는지 확인합니다. 이름과 나이를 입력하고 제출 버튼을 클릭하면 입력한 정보가 화면에 표시되는 것을 확인할 수 있습니다.
학습 팁
작게 시작하고 확장하기: 처음에는 간단한 프로젝트로 시작하여 점차 복잡한 기능을 추가해 나가세요.
온라인 자료 활용: 필요할 때마다 MDN Web Docs와 W3Schools 같은 온라인 자료를 참고하세요.
반복 연습: 실제로 코드를 작성하고 실행해 보는 연습을 많이 해보세요.
MDN Web Docs: 웹 기술에 대한 자세한 문서와 예제를 제공합니다.
W3Schools: HTML, CSS, JavaScript를 단계별로 배울 수 있는 온라인 학습 사이트입니다.
다섯 번째 날에는 HTML, CSS, JavaScript를 종합하여 간단한 웹 프로젝트를 완성했습니다. 이번 프로젝트를 통해 웹 개발의 기본적인 흐름을 이해하고, 실제로 웹 페이지를 만드는 경험을 할 수 있었습니다. 앞으로도 계속해서 다양한 프로젝트를 시도하며 웹 개발 실력을 향상시켜 보세요. 다음 날에는 조금 더 복잡한 기능을 추가하여 프로젝트를 확장해 보겠습니다. 계속해서 흥미를 가지고 학습을 이어나가세요!