💡 HTML과 JavaScript의 협업 구조 — 브라우저 속 대화의 원리 | 코딩스타랩 Part 7

안녕하세요 코러입니다 😊
오늘은 웹 코딩의 진짜 시작점! HTML과 JavaScript가 ‘어떻게 대화하며 움직이는지’ 배워봅니다.
HTML은 눈(화면), JavaScript는 두뇌(행동). 두 언어가 만나야 ‘살아 있는 페이지’가 만들어져요.

1️⃣ HTML이 하는 일 — ‘무대’ 만들기

<div id="box">Hello, Corer!</div>
<button id="btn">클릭하면 색 바뀜</button>
<script src="script.js"></script>

HTML은 배우들이 설 무대를 만들어요. 그리고 버튼, 텍스트, 입력창처럼 ‘역할’을 부여하죠. 하지만 스스로 움직이진 못합니다.

2️⃣ JavaScript가 하는 일 — ‘움직임’ 만들기

<script>
const box = document.getElementById("box");
const btn = document.getElementById("btn");

btn.addEventListener("click", () => {
  box.style.color = "#1a73e8";
  box.style.fontSize = "24px";
  box.innerText = "클릭 성공!";
});
</script>

JavaScript는 HTML 요소를 찾아(getElementById) 이벤트를 붙이고(addEventListener) 속성을 바꾸며 ‘대화’를 시작합니다.

3️⃣ HTML ↔ JS 연결의 구조 (DOM)

HTML 페이지의 구조는 트리(Tree)처럼 생겼어요.
JavaScript는 그 나무 위를 자유롭게 움직이며 가지를 바꾸죠.

document.body      // 전체 문서
document.getElementById("btn") // 특정 버튼
document.querySelector(".menu") // 클래스 선택

이런 걸 DOM(Document Object Model)이라고 부르고, HTML과 JS의 협업은 바로 이 DOM 위에서 일어납니다.

4️⃣ 입력 → 처리 → 출력 (데이터 흐름)

<input id="name" placeholder="이름 입력">
<button id="hello">인사하기</button>
<div id="result"></div>

<script>
hello.onclick = function(){
  const name = document.getElementById("name").value;
  document.getElementById("result").innerText = `안녕, ${name}!`;
}
</script>

📘 다음 단계 예고

Part 8에서는 “이벤트 루프와 반응형 인터랙션”으로 넘어가요.
브라우저가 클릭, 키보드, 애니메이션을 어떻게 동시에 처리하는지 게임 개발자처럼 깊게 파헤쳐봅시다!