본문으로 바로가기
검색
회원가입로그인

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는 페이지를 동적으로 만듭니다.

참고 자료