웹사이트를 구성하는 핵심 기술은 크게 세 가지입니다.
바로 HTML, CSS, 그리고 JavaScript입니다.
이 중 HTML은 구조를 만들고, CSS는 디자인을 담당하며, JavaScript는 웹페이지에 동작과 인터랙션을 추가하는 역할을 합니다.
특히 HTML과 JavaScript의 관계를 이해하는 것은 웹 개발을 시작하는 데 매우 중요합니다.
HTML만으로는 정적인 페이지밖에 만들 수 없지만, JavaScript를 함께 사용하면 버튼 클릭, 데이터 처리, 화면 변경과 같은 다양한 기능을 구현할 수 있습니다.
이번 글에서는 HTML과 JavaScript의 관계, 각각의 역할, 그리고 실제 코드 예시를 통해 어떻게 함께 동작하는지를 쉽게 정리해보겠습니다.
HTML과 JavaScript의 기본 개념
HTML의 역할
HTML은 웹페이지의 구조와 콘텐츠를 정의하는 언어입니다. 제목, 문단, 이미지, 버튼 등 화면에 표시되는 요소를 구성합니다.
<button>클릭</button>
위 코드에서는 버튼이 화면에 표시되지만, 클릭해도 아무 동작도 하지 않습니다.
JavaScript의 역할
JavaScript는 웹페이지에 동적인 기능을 추가하는 프로그래밍 언어입니다.
사용자 행동에 반응하거나 데이터를 처리하는 역할을 합니다.
document.querySelector("button").addEventListener("click", function() {
alert("버튼이 클릭되었습니다");
});
이 코드를 추가하면 버튼을 클릭했을 때 알림창이 나타나는 기능이 실행됩니다.
HTML과 JavaScript의 관계
HTML과 JavaScript의 관계를 한 문장으로 정리하면 다음과 같습니다.
HTML은 구조를 만들고, JavaScript는 그 구조를 조작한다.
즉, HTML은 웹페이지의 뼈대를 만들고 JavaScript는 그 뼈대를 움직이거나 변경하는 역할을 합니다.
DOM(Document Object Model) 이해하기
JavaScript는 HTML 요소를 직접 다루기 위해 DOM(Document Object Model)을 사용합니다.
DOM은 HTML 문서를 객체 형태로 변환한 구조입니다.
JavaScript는 이 DOM을 통해 HTML 요소를 선택하고 수정할 수 있습니다.
const title = document.querySelector("h1");
title.textContent = "내용 변경";
위 코드는 HTML의 h1 태그 내용을 JavaScript를 통해 변경하는 예시입니다.
HTML과 JavaScript를 연결하는 방법
script 태그 사용
JavaScript는 HTML 문서 안에서 script 태그를 사용하여 연결할 수 있습니다.
<script>
alert("페이지가 로드되었습니다");
</script>
이 코드는 페이지가 로드될 때 실행됩니다.
외부 JavaScript 파일 연결
실무에서는 JavaScript를 별도의 파일로 분리하여 사용하는 경우가 많습니다.
<script src="script.js"></script>
이 방식은 코드 관리와 유지보수에 유리합니다.
JavaScript로 HTML을 제어하는 방법
이벤트 처리
JavaScript는 사용자 행동에 반응할 수 있습니다.
대표적인 예가 클릭 이벤트입니다.
<button id="btn">클릭</button>
<script>
document.getElementById("btn").onclick = function() {
alert("클릭됨");
};
</script>
이처럼 JavaScript를 사용하면 HTML 요소에 동작을 추가할 수 있습니다.
스타일 변경
JavaScript는 HTML 요소의 스타일도 변경할 수 있습니다.
const box = document.querySelector(".box");
box.style.backgroundColor = "red";
이 코드는 특정 요소의 배경색을 변경합니다.
HTML과 JavaScript를 함께 사용하는 이유
HTML만으로는 정적인 페이지밖에 만들 수 없습니다. 하지만 JavaScript를 함께 사용하면 다음과 같은 기능을 구현할 수 있습니다.
- 버튼 클릭 이벤트 처리
- 데이터 입력 검증
- 화면 내용 동적 변경
- API 데이터 불러오기
- 애니메이션 효과
즉, JavaScript는 웹페이지를 인터랙티브하게 만드는 핵심 요소입니다.
비유로 이해하는 HTML과 JavaScript
HTML과 JavaScript의 관계는 다음과 같이 비유할 수 있습니다.
- HTML : 자동차의 구조 (차체, 바퀴)
- JavaScript : 자동차의 엔진 (움직임, 동작)
자동차 구조만으로는 움직일 수 없고, 엔진만으로도 자동차가 존재할 수 없습니다. 두 요소가 함께 있어야 제대로 작동합니다.
마무리
HTML과 JavaScript는 웹 개발에서 서로 다른 역할을 담당하지만 반드시 함께 사용되어야 하는 기술입니다.
정리하면 다음과 같습니다.
- HTML은 웹페이지의 구조를 만든다
- JavaScript는 웹페이지에 동작을 추가한다
- DOM을 통해 HTML 요소를 제어한다
웹 개발을 처음 시작하는 분이라면 HTML과 JavaScript의 관계를 정확히 이해하는 것이 매우 중요합니다. 이 개념을 기반으로 학습하면 더 복잡한 웹 기능도 쉽게 이해할 수 있습니다.