HTML5 프로젝트 실습(Hands-On HTML5 Projects)
HTML5 포트폴리오 사이트 제작(Building an HTML5 Portfolio Site)
HTML5를 사용하여 개인 포트폴리오 사이트를 제작하는 것은 웹 개발 기술을 보여줄 수 있는 훌륭한 방법입니다. 이 프로젝트는 HTML5, CSS, JavaScript를 사용하여 개인 정보를 소개하고, 프로젝트와 작업 경험을 전시하는 사이트를 만드는 과정입니다.
기본 구조
<!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="styles.css">
</head>
<body>
<header>
<h1>홍길동 포트폴리오</h1>
<nav>
<a href="#about">소개</a>
<a href="#projects">프로젝트</a>
<a href="#contact">연락처</a>
</nav>
</header>
<section id="about">
<h2>소개</h2>
<p>웹 개발자 홍길동입니다. 프론트엔드와 백엔드 개발에 능숙합니다.</p>
</section>
<section id="projects">
<h2>프로젝트</h2>
<div class="project">
<h3>프로젝트 1</h3>
<p>설명...</p>
</div>
<div class="project">
<h3>프로젝트 2</h3>
<p>설명...</p>
</div>
</section>
<section id="contact">
<h2>연락처</h2>
<form action="submit-form.php" method="post">
<label for="name">이름:</label>
<input type="text" id="name" name="name" required>
<label for="email">이메일:</label>
<input type="email" id="email" name="email" required>
<label for="message">메시지:</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">보내기</button>
</form>
</section>
<footer>
<p>© 2024 홍길동</p>
</footer>
</body>
</html>
스타일링 예제
/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 1em;
text-align: center;
}
nav a {
color: #fff;
margin: 0 1em;
text-decoration: none;
}
section {
padding: 2em;
}
.project {
border-bottom: 1px solid #ddd;
padding: 1em 0;
}
form {
display: flex;
flex-direction: column;
}
form label, form input, form textarea, form button {
margin-bottom: 0.5em;
}
HTML5 게임 개발(Developing an HTML5 Game)
HTML5와 JavaScript를 사용하여 간단한 게임을 개발할 수 있습니다. 여기서는 간단한 점프 게임을 만들어 보겠습니다.
HTML5 캔버스 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>점프 게임</title>
<style>
canvas {
display: block;
margin: 0 auto;
background-color: #f0f0f0;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
게임 로직 구현
// game.js
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let player = {
x: 50,
y: 300,
width: 50,
height: 50,
dy: 0,
gravity: 1.5,
jumpPower: -20
};
function drawPlayer() {
ctx.fillStyle = 'blue';
ctx.fillRect(player.x, player.y, player.width, player.height);
}
function updatePlayer() {
player.y += player.dy;
player.dy += player.gravity;
if (player.y + player.height > canvas.height) {
player.y = canvas.height - player.height;
player.dy = 0;
}
}
function jump() {
if (player.y + player.height === canvas.height) {
player.dy = player.jumpPower;
}
}
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
jump();
}
});
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
updatePlayer();
requestAnimationFrame(gameLoop);
}
gameLoop();
HTML5 기반의 인터랙티브 데이터 시각화(Interactive Data Visualization with HTML5)
데이터 시각화는 HTML5의 캔버스 요소와 JavaScript 라이브러리를 사용하여 인터랙티브한 차트를 생성할 수 있습니다. 여기서는 Chart.js 라이브러리를 사용한 예제를 보여줍니다.
HTML 설정
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>데이터 시각화</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
<canvas id="myChart" width="400" height="200"></canvas>
<script src="chart.js"></script>
</body>
</html>
Chart.js를 사용한 데이터 시각화
// chart.js
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
'rgba(255, 99, 132, 0.2)',
'rgba(54, 162, 235, 0.2)',
'rgba(255, 206, 86, 0.2)',
'rgba(75, 192, 192, 0.2)',
'rgba(153, 102, 255, 0.2)',
'rgba(255, 159, 64, 0.2)'
],
borderColor: [
'rgba(255, 99, 132, 1)',
'rgba(54, 162, 235, 1)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
HTML5 웹 애플리케이션 개발(Developing an HTML5 Web Application)
HTML5를 사용하여 간단한 웹 애플리케이션을 개발하는 것은 웹 개발 기술을 향상시키는 좋은 방법입니다. 여기서는 할 일 목록(Todo List) 애플리케이션을 만드는 예제를 소개합니다.
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="styles.css">
</head>
<body>
<h1>할 일 목록</h1>
<form id="todoForm">
<input type="text" id="todoInput" placeholder="할 일을 입력하세요" required>
<button type="submit">추가</button>
</form>
<ul id="todoList"></ul>
<script src="app.js"></script>
</body>
</html>
JavaScript를 사용한 기능 구현
// app.js
document.getElementById('todoForm').addEventListener('submit', function(e) {
e.preventDefault();
const todoInput = document.getElementById('todoInput');
addTodoItem(todoInput.value);
todoInput.value = '';
});
function addTodoItem(todoText) {
const todoList = document.getElementById('todoList');
const li = document.createElement('li');
li.textContent = todoText;
todoList.appendChild(li
);
li.addEventListener('click', function() {
li.remove();
});
}
스타일링 예제
/* styles.css */
body {
font-family: Arial, sans-serif;
padding: 2em;
background-color: #f9f9f9;
}
h1 {
text-align: center;
}
form {
display: flex;
justify-content: center;
margin-bottom: 1em;
}
form input, form button {
padding: 0.5em;
margin-right: 0.5em;
}
ul {
list-style: none;
padding: 0;
}
li {
padding: 0.5em;
background-color: #fff;
margin-bottom: 0.5em;
border: 1px solid #ddd;
cursor: pointer;
}
이와 같은 다양한 HTML5 프로젝트 실습을 통해 HTML5의 다양한 기능을 익히고, 실제 웹 애플리케이션 개발에 필요한 기술을 습득할 수 있습니다.