---
theme: default
layout: center
class: text-center
---

# 🌐 자바스크립트(JS) 실전 코딩
38개 핵심 예제로 배우는 동적 웹 개발

---
layout: default
---

## 📋 학습 목차 (1/2)

<div class="grid grid-cols-2 gap-4 text-[13px] mt-4">
  <div class="space-y-1">
    <p>1. getElementById 기초</p>
    <p>2. 요소 조회 (QuerySelector)</p>
    <p>3. 변수 선언 (let, const)</p>
    <p>4. 사칙연산</p>
    <p>5. 연산자 종류</p>
    <p>6. Onclick 이벤트</p>
    <p>7. Input 값 가져오기</p>
    <p>8. 문자 결합 실습</p>
    <p>9. 조건문 (if/else)</p>
    <p>10. 문자열 비교 실습</p>
  </div>
  <div class="space-y-1">
    <p>11. 점수 평균 계산기</p>
    <p>12. 이미지 토글 기능</p>
    <p>13. 반복문 (for)</p>
    <p>14. 함수 정의와 호출</p>
    <p>15. AddEventListener</p>
    <p>16. 짝수 판별 실습</p>
    <p>17. 템플릿 리터럴</p>
    <p>18. 구구단 출력</p>
    <p>19. 객체(Object) 기초</p>
    <p>20. 생성자 함수</p>
  </div>
</div>

---
layout: default
---

## 📋 학습 목차 (2/2)

<div class="grid grid-cols-2 gap-4 text-[13px] mt-4">
  <div class="space-y-1">
    <p>21. 객체 생성 실습</p>
    <p>22. 문자열 메서드</p>
    <p>23. 숫자 메서드</p>
    <p>24. 날짜 포맷 변환</p>
    <p>25. 첫 글자 대문자 변환</p>
    <p>26. 배열(Array) 메서드</p>
    <p>27. 배열 인덱싱</p>
    <p>28. 마우스 오버 효과</p>
    <p>29. 요일별 색상 변경</p>
  </div>
  <div class="space-y-1">
    <p>30. 랜덤과 부울(Math.random)</p>
    <p>31. 랜덤 숫자 뽑기</p>
    <p>32. 로또 번호 추첨</p>
    <p>33. Break & Continue</p>
    <p>34. 요소 추가(appendChild)</p>
    <p>35. 드래그 앤 드롭</p>
    <p>36. 버튼으로 링크 클릭</p>
    <p>37. 동적 테이블 생성</p>
    <p>38. SVG 마우스 추적</p>
  </div>
</div>

---
layout: two-cols
---

## 01. getElementById 기초

- `getElementById`는 ID로 요소를 찾습니다.
- `textContent`로 글자를 읽거나 씁니다.
- 페이지 로드 시 자동 실행 예제입니다.

::right::

<CodeEditor :html="c1.h" :css="c1.c" :js="c1.j" />
<script setup>
const c1 = {
  h: `<p id="original">🍌 바나나</p>\n<p id="copied"></p>`,
  c: ``,
  j: `var origin = document.getElementById('original');\nvar target = document.getElementById('copied');\ntarget.textContent = origin.textContent;`
}
</script>

---
layout: two-cols
---

## 02. 요소 조회하기

- ID, Class, Selector 조회를 배웁니다.
- `querySelectorAll`은 모든 요소를 찾습니다.
- 콘솔창(F12) 결과도 확인해 보세요.

::right::

<CodeEditor :html="c2.h" :css="c2.c" :js="c2.j" />
<script setup>
const c2 = {
  h: `<div id="myDiv">Hello</div>\n<div class="myClass">Box 1</div>\n<div class="myClass">Box 2</div>`,
  c: `.myClass { color: blue; }`,
  j: `const el = document.getElementById('myDiv');\nconsole.log(el.textContent);\nconst boxes = document.getElementsByClassName('myClass');`
}
</script>

---
layout: two-cols
---

## 03. 변수 선언과 활용

- `let`: 변하는 값 (재할당 가능)
- `const`: 변하지 않는 값 (상수)
- 문자열 연결(`+`)을 사용해 봅시다.

::right::

<CodeEditor :html="c3.h" :css="c3.c" :js="c3.j" />
<script setup>
const c3 = {
  h: `<div id="result" style="font-weight: bold;"></div>`,
  c: ``,
  j: `let name = "홍길동";\nconst age = 20;\ndocument.getElementById("result").textContent = "이름: " + name + ", 나이: " + age;`
}
</script>

---
layout: two-cols
---

## 04. 사칙연산 예제

- `+`, `-`, `*`, `/`, `%` 연산
- `\n`은 줄바꿈을 의미합니다.
- `pre-line` 속성으로 줄바꿈을 보여줍니다.

::right::

<CodeEditor :html="c4.h" :css="c4.c" :js="c4.j" />
<script setup>
const c4 = {
  h: `<div id="res" style="white-space: pre-line;"></div>`,
  c: ``,
  j: `let a = 10, b = 3;\nlet out = "합: " + (a+b) + "\\n";\nout += "나머지: " + (a%b);\ndocument.getElementById("res").textContent = out;`
}
</script>

---
layout: two-cols
---

## 05. 자바스크립트 연산자

- `===`: 값과 타입을 모두 비교
- `&&`: AND (모두 참일 때)
- `||`: OR (하나라도 참일 때)

::right::

<CodeEditor :html="c5.h" :css="c5.c" :js="c5.j" />
<script setup>
const c5 = {
  h: `<div id="out" style="white-space: pre-line;"></div>`,
  c: ``,
  j: `const a = 10, b = 3;\ndocument.getElementById("out").textContent = "10 > 3: " + (a > b);`
}
</script>

---
layout: two-cols
---

## 06. HTML onclick 이벤트

- 버튼을 클릭하면 함수가 실행됩니다.
- `bt.onclick = function() { ... }` 패턴
- 가장 기초적인 인터랙션입니다.

::right::

<CodeEditor :html="code6.h" :css="code6.c" :js="code6.j" />
<script setup>
const code6 = {
  h: `<button id="btn">눌러보세요</button>\n<p id="msg"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  document.getElementById('msg').textContent = "클릭 성공!";\n};`
}
</script>

---
layout: two-cols
---

## 07. Input 값 받아오기

- `input.value`로 입력 내용을 읽습니다.
- 버튼 클릭 시 화면에 출력해 봅니다.

::right::

<CodeEditor :html="c7.h" :css="c7.c" :js="c7.j" />
<script setup>
const c7 = {
  h: `<input id="ipt" type="text" />\n<button id="ok">확인</button>\n<p id="out"></p>`,
  c: ``,
  j: `document.getElementById('ok').onclick = () => {\n  const val = document.getElementById('ipt').value;\n  document.getElementById('out').textContent = val;\n};`
}
</script>

---
layout: two-cols
---

## 08. 퀴즈: 문자 결합 실습

- 두 개의 값을 입력받습니다.
- 두 글자를 합쳐서 아래에 보여주세요.

::right::

<CodeEditor :html="c8.h" :css="c8.c" :js="c8.j" />
<script setup>
const c8 = {
  h: `<input id="i1" /> <input id="i2" />\n<button id="go">합치기</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('go').onclick = () => {\n  const v1 = document.getElementById('i1').value;\n  const v2 = document.getElementById('i2').value;\n  document.getElementById('res').textContent = v1 + v2;\n};`
}
</script>

---
layout: two-cols
---

## 09. 조건문 (if/else)

- 조건에 따라 다른 결과를 출력합니다.
- 학점 계산기 예제입니다.

::right::

<CodeEditor :html="c9.h" :css="c9.c" :js="c9.j" />
<script setup>
const c9 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `let score = 85;\nlet grade = (score >= 80) ? "B" : "C";\ndocument.getElementById("res").textContent = grade + "학점";`
}
</script>

---
layout: two-cols
---

## 10. 퀴즈: 문자열 비교

- 입력한 두 글자가 같은지 확인합니다.
- 같으면 '같음', 다르면 '다름'을 출력하세요.

::right::

<CodeEditor :html="c10.h" :css="c10.c" :js="c10.j" />
<script setup>
const c10 = {
  h: `<input id="a" /> <input id="b" />\n<button id="btn">비교</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const v1 = document.getElementById('a').value;\n  const v2 = document.getElementById('b').value;\n  document.getElementById('res').textContent = (v1 === v2) ? "같음" : "다름";\n};`
}
</script>

---
layout: two-cols
---

## 11. 퀴즈: 점수 평균 계산

- 국/영/수 점수를 입력받습니다.
- `Number()`를 써서 숫자로 변환하세요.
- 평균 70점 이상이면 '잘했어요'를 출력합니다.

::right::

<CodeEditor :html="c11.h" :css="c11.c" :js="c11.j" />
<script setup>
const c11 = {
  h: `<input id="k" /> <input id="e" /> <input id="m" />\n<button id="btn">결과</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const avg = (Number(k.value) + Number(e.value) + Number(m.value)) / 3;\n  document.getElementById('res').textContent = avg >= 70 ? "잘했어요" : "분발하세요";\n};`
}
</script>

---
layout: two-cols
---

## 12. 실습: 이미지 토글

- 버튼 클릭 시 이미지를 숨기거나 보여줍니다.
- `display: none`과 `block`을 사용합니다.

::right::

<CodeEditor :html="c12.h" :css="c12.c" :js="c12.j" />
<script setup>
const c12 = {
  h: `<button id="btn">토글</button>\n<img id="img" src="https://via.placeholder.com/100" style="display:block;">`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const img = document.getElementById('img');\n  img.style.display = (img.style.display === 'none') ? 'block' : 'none';\n};`
}
</script>

---
layout: two-cols
---

## 13. 반복문 (for)

- 특정 코드를 여러 번 실행합니다.
- `for(시작; 조건; 증감)` 형식을 씁니다.

::right::

<CodeEditor :html="c13.h" :css="c13.c" :js="c13.j" />
<script setup>
const c13 = {
  h: `<div id="res" style="white-space: pre-line;"></div>`,
  c: ``,
  j: `let out = "";\nfor(let i=1; i<=5; i++) { out += i + "번 반복\\n"; }\ndocument.getElementById("res").textContent = out;`
}
</script>

---
layout: two-cols
---

## 14. 함수 (Function)

- 코드를 묶어서 이름을 붙인 것입니다.
- 필요할 때마다 이름을 불러 실행합니다.

::right::

<CodeEditor :html="c14.h" :css="c14.c" :js="c14.j" />
<script setup>
const c14 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `function greet(n) { return "안녕, " + n; }\ndocument.getElementById("res").textContent = greet("학생");`
}
</script>

---
layout: two-cols
---

## 15. AddEventListener

- `bt.onclick`보다 더 세련된 방법입니다.
- 여러 개의 이벤트를 한 번에 걸 수 있습니다.

::right::

<CodeEditor :html="c15.h" :css="c15.c" :js="c15.j" />
<script setup>
const c15 = {
  h: `<button id="btn">클릭</button>\n<p id="msg"></p>`,
  c: ``,
  j: `document.getElementById('btn').addEventListener('click', () => {\n  document.getElementById('msg').textContent = "Event Success!";\n});`
}
</script>

---
layout: two-cols
---

## 16. 퀴즈: 짝수 출력하기

- 입력한 숫자까지 반복문을 돌립니다.
- `i % 2 === 0`이면 짝수입니다.

::right::

<CodeEditor :html="c16.h" :css="c16.c" :js="c16.j" />
<script setup>
const c16 = {
  h: `<input id="num" type="number" />\n<button id="btn">출력</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  let out = "";\n  for(let i=1; i<=num.value; i++) { if(i%2===0) out += i + " "; }\n  document.getElementById('res').textContent = out;\n};`
}
</script>

---
layout: two-cols
---

## 17. 템플릿 리터럴

- 백틱( \` ) 기호를 사용합니다.
- `${변수}`를 써서 문자열을 합칩니다.
- 따옴표보다 훨씬 편리합니다.

::right::

<CodeEditor :html="c17.h" :css="c17.c" :js="c17.j" />
<script setup>
const c17 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `const n = "영희", a = 12;\ndocument.getElementById("res").textContent = \`내 이름은 \${n}이고 \${a}살이야.\`;`
}
</script>

---
layout: two-cols
# 🚨 자바스크립트 코드를 여기에 정의하면 마크다운 엔진이 간섭을 못 합니다.
c18h: '<input id="dan" placeholder="단 입력" /><button id="btn">출력</button><pre id="res"></pre>'
c18c: ''
c18j: "document.getElementById('btn').onclick = () => { const d = Number(document.getElementById('dan').value); let o = ''; for (let i = 1; i <= 9; i++) { o += d + ' x ' + i + ' = ' + (d * i) + '\\n'; } document.getElementById('res').textContent = o; };"
---

## 18. 퀴즈: 구구단 출력

- 입력받은 숫자의 단을 출력합니다.
- 1부터 9까지 곱하는 반복문을 쓰세요.

::right::

<CodeEditor 
  :html="$frontmatter.c18h" 
  :css="$frontmatter.c18c" 
  :js="$frontmatter.c18j" 
/>

---
layout: two-cols
---

## 19. 자바스크립트 객체

- 여러 정보를 하나의 변수에 담습니다.
- `key: value` 형식을 사용합니다.

::right::

<CodeEditor :html="c19.h" :css="c19.c" :js="c19.j" />
<script setup>
const c19 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `const user = { name: "철수", age: 15 };\ndocument.getElementById("res").textContent = user.name + "(" + user.age + ")";`
}
</script>

---
layout: two-cols
---

## 20. 생성자 함수 기초

- 붕어빵 틀처럼 객체를 찍어냅니다.
- `this` 키워드로 속성을 정합니다.

::right::

<CodeEditor :html="c20.h" :css="c20.c" :js="c20.j" />
<script setup>
const c20 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `function Dog(n) { this.name = n; }\nconst d1 = new Dog("멍멍이");\ndocument.getElementById("res").textContent = d1.name;`
}
</script>

---
layout: two-cols
---

## 21. 퀴즈: 정보 객체 만들기

- 성, 이름, 나이, 취미를 입력받습니다.
- 객체를 생성해 소개 글을 만드세요.

::right::

<CodeEditor :html="c21.h" :css="c21.c" :js="c21.j" />
<script setup>
const c21 = {
  h: `<input id="l" /> <input id="f" />\n<button id="btn">만들기</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const p = { name: l.value + f.value };\n  document.getElementById('res').textContent = \`안녕, \${p.name}!\`;\n};`
}
</script>

---
layout: two-cols
---

## 22. 문자열 메서드

- `length`: 글자 수 확인
- `toUpperCase()`: 대문자로 변경
- `replace()`: 글자 바꾸기

::right::

<CodeEditor :html="c22.h" :css="c22.c" :js="c22.j" />
<script setup>
const c22 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `let s = "Hello JS";\ndocument.getElementById("res").textContent = s.toUpperCase() + " (" + s.length + ")";`
}
</script>

---
layout: two-cols
---

## 23. 숫자 메서드

- `toFixed(2)`: 소수점 자리 고정
- `Math.random()`: 무작위 숫자 생성

::right::

<CodeEditor :html="c23.h" :css="c23.c" :js="c23.j" />
<script setup>
const c23 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `let n = 12.3456;\ndocument.getElementById("res").textContent = n.toFixed(2);`
}
</script>

---
layout: two-cols
---

## 24. 퀴즈: 날짜 포맷 변환

- `20240405`를 입력받습니다.
- `substring`으로 잘라 출력하세요.
- 출력: `2024년 04월 05일`

::right::

<CodeEditor :html="c24.h" :css="c24.c" :js="c24.j" />
<script setup>
const c24 = {
  h: `<input id="d" maxlength="8" />\n<button id="btn">변환</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const v = d.value;\n  res.textContent = \`\${v.substring(0,4)}년 \${v.substring(4,6)}월 \${v.substring(6,8)}일\`;\n};`
}
</script>

---
layout: two-cols
---

## 25. 퀴즈: 첫 글자 대문자로

- 문장의 모든 단어 첫 글자를 대문자로 바꿉니다.
- `split(' ')`으로 단어를 나눕니다.

::right::

<CodeEditor :html="c25.h" :css="c25.c" :js="c25.j" />
<script setup>
const c25 = {
  h: `<input id="i" />\n<button id="btn">변환</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  res.textContent = i.value.split(' ').map(w => w[0].toUpperCase() + w.slice(1)).join(' ');\n};`
}
</script>

---
layout: two-cols
---

## 26. 배열(Array) 기초

- `push()`: 뒤에 추가
- `pop()`: 뒤에서 제거
- `includes()`: 포함 여부 확인

::right::

<CodeEditor :html="c26.h" :css="c26.c" :js="c26.j" />
<script setup>
const c26 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `let f = ["🍎", "🍌"]; f.push("🍇");\ndocument.getElementById("res").textContent = f.join(" / ");`
}
</script>

---
layout: two-cols
---

## 27. 배열 인덱싱

- `배열[0]`은 첫 번째 항목입니다.
- `length`로 개수를 압니다.

::right::

<CodeEditor :html="c27.h" :css="c27.c" :js="c27.j" />
<script setup>
const c27 = {
  h: `<p id="res"></p>`,
  c: ``,
  j: `let f = ["사과", "배", "감"];\ndocument.getElementById("res").textContent = f[0] + "와 " + f[1];`
}
</script>

---
layout: two-cols
---

## 28. 마우스 효과

- `onmouseover`: 마우스 올릴 때
- `onmouseout`: 마우스 뗄 때

::right::

<CodeEditor :html="c28.h" :css="c28.c" :js="c28.j" />
<script setup>
const c28 = {
  h: `<button id="btn" style="color:red;">마우스 올려봐</button>`,
  c: ``,
  j: `const b = document.getElementById('btn');\nb.onmouseover = () => b.style.color = 'blue';\nb.onmouseout = () => b.style.color = 'red';`
}
</script>

---
layout: two-cols
---

## 29. 퀴즈: 요일별 색상 변경

- 마우스를 올리면 요일과 배경색이 바뀝니다.
- 배열과 인덱스를 활용해 보세요.

::right::

<CodeEditor :html="c29.h" :css="c29.c" :js="c29.j" />
<script setup>
const c29 = {
  h: `<div id="box" style="width:100px; height:50px; background:gray;">요일</div>`,
  c: ``,
  j: `let i=0; const d=["월","화"], c=["yellow","red"];\nbox.onmouseover = () => { box.textContent=d[i]; box.style.background=c[i]; i=(i+1)%2; };`
}
</script>

---
layout: two-cols
---

## 30. 랜덤과 부울

- `Math.random()`은 0~1 사이 소수 생성
- `true` / `false` 값을 다룹니다.

::right::

<CodeEditor :html="c30.h" :css="c30.c" :js="c30.j" />
<script setup>
const c30 = {
  h: `<div id="res"></div>`,
  c: ``,
  j: `document.getElementById("res").textContent = Math.floor(Math.random() * 10);`
}
</script>

---
layout: two-cols
---

## 31. 퀴즈: 랜덤 숫자 5개

- 1~100 사이 숫자 5개를 뽑습니다.
- 중복을 허용하여 출력해 보세요.

::right::

<CodeEditor :html="c31.h" :css="c31.c" :js="c31.j" />
<script setup>
const c31 = {
  h: `<button id="btn">뽑기</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  let out = "";\n  for(let i=0; i<5; i++) out += Math.floor(Math.random()*100)+1 + " ";\n  res.textContent = out;\n};`
}
</script>

---
layout: two-cols
---

## 32. 퀴즈: 로또 번호 추첨

- 1~45 숫자 중 6개를 뽑습니다.
- `includes()`로 중복을 제거하세요.

::right::

<CodeEditor :html="c32.h" :css="c32.c" :js="c32.j" />
<script setup>
const c32 = {
  h: `<button id="btn">로또</button>\n<p id="res"></p>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  let nums = [];\n  while(nums.length < 6) {\n    let n = Math.floor(Math.random()*45)+1;\n    if(!nums.includes(n)) nums.push(n);\n  }\n  res.textContent = nums.join(", ");\n};`
}
</script>

---
layout: two-cols
---

## 33. Break & Continue

- `break`: 반복문 즉시 탈출
- `continue`: 이번 회차만 건너뛰기

::right::

<CodeEditor :html="c33.h" :css="c33.c" :js="c33.j" />
<script setup>
const c33 = {
  h: `<div id="res" style="white-space: pre-line;"></div>`,
  c: ``,
  j: `let out = "";\nfor(let i=0; i<5; i++) { if(i===3) break; out += i + " "; }\ndocument.getElementById('res').textContent = out;`
}
</script>

---
layout: two-cols
---

## 34. 요소 추가 (appendChild)

- `createElement`: 새로운 태그 생성
- `appendChild`: 부모 안에 넣기

::right::

<CodeEditor :html="c34.h" :css="c34.c" :js="c34.j" />
<script setup>
const c34 = {
  h: `<div id="box"></div>\n<button id="btn">추가</button>`,
  c: ``,
  j: `document.getElementById('btn').onclick = () => {\n  const p = document.createElement('p');\n  p.textContent = "새 문장"; box.appendChild(p);\n};`
}
</script>

---
layout: two-cols
---

## 35. 드래그 앤 드롭

- `draggable="true"` 속성 필요
- `dataTransfer`로 정보를 전달합니다.

::right::

<CodeEditor :html="c35.h" :css="c35.c" :js="c35.j" />
<script setup>
const c35 = {
  h: `<div id="drag" draggable="true" style="background:orange;">드래그</div>\n<div id="drop" style="border:1px solid; height:50px;"></div>`,
  c: ``,
  j: `drag.ondragstart = (e) => e.dataTransfer.setData("text", e.target.id);\ndrop.ondragover = (e) => e.preventDefault();\ndrop.ondrop = (e) => e.target.appendChild(document.getElementById(e.dataTransfer.getData("text")));`
}
</script>

---
layout: two-cols
---

## 36. 버튼으로 링크 클릭

- `a.click()` 메서드를 강제로 호출
- 버튼 하나로 여러 일을 할 때 씁니다.

::right::

<CodeEditor :html="c36.h" :css="c36.c" :js="c36.j" />
<script setup>
const c36 = {
  h: `<button onclick="link.click()">열기</button>\n<a id="link" href="https://youtube.com" target="_blank" style="display:none;">L</a>`,
  c: ``,
  j: ``
}
</script>

---
layout: two-cols
---

## 37. 퀴즈: 동적 테이블 생성

- 명수를 입력받아 폼을 만듭니다.
- 정보를 모아 표(`table`)를 만듭니다.

::right::

<CodeEditor :html="c37.h" :css="c37.c" :js="c37.j" />
<script setup>
const c37 = {
  h: `<input id="cnt" /> <button id="b1">폼</button>\n<div id="area"></div> <button id="b2">표</button>\n<table id="tbl" border="1"></table>`,
  c: ``,
  j: `b1.onclick = () => {\n  area.innerHTML = "";\n  for(let i=0; i<cnt.value; i++) area.innerHTML += \`<input id="n\${i}">\`;\n};\nb2.onclick = () => {\n  tbl.innerHTML = "";\n  for(let i=0; i<cnt.value; i++) tbl.innerHTML += \`<tr><td>\${document.getElementById('n'+i).value}</td></tr>\`;\n};`
}
</script>

---
layout: two-cols
---

## 38. SVG 마우스 추적

- `mousemove` 이벤트를 사용합니다.
- 원의 `cx`, `cy` 값을 실시간으로 바꿉니다.

::right::

<CodeEditor :html="c38.h" :css="c38.c" :js="c38.j" />
<script setup>
const c38 = {
  h: `<svg id="s" width="200" height="100" style="border:1px solid;"><circle id="c" r="10" fill="red" /></svg>`,
  c: ``,
  j: `s.onmousemove = (e) => {\n  const rect = s.getBoundingClientRect();\n  c.setAttribute('cx', e.clientX - rect.left);\n  c.setAttribute('cy', e.clientY - rect.top);\n};`
}
</script>

---
layout: center
class: text-center
---

# 👏🏽
## 수고하셨어요 ^o^
이제 자바스크립트의 핵심을 모두 마스터했습니다!