💡 HTML과 JavaScript의 협업 구조 — 브라우저 속 대화의 원리

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

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

📘 오늘의 핵심 개념:
HTML = 구조(structure)
CSS = 디자인(style)
JavaScript = 행동(action)

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>

💻 결과 미리보기

Hello, Corer!

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>

💪 미션:
이름을 입력하면 “안녕, OOO님!”이 나오도록 만들어보세요.
추가로, 입력이 없으면 “이름을 입력해주세요” 문구를 띄워보세요!

❓ Q&A 코너

Q1. HTML 안에 JS를 써도 되나요?
👉 네! 하지만 규모가 커지면 별도 파일로 분리하는 게 좋아요 (script.js).

Q2. JS가 HTML보다 늦게 로드되면요?
👉 해결법: defer 속성 사용 or window.onload 안에서 실행.

Q3. 버튼을 여러 개 쓰려면?
👉 querySelectorAll로 묶어서 반복문으로 이벤트를 달면 됩니다.

📘 다음 단계 예고

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

#코러 #코딩입문 #HTML #JavaScript #코딩스타랩 #웹개발 #브라우저이벤트 #프로그래밍 #코딩협업 #초등코딩

Coding Star Lab

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