8장: HTML, CSS, 및 JavaScript 통합 - 간단한 웹 프로젝트 구축
웹 개발에서 HTML, CSS, 그리고 JavaScript는 필수적으로 함께 작용합니다. 이 장에서는 이 세 기술을 하나로 통합하여 간단한 웹 프로젝트를 구현하는 방법에 대해 알아보겠습니다.
HTML로 구조 만들기
HTML은 웹 페이지의 기본 골격을 제공합니다. 예를 들어, 다음과 같은 기본 HTML 코드로 시작할 수 있습니다:
<!DOCTYPE html>
<html>
<head>
<title>내 간단한 웹 프로젝트</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 id="title">웹 개발 베이스캠프</h1>
<p>HTML, CSS, JavaScript를 배우는 입문 가이드</p>
<button id="button">클릭하세요</button>
</body>
</html>이 코드에서 제목, 텍스트 콘텐츠, 버튼을 포함하는 페이지 구조를 만들었습니다.
CSS로 스타일 추가하기
이제 styles.css 파일을 사용하여 웹 페이지에 디자인을 입힐 수 있습니다:
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
text-align: center;
}
h1 {
color: #4682b4;
}
button {
padding: 10px 20px;
background-color: #87cefa;
border: none;
border-radius: 5px;
}
button:hover {
background-color: #5f9ea0;
cursor: pointer;
}이 코드는 버튼에 마우스를 올렸을 때 색상이 변화하는 효과를 포함하여 디자인 요소를 추가합니다.
JavaScript로 동작 구현하기
JavaScript를 사용하여 버튼을 클릭했을 때 텍스트가 변경되도록 설정합니다. script.js 파일로 이 작업을 수행할 수 있습니다:
document.getElementById("button").addEventListener("click", function() {
document.getElementById("title").textContent = "배우는 즐거움!";
});여기서 JavaScript는 이벤트를 처리하고 페이지의 콘텐츠를 동적으로 변경합니다.
세 기술의 조화
위 세 파일을 결합하면 여러분은 첫 번째 통합 웹 프로젝트를 완성할 수 있습니다. HTML은 구조를 제공하고, CSS는 스타일을 적용하며, JavaScript는 페이지를 동적으로 만듭니다.