안녕하세요! 가족과 함께하는 스마트 라이프입니다. 지난 시간에는 alert() 주문으로 자바스크립트 마법사와 첫 인사를 나누었죠? 오늘은 웹사이트의 옷(디자인)을 실시간으로 갈아입히는 ‘스타일 변신 마법’을 배워보겠습니다. 클릭 한 번에 배경색이 바뀌는 신기한 연금술의 세계로 떠나볼까요?
1. 마법의 타겟팅: document.getElementById
마법을 부리려면 먼저 어떤 물건을 바꿀지 정확히 지목해야 해요. 수많은 HTML 태그 중에서 우리가 원하는 보석만 쏙 골라내는 주문이 바로 document.getElementById입니다. 태그에 붙여준 ‘아이디(ID)’라는 이름표를 보고 찾아가는 것이죠.
2. 색깔을 바꾸는 변신 주문
자바스크립트 지팡이로 특정 상자를 지목한 뒤, .style이라는 속성을 건드리면 색깔이나 크기를 마음대로 바꿀 수 있어요. 아래 코드를 우리 마법 책에 적어봅시다.
[Image showing a girl wizard pointing a wand at a white box, and the box instantly turning into a vibrant rainbow color pattern]
<!DOCTYPE html>
<html>
<body>
<div id="magic_box" style="width:200px; height:200px; background:grey;">
무채색 상자
</div>
<button onclick="change_color()">색깔 변신!</button>
<script>
function change_color() {
// 1. 'magic_box'라는 이름표를 가진 상자를 찾아요
var box = document.getElementById("magic_box");
// 2. 상자의 배경색을 예쁜 보라색으로 바꿔요!
box.style.background = "mediumpurple";
box.style.borderRadius = "50%"; // 네모를 동그라미로!
box.innerHTML = "마법 성공!";
}
</script>
</body>
</html>3. 왜 ‘새로고침’ 없이 바뀔까요?
PHP 마법은 창고에 가서 물건을 새로 가져와야 해서 화면이 한 번 깜빡(새로고침)거려야 했어요. 하지만 자바스크립트 연금술은 이미 우리 앞에 놓인 물건을 즉석에서 변하게 하기 때문에 깜빡임 없이 마법처럼 결과가 나타난답니다. 이게 바로 자바스크립트가 가진 ‘실시간 마법’의 힘이에요!
4. 아이들과 함께하는 ‘카멜레온’ 놀이
아이와 함께 ‘색깔 이름 맞추기’ 게임을 해보세요. “아빠가 ‘빨강’이라고 외치면, 너는 빨간색 물건을 터치해줘!”라고 규칙을 정하는 거죠. 여기서 아빠의 외침은 [이벤트]이고, 아이의 행동은 자바스크립트의 [함수 실행]과 같아요. 이렇게 놀다 보면 자연스럽게 이벤트 기반 프로그래밍의 원리를 깨닫게 됩니다.
마치며: 이제 당신은 웹사이트 디자이너!
클릭 한 번으로 모양과 색깔을 바꾸는 법을 배웠으니, 여러분은 이제 훌륭한 연금술사가 된 것입니다. 다음 시간에는 사용자가 입력한 글자를 화면에 멋지게 띄워주는 ‘글자 낚시 마법’을 배워볼게요. 점점 더 재미있어지는 자바스크립트 학교, 다음 시간도 기대해 주세요!
