{"id":431,"date":"2026-06-26T13:35:32","date_gmt":"2026-06-26T13:35:32","guid":{"rendered":"https:\/\/aabbee.cafe24.com\/?p=431"},"modified":"2026-06-26T13:35:32","modified_gmt":"2026-06-26T13:35:32","slug":"%ec%9d%b4%eb%b2%a4%ed%8a%b8","status":"publish","type":"post","link":"https:\/\/coalacoding.com\/?p=431","title":{"rendered":"\uc774\ubca4\ud2b8"},"content":{"rendered":"

1. \uc774\ubca4\ud2b8<\/h2>\n
\n

\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uc774\ubca4\ud2b8\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \ud2b9\uc815\ud55c \ub3d9\uc791\uc774\ub098 \uc0ac\uac74\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

\uc0ac\uc6a9\uc790\uc758 \ub9c8\uc6b0\uc2a4 \ud074\ub9ad, \ud0a4\ubcf4\ub4dc \uc785\ub825, \ud398\uc774\uc9c0 \ub85c\ub529 \uc644\ub8cc, AJAX \uc694\uccad \uc644\ub8cc \ub4f1\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \uc0c1\ud669\uc5d0\uc11c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc6f9\ube0c\ub77c\uc6b0\uc800\ub098 \uc0ac\uc6a9\uc790\uac00 \ud589\ud558\ub294 \uc5b4\ub5a4 \ub3d9\uc791\uc744 \uc774\ubca4\ud2b8\ub77c \uce6d\ud558\uba70 \uc6f9 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc5d0 \uc0c8\ub85c\uc6b4 \ud398\uc774\uc9c0\ub97c \ubd88\ub7ec\uc624\ub294\uac83\ub3c4 \uc774\ubca4\ud2b8\uc5d0 \ud574\ub2f9\ud569\ub2c8\ub2e4.
\n \uc6f9\ubb38\uc11c \uc601\uc5ed \ub0b4\uc5d0\uc11c \uc774\ub8e8\uc5b4 \uc9c0\ub294 \ub3d9\uc791<\/strong>\uc5d0 \ud55c\ud574 \uc774\ubca4\ud2b8\ub77c \ud558\uba70 \uc6f9\ubb38\uc11c \uc601\uc5ed\uc744 \ubc97\uc5b4\ub098 \ud074\ub9ad\ud558\ub294 \ud589\uc704\ub294 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc758 \uc774\ubca4\ud2b8\uac00 \uc544\ub2d9\ub2c8\ub2e4.<\/p>\n

1.1. \uc774\ubca4\ud2b8<\/h3>\n

:link:MDN<\/strong><\/a><\/p>\n

1.1.1. \ub9c8\uc6b0\uc2a4\uc774\ubca4\ud2b8<\/h4>\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\uc774\ubca4\ud2b8 \uc774\ub984<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
click<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \uc694\uc18c\ub97c \ud074\ub9ad\ud588\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
dblclick<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \uc694\uc18c\ub97c \ub354\ube14 \ud074\ub9ad\ud588\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
mousedown<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \ub9c8\uc6b0\uc2a4 \ubc84\ud2bc\uc744 \ub20c\ub800\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
mouseup<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \ub9c8\uc6b0\uc2a4 \ubc84\ud2bc\uc744 \ub193\uc558\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
mousemove<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc694\uc18c \uc704\uc5d0\uc11c \uc6c0\uc9c1\uc77c \ub54c\ub9c8\ub2e4 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
mouseover<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc694\uc18c \uc704\ub85c \uc774\ub3d9\ud558\uba74 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. (\ud558\uc704 \uc694\uc18c\uc5d0 \ub300\ud574\uc11c\ub3c4 \ubc18\uc751)<\/td>\n<\/tr>\n
mouseenter<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc694\uc18c \uc704\ub85c \uc774\ub3d9\ud558\uba74 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. (\ud558\uc704 \uc694\uc18c\uc5d0 \ub300\ud574\uc11c\ub294 \ubc18\uc751\ud558\uc9c0 \uc54a\uc74c)<\/td>\n<\/tr>\n
mouseout<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc694\uc18c \ubc14\uae65\uc73c\ub85c \ub098\uac08 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4. (\ud558\uc704 \uc694\uc18c\uc5d0 \ub300\ud574\uc11c\ub3c4 \ubc18\uc751)<\/td>\n<\/tr>\n
mouseleave<\/code><\/td>\n\ub9c8\uc6b0\uc2a4 \ucee4\uc11c\uac00 \uc694\uc18c \ubc14\uae65\uc73c\ub85c \ub098\uac08 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.(\ud558\uc704 \uc694\uc18c\uc5d0 \ub300\ud574\uc11c\ub294 \ubc18\uc751\ud558\uc9c0 \uc54a\uc74c)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

1.1.2. \ud0a4\ubcf4\ub4dc\uc774\ubca4\ud2b8<\/h4>\n\n\n\n\n\n\n\n
\uc774\ubca4\ud2b8 \uc774\ub984<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
keydown<\/code><\/td>\n\ud0a4\ubcf4\ub4dc\uc758 \ud0a4\ub97c \ub204\ub974\ub294 \uc21c\uac04 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
keyup<\/code><\/td>\n\ud0a4\ubcf4\ub4dc\uc758 \ud0a4\ub97c \ub193\ub294 \uc21c\uac04 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
keypress<\/code><\/td>\n\ubb38\uc790\ud0a4\uac00 \ub20c\ub838\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \u2018keydown\u2019\uacfc \u2019keyup\u2019 \uc0ac\uc774\uc5d0\uc11c \ubc1c\uc0dd\ud558\uba70, \ud2b9\uc218\ud0a4\uc5d0\ub294 \ubc18\uc751\ud558\uc9c0 \uc54a\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

1.1.3. \ubb38\uc11c\ub85c\ub529\uc774\ubca4\ud2b8<\/h4>\n\n\n\n\n\n\n\n\n\n\n
\uc774\ubca4\ud2b8 \uc774\ub984<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
DOMContentLoaded<\/code><\/td>\nHTML \ubb38\uc11c\uc758 \ud30c\uc2f1\uc774 \uc644\ub8cc\ub418\uc5c8\uace0, DOM \ud2b8\ub9ac\uac00 \uc644\uc131\ub418\uc5c8\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc678\ubd80 \ub9ac\uc18c\uc2a4(images, stylesheets \ub4f1)\uc758 \ub85c\ub529 \uc0c1\ud0dc\uc640\ub294 \ubb34\uad00\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
load<\/code><\/td>\n\ud398\uc774\uc9c0\uc640 \ubaa8\ub4e0 \uad00\ub828 \ub9ac\uc18c\uc2a4(images, stylesheets \ub4f1)\uac00 \uc644\uc804\ud788 \ub85c\ub4dc\ub418\uc5c8\uc744 \ub54c window \uac1d\uccb4\uc5d0\uc11c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
beforeunload<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \ubc97\uc5b4\ub098\ub824 \ud560 \ub54c window \uac1d\uccb4\uc5d0\uc11c \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774\ub97c \ud65c\uc6a9\ud558\uc5ec \uc0ac\uc6a9\uc790\uc5d0\uac8c \ud398\uc774\uc9c0\ub97c \ubc97\uc5b4\ub098\uc9c0 \uc54a\ub3c4\ub85d \uacbd\uace0\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n
unload<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \ud398\uc774\uc9c0\ub97c \ubc97\uc5b4\ub0ac\uc744 \ub54c window \uac1d\uccb4\uc5d0\uc11c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
resize<\/code><\/td>\n\ubb38\uc11c \ud654\uba74 \ud06c\uae30\uac00 \ubc14\ub00c\uc5c8\uc744\ub54c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
scroll<\/code><\/td>\n\ubb38\uc11c \ud654\uba74\uc774 \uc2a4\ud06c\ub864 \ub418\uc5c8\uc744\ub54c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

1.1.4. \ud3fc\uc774\ubca4\ud2b8<\/h4>\n\n\n\n\n\n\n\n\n\n\n
\uc774\ubca4\ud2b8 \uc774\ub984<\/th>\n\uc124\uba85<\/th>\n<\/tr>\n<\/thead>\n
submit<\/code><\/td>\n\ud3fc \ub370\uc774\ud130\uac00 \uc11c\ubc84\ub85c \uc81c\ucd9c\ub418\uae30 \uc804\uc5d0 \ubc1c\uc0dd\ud569\ub2c8\ub2e4. \uc774 \uc774\ubca4\ud2b8\uc758 \uae30\ubcf8 \ub3d9\uc791\uc740 \ud398\uc774\uc9c0\ub97c \uc0c8\ub85c\uace0\uce68\ud558\ub294 \uac83\uc774\uc9c0\ub9cc, preventDefault \uba54\uc18c\ub4dc\ub97c \uc0ac\uc6a9\ud558\uc5ec \uc911\ub2e8\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/td>\n<\/tr>\n
reset<\/code><\/td>\n\ud3fc\uc758 \ub9ac\uc14b \ubc84\ud2bc\uc774 \ud074\ub9ad\ub418\uc5c8\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
focus<\/code><\/td>\n\uc694\uc18c\uac00 \ud3ec\ucee4\uc2a4\ub97c \ubc1b\uc558\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
blur<\/code><\/td>\n\uc694\uc18c\uac00 \ud3ec\ucee4\uc2a4\ub97c \uc783\uc5c8\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
change<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \uc785\ub825 \ud544\ub4dc\uc758 \uac12\uc744 \ubcc0\uacbd\ud558\uace0 \ud3ec\ucee4\uc2a4\ub97c \uc783\uc5c8\uc744 \ub54c \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n
input<\/code><\/td>\n\uc0ac\uc6a9\uc790\uac00 \uc785\ub825 \ud544\ub4dc\uc5d0 \uac12\uc744 \uc785\ub825\ud560 \ub54c\ub9c8\ub2e4 \ubc1c\uc0dd\ud569\ub2c8\ub2e4.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

1.2. \uc774\ubca4\ud2b8\ucc98\ub9ac\uae30<\/h3>\n
\n

\uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30(event handler) \ub610\ub294 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108(event listener)\ub294 \ud2b9\uc815 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218\ub97c \ub9d0\ud569\ub2c8\ub2e4.<\/p>\n<\/blockquote>\n

\uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc758 \uc0c1\ud638\uc791\uc6a9(\ub9c8\uc6b0\uc2a4 \ud074\ub9ad, \ud0a4\ubcf4\ub4dc \uc785\ub825 \ub4f1) \ub610\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \ud2b9\uc815 \ub3d9\uc791(\ud398\uc774\uc9c0 \ub85c\ub529, \uc774\ubbf8\uc9c0 \ub85c\ub529 \uc644\ub8cc \ub4f1)\uacfc \uac19\uc740 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud558\uba74, \uadf8\uc5d0 \ub530\ub978 \ubc18\uc751\uc744 \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/p>\n

\n

Info<\/strong>: \ud83d\udca1 \uc774\ubca4\ud2b8 \uc2e4\ud589\uc758 3\uac00\uc9c0 \uae30\ubcf8\ubb38\ubc95<\/p>\n<\/blockquote>\n

    \n
  1. html \uc18d\uc131\uc73c\ub85c \uc124\uc815 \u21d2 event handler<\/li>\n
  2. dom \ud504\ub85c\ud37c\ud2f0\ub85c \uc124\uc815 \u21d2 event handler<\/li>\n
  3. addEventListener<\/code> \uba54\uc11c\ub4dc\ub85c \uc124\uc815 \u21d2event listener<\/li>\n<\/ol>\n


    \n– Event Handler \u21d2 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218
    \n– Event Listene r\u21d2 \uc774\ubca4\ud2b8\ub97c “\ub4e3\ub294” \uc5ed\ud560\uc744 \ud558\uba70, \ud574\ub2f9 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud558\uba74 \uc9c0\uc815\ub41c \ud578\ub4e4\ub7ec \ud568\uc218\ub97c \ud638\ucd9c. `addEventListener()` \uba54\uc11c\ub4dc\ub97c \uc0ac\uc6a9\ud574 \ucd94\uac00 \ub418\uba70 \ud558\ub098\uc758 \uc694\uc18c\uc5d0 \uc5ec\ub7ec\uac1c \ucd94\uac00 \uac00\ub2a5
    \n<\/Accordion><\/p>\n

    1.2.1.HTML \uc18d\uc131\uc73c\ub85c \uc124\uc815<\/h4>\n
    <button onclick="console.log('Button clicked!')">Click me<\/button>\n<\/code><\/pre>\n
    1.2.2.DOM \ud504\ub85c\ud37c\ud2f0\ub85c \uc124\uc815<\/h4>\n
    document.querySelector("button").onclick = function () {\n  console.log("Button clicked!");\n};\n<\/code><\/pre>\n
    1.2.3.\uba54\uc11c\ub4dc\ub85c \uc124\uc815<\/h4>\n
    addEventListener<\/code> \uba54\uc11c\ub4dc \uc0ac\uc6a9 (\ucd94\ucc9c)
    \n\uc5ec\ub7ec \uac1c\uc758 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108\ub97c \ub3d9\uc77c\ud55c \uc694\uc18c\uc640 \uc774\ubca4\ud2b8\uc5d0 \ub300\ud574 \ucd94\uac00\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
    document.querySelector("button").addEventListener("click", function () {\n  console.log("Button clicked!");\n});\n<\/code><\/pre>\n
    1.2.4. \ubc84\ud2bc \ud074\ub9ad\uc2dc \uc54c\ub9bc\ucc3d\ud45c\uc2dc\ud558\uae30<\/h4>\n
    HTML \uc18d\uc131\uc73c\ub85c \uc791\uc131\ud558\uae30
    \n\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/p>\n

    \n“`html
    \n
    \n
    \n  
    \n    
    \n    
    \n    \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubca4\ud2b8<\/title>\n    <link rel=\"stylesheet\" href=\"css\/function.css\" \/>\n  <\/head><br \/>\n  <body><\/p>\n<ul>\n<li><a href=\"#\" onclick=\"alert('\ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc2b5\ub2c8\ub2e4.')\">Green<\/a><\/li>\n<li><a href=\"#\" onclick=\"alert('\ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc2b5\ub2c8\ub2e4.')\">Orange<\/a><\/li>\n<li><a href=\"#\" onclick=\"alert('\ubc84\ud2bc\uc744 \ud074\ub9ad\ud588\uc2b5\ub2c8\ub2e4.')\">Purple<\/a><\/li>\n<\/ul>\n<div id=\"result\"><\/div>\n<p>  <\/body><br \/>\n<\/html><br \/>\n“`<br \/>\n<\/Accordion><Accordion title=\"css\"><br \/>\n“`css<br \/>\na:link,<br \/>\na:visited {<br \/>\n  color: black;<br \/>\n  text-decoration: none;<br \/>\n}<br \/>\nul {<br \/>\n  list-style: none;<br \/>\n  width: 500px;<br \/>\n  margin: 10px auto;<br \/>\n  padding: 0;<br \/>\n}<br \/>\nli {<br \/>\n  display: inline-block;<br \/>\n  width: 120px;<br \/>\n  border: 1px solid #ccc;<br \/>\n  padding: 10px 15px;<br \/>\n  font-size: 16px;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n#result {<br \/>\n  width: 500px;<br \/>\n  height: 300px;<br \/>\n  margin: 30px auto;<br \/>\n  border: 2px solid #ccc;<br \/>\n  border-radius: 15px;<br \/>\n}<br \/>\np {<br \/>\n  width: 80%;<br \/>\n  padding: 10px;<br \/>\n  line-height: 2em;<br \/>\n}<br \/>\n“`<br \/>\n<\/Accordion><\/p>\n<h4>1.2.5. \ubc84\ud2bc \ud074\ub9ad\uc2dc \ubc30\uacbd\ubcc0\uacbd<\/h4>\n<p>Dom Property \ub85c \uc791\uc131\ud558\uae30<br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/event-2.html\">\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/p>\n<p><Accordion title=\"html\"><br \/>\n“`html<br \/>\n<!DOCTYPE html><br \/>\n<html lang=\"ko\"><br \/>\n  <head><br \/>\n    <meta charset=\"UTF-8\" \/><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/><br \/>\n    <title>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubca4\ud2b8<\/title>\n    <link rel=\"stylesheet\" href=\"css\/function.css\" \/>\n  <\/head><br \/>\n  <body><\/p>\n<ul>\n<li><a href=\"#\" onclick=\"changeBg('green')\">Green<\/a><\/li>\n<li><a href=\"#\" onclick=\"changeBg('orange')\">Orange<\/a><\/li>\n<li><a href=\"#\" onclick=\"changeBg('purple')\">Purple<\/a><\/li>\n<\/ul>\n<div id=\"result\"><\/div>\n<p>    <script><\/p>\n<pre><code><\/script>\n<\/code><\/pre>\n<p>  <\/body><br \/>\n<\/html><br \/>\n```<br \/>\n<\/Accordion><Accordion title=\"css\"><br \/>\n```css<br \/>\na:link,<br \/>\na:visited {<br \/>\n  color: black;<br \/>\n  text-decoration: none;<br \/>\n}<br \/>\nul {<br \/>\n  list-style: none;<br \/>\n  width: 500px;<br \/>\n  margin: 10px auto;<br \/>\n  padding: 0;<br \/>\n}<br \/>\nli {<br \/>\n  display: inline-block;<br \/>\n  width: 120px;<br \/>\n  border: 1px solid #ccc;<br \/>\n  padding: 10px 15px;<br \/>\n  font-size: 16px;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n#result {<br \/>\n  width: 500px;<br \/>\n  height: 300px;<br \/>\n  margin: 30px auto;<br \/>\n  border: 2px solid #ccc;<br \/>\n  border-radius: 15px;<br \/>\n}<br \/>\np {<br \/>\n  width: 80%;<br \/>\n  padding: 10px;<br \/>\n  line-height: 2em;<br \/>\n}<br \/>\n```<br \/>\n<\/Accordion><Accordion title=\"js\"><br \/>\n```javascript<br \/>\nfunction changeBg(color) {<br \/>\n  const result = document.querySelector(\"#result\");<br \/>\n  result.style.backgroundColor = color;<br \/>\n}<br \/>\n```<br \/>\n<\/Accordion><\/p>\n<h4>1.2.6. \ubc84\ud2bc \ud074\ub9ad\uc2dc \uc0c1\uc138\uc124\uba85 \ud45c\uc2dc<\/h4>\n<p>EventListenter Method \ub85c \uc791\uc131\ud558\uae30<br \/>\n<a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/detail-1.html\">\u25b6\ufe0f \uc2dc\uc791\ud654\uba74<\/a><br \/>\n\uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec \uc2dc\uc791\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n<pre><code class=\"language-html\"><!DOCTYPE html>\n<html lang="ko">\n  <head>\n    <meta charset="UTF-8" \/>\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n    <title>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubca4\ud2b8<\/title>\n    <link rel="stylesheet" href="css\/event.css" \/>\n  <\/head>\n\n  <body>\n    <div id="item">\n      <img src="http:\/\/qwerew.cafe24.com\/images\/1.jpg" alt="" \/>\n      <button class="over" id="open">\uc0c1\uc138 \uc124\uba85 \ubcf4\uae30<\/button>\n      <div id="desc" class="detail">\n        <h4>\uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30(event handler)<\/h4>\n        <p>\n          \uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30(event handler) \ub610\ub294 \uc774\ubca4\ud2b8 \ub9ac\uc2a4\ub108(event listener)\ub294 \ud2b9\uc815\n          \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud588\uc744 \ub54c \uc2e4\ud589\ub418\ub294 \ud568\uc218\ub97c \ub9d0\ud569\ub2c8\ub2e4. \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \uc0ac\uc6a9\uc790\uc758\n          \uc0c1\ud638\uc791\uc6a9(\ub9c8\uc6b0\uc2a4 \ud074\ub9ad, \ud0a4\ubcf4\ub4dc \uc785\ub825 \ub4f1) \ub610\ub294 \ube0c\ub77c\uc6b0\uc800\uc758 \ud2b9\uc815 \ub3d9\uc791(\ud398\uc774\uc9c0\n          \ub85c\ub529, \uc774\ubbf8\uc9c0 \ub85c\ub529 \uc644\ub8cc \ub4f1)\uacfc \uac19\uc740 \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud558\uba74, \uadf8\uc5d0 \ub530\ub978 \ubc18\uc751\uc744\n          \ucc98\ub9ac\ud558\uae30 \uc704\ud574 \uc774\ubca4\ud2b8 \ucc98\ub9ac\uae30\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.\n        <\/p>\n        <button id="close">\uc0c1\uc138 \uc124\uba85 \ub2eb\uae30<\/button>\n      <\/div>\n    <\/div>\n    <script>\n      \/\/\uc2a4\ud06c\ub9bd\ud2b8 \uc791\uc131\n    <\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n<pre><code class=\"language-css\">#item {\n  position: relative;\n  width: 500px;\n  height: auto;\n  padding: 15px 20px;\n  margin: auto;\n}\nbutton {\n  background-color: rgba(255, 255, 255, 0.7);\n  padding: 5px;\n  border: 1px solid #ccc;\n  font-size: 0.8em;\n}\n.over {\n  position: absolute;\n  left: 30px;\n  bottom: 30px;\n}\n.detail {\n  width: 400px;\n  text-align: left;\n  line-height: 1.8;\n  display: none;\n}\n<\/code><\/pre>\n<p><a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/detail-1-result.html\">\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/p>\n<p><Accordion title=\"script\"><br \/>\n```javascript<br \/>\nfunction showDetail() {<br \/>\n  document.querySelector(\"#desc\").style.display = \"block\"; \/\/ \uc0c1\uc138 \uc124\uba85 \ubd80\ubd84\uc744 \ud654\uba74\uc5d0 \ud45c\uc2dc<br \/>\n  document.querySelector(\"#open\").style.display = \"none\"; \/\/ '\uc0c1\uc138 \uc124\uba85 \ubcf4\uae30' \ub2e8\ucd94\ub97c \ud654\uba74\uc5d0\uc11c \uac10\ucda4<br \/>\n}<\/p>\n<p>function hideDetail() {<br \/>\n  document.querySelector("#desc").style.display = "none"; \/\/ \uc0c1\uc138 \uc124\uba85 \ubd80\ubd84\uc744 \ud654\uba74\uc5d0\uc11c \uac10\ucda4<br \/>\n  document.querySelector("#open").style.display = "block"; \/\/ '\uc0c1\uc138 \uc124\uba85 \ubcf4\uae30' \ub2e8\ucd94\ub97c \ud654\uba74\uc5d0 \ud45c\uc2dc<br \/>\n}<\/p>\n<pre><code>\n\uc5ec\uae30\uae4c\uc9c0 \uc791\uc131\ud6c4 \uba54\uc18c\ub4dc\ub97c \uc774\uc6a9\ud55c \ubc29\uc2dd\uc744 \uc0ac\uc6a9\ud558\uc5ec \uc774\ubca4\ud2b8\ud578\ub4e4\ub7ec\ub97c \uc791\uc131\ud574\ubcf4\uc138\uc694\n\n<Accordion title="script">\n\n\n![](https:\/\/aabbee.cafe24.com\/wp-content\/uploads\/2026\/06\/01-33.png)\n<\/Accordion>\n\n\ucf54\ub4dc\ub97c \uc904\uc5ec\ubcf4\uc138\uc694 (Refactoring)\n\n<\/Accordion>\n\n\n#### \n 1.2.7. \ubc84\ud2bc\ud074\ub9ad\uc2dc \uae00\uc790\ubcc0\uacbd \ubb38\uc81c\n\n> **Info**: \ud83d\udca1 [\u25b6\ufe0f \uc2e4\ud589\ud654\uba74](https:\/\/qwerewqwerew.github.io\/source\/js\/4\/event-3.html)\n\n  \uc8fc\uc5b4\uc9c4 \ucf54\ub4dc\ub97c \ud65c\uc6a9\ud558\uc5ec \uc138\uac00\uc9c0 \ubc29\ubc95\uc73c\ub85c \uc774\ubca4\ud2b8 \ud578\ub4e4\ub7ec\ub97c \uc791\uc131\ud574\ubcf4\uc138\uc694.\n\n---\n\n  1. \uc694\uc18c\ub97c \ubcc0\uc218\ub85c \uc9c0\uc815 & \ubbf8\ub9ac \ub9cc\ub4e0 \ud568\uc218 \uc0ac\uc6a9\n  1. \uc694\uc18c\ub97c \ub530\ub85c \ubcc0\uc218\ub85c \ub9cc\ub4e4\uc9c0 \uc54a\uace0 \uc0ac\uc6a9\n  1. \uc9c1\uc811 \ud568\uc218\ub97c \uc120\uc5b8\n\n---\n\n  \n  \uc544\ub798\uc758 \ucf54\ub4dc\ub97c \ubcf5\uc0ac\ud558\uc5ec \uc2dc\uc791\ud569\ub2c8\ub2e4.\n\n<Accordion title="html">\n```html\n<!DOCTYPE html>\n<html lang="ko">\n  <head>\n    <meta charset="UTF-8" \/>\n    <meta name="viewport" content="width=device-width, initial-scale=1.0" \/>\n    <title>\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \uc774\ubca4\ud2b8<\/title>\n    <link rel="stylesheet" href="css\/function.css" \/>\n  <\/head>\n  <body>\n    <button id="change">\uae00\uc790\uc0c9 \ubc14\uafb8\uae30<\/button>\n    <p>\n      Reprehenderit tempor do quis sunt eu et exercitation deserunt. Laboris\n      adipisicing est sint aliquip nulla pariatur velit irure elit qui id.\n      Dolore aliquip dolore eu ut irure sint Lorem reprehenderit velit. Duis\n      veniam irure cillum anim excepteur culpa pariatur sunt esse. Eu nulla\n      commodo velit ex id dolore incididunt mollit incididunt nisi labore culpa\n      qui ea. Commodo veniam veniam in ipsum ad minim occaecat qui pariatur\n      adipisicing laborum quis.\n    <\/p>\n\n    <script><\/script>\n  <\/body>\n<\/html>\n<\/code><\/pre>\n<p><\/Accordion><Accordion title=\"css\"><br \/>\n```css<br \/>\na:link,<br \/>\na:visited {<br \/>\n  color: black;<br \/>\n  text-decoration: none;<br \/>\n}<br \/>\nul {<br \/>\n  list-style: none;<br \/>\n  width: 500px;<br \/>\n  margin: 10px auto;<br \/>\n  padding: 0;<br \/>\n}<br \/>\nli {<br \/>\n  display: inline-block;<br \/>\n  width: 120px;<br \/>\n  border: 1px solid #ccc;<br \/>\n  padding: 10px 15px;<br \/>\n  font-size: 16px;<br \/>\n  text-align: center;<br \/>\n}<br \/>\n#result {<br \/>\n  width: 500px;<br \/>\n  height: 300px;<br \/>\n  margin: 30px auto;<br \/>\n  border: 2px solid #ccc;<br \/>\n  border-radius: 15px;<br \/>\n}<br \/>\np {<br \/>\n  width: 80%;<br \/>\n  padding: 10px;<br \/>\n  line-height: 2em;<br \/>\n}<br \/>\n```<br \/>\n<\/Accordion><Accordion title=\"\uc694\uc18c\ub97c \ubcc0\uc218\ub85c \uc9c0\uc815 & \ubbf8\ub9ac \ub9cc\ub4e0 \ud568\uc218 \uc0ac\uc6a9\"><br \/>\n```css<br \/>\nlet changeBttn = document.querySelector(\u2018#change\u2019);<br \/>\nchangeBttn.onclick = changeColor;<\/p>\n<p>function changeColor() {<br \/>\ndocument.querySelector(\u2018p\u2019).style.color = \u2018#f00\u2019;<br \/>\n}<\/p>\n<pre><code><\/Accordion>\n\n\n<Accordion title="\uc694\uc18c\ub97c \ub530\ub85c \ubcc0\uc218\ub85c \ub9cc\ub4e4\uc9c0 \uc54a\uace0 \uc0ac\uc6a9">\n```javascript\ndocument.querySelector("#change").onclick = changeColor;\nfunction changeColor() {\n  document.querySelector("p").style.color = "#f00";\n}\n<\/code><\/pre>\n<p><\/Accordion><Accordion title=\"\uc9c1\uc811 \ud568\uc218\ub97c \uc120\uc5b8\"><br \/>\n```javascript<br \/>\ndocument.querySelector(\"#change\").onclick = function () {<br \/>\n  document.querySelector(\"p\").style.color = \"#f00\";<br \/>\n};<br \/>\n```<br \/>\n<\/Accordion><\/p>\n<h3>2. \ub9c8\ubb34\ub9ac\ubb38\uc81c<\/h3>\n<h3>2.1. <a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/detail-2.html\">\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/h3>\n<p>\ud83d\udd17<a href=\"\/ce84f7e8628b477bbdf75f00a1831eff\">1.2.6<\/a>\uc608\uc81c \ub97c \uc751\uc6a9\ud558\uc5ec \uc0c1\uc138\uc124\uba85\uc744 \uc5f4\uace0 \ub2eb\ub294 \ud568\uc218\ub97c DOM \ubc29\uc2dd\uc73c\ub85c \uc218\uc815\ud574 \ubcf4\uc138\uc694.<\/p>\n<h3>2.2. <a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/sol-1.html\">\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/h3>\n<p>\ub2e4\uc74c \uc870\uac74\uc744 \ucc38\uace0\ud558\uc5ec \ub9e4\uac1c\ubcc0\uc218\ub85c \uc804\ub2ec\ubc1b\uc740 \ub450\uc218\uc758 \uac12\uc774 \uac19\uc73c\uba74 \uacf1\ud558\uace0 \ub2e4\ub974\uba74 \ub354\ud558\ub294 \ud568\uc218 sumMulti() \ub97c \uc791\uc131\ud558\uc138\uc694.<br \/>\n\uadf8\ud6c4 \uc778\uc790\ub85c 5,10 \uc744 \uc804\ub2ec\ud560\ub54c\uc640 10,10 \uc744 \uc804\ub2ec\ud560\ub54c\uc758 \uc2e4\ud589\uacb0\uacfc\ub97c \ucf58\uc194\ucc3d\uc5d0 \ud45c\uc2dc\ud558\uc138\uc694.<\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udca1 \uc870\uac74<\/p>\n<\/blockquote>\n<ol>\n<li>\ud568\uc218\uc758 \uc120\uc5b8\uc740 function sumMulti(x,y) \ub85c \ud569\ub2c8\ub2e4.<\/li>\n<li>if~else \ubb38\uc744 \uc0ac\uc6a9\ud558\uc5ec \ub450\uc218\uc758 \uac12\uc744 \ube44\uad50\ud569\ub2c8\ub2e4.<\/li>\n<li>\uac12\uc758 \ube44\uad50\uc2dc \ube44\uad50\uc5f0\uc0b0\uc790\ub294 === \ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n<h3>2.3. <a href=\"https:\/\/qwerewqwerew.github.io\/source\/js\/4\/sol-2.html\">\u25b6\ufe0f \uc2e4\ud589\ud654\uba74<\/a><\/h3>\n<p>\ud504\ub86c\ud504\ud2b8 \ucc3d\uc5d0\uc11c \ub450\uc218\ub97c \uc785\ub825\ubc1b\uc544 \ud06c\uae30\ub97c \uc11c\ub85c \ube44\uad50\ud55c \ud6c4 \ub354 \ud070 \uc22b\uc790\ub97c \uc54c\ub9bc\ucc3d\uc73c\ub85c \ud45c\uc2dc\ud558\ub294 \ud568\uc218\ub97c \uc791\uc131\ud558\uc138\uc694.<br \/>\n\uadf8\ud6c4 \uc778\uc790\ub85c 5,10 \uc744 \uc804\ub2ec\ud560\ub54c\uc640 10,10 \uc744 \uc804\ub2ec\ud560\ub54c\uc758 \uc2e4\ud589\uacb0\uacfc\ub97c \ucf58\uc194\ucc3d\uc5d0 \ud45c\uc2dc\ud558\uc138\uc694.<\/p>\n<blockquote>\n<p><strong>Info<\/strong>: \ud83d\udca1 \uc870\uac74<\/p>\n<\/blockquote>\n<ol>\n<li>\ud504\ub86c\ud504\ud2b8 \ucc3d\uc5d0\uc11c \uc785\ub825\ubc1b\uc740 \ub450\uc218\ub97c \uac01\uac01 num1, num2 \ubcc0\uc218\uc5d0 \uc800\uc7a5\ud569\ub2c8\ub2e4.<\/li>\n<li>\ud568\uc218 \uc120\uc5b8\uc2dc \ud568\uc218\uba85\uc740 \uc790\uc720\ub86d\uac8c \uc9c0\uc815\ud558\uace0 \ub9e4\uac1c\ubcc0\uc218\ub294 2\uac1c\ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>if~else \ubb38\uc744 \uc0ac\uc6a9\ud558\uba70 \uac12\uc758 \ube44\uad50\uc2dc \ube44\uad50\uc5f0\uc0b0\uc790\ub294 === \ub97c \uc0ac\uc6a9\ud569\ub2c8\ub2e4.<\/li>\n<li>\ub450\uc218\uac00 \uac19\uc744\uacbd\uc6b0 \u2018\uac19\uc2b5\ub2c8\ub2e4\u2019 \ub97c \ucd9c\ub825\ud569\ub2c8\ub2e4.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>1. \uc774\ubca4\ud2b8 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c \uc774\ubca4\ud2b8\ub294 \uc6f9 \ud398\uc774\uc9c0\uc5d0\uc11c \ubc1c\uc0dd\ud558\ub294 \ud2b9\uc815\ud55c \ub3d9\uc791\uc774\ub098 \uc0ac\uac74\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4. \uc0ac\uc6a9\uc790\uc758 \ub9c8\uc6b0\uc2a4 \ud074\ub9ad, \ud0a4\ubcf4\ub4dc \uc785\ub825, \ud398\uc774\uc9c0 \ub85c\ub529 \uc644\ub8cc, AJAX \uc694\uccad \uc644\ub8cc \ub4f1\uacfc \uac19\uc740 \ub2e4\uc591\ud55c \uc0c1\ud669\uc5d0\uc11c \uc774\ubca4\ud2b8\uac00 \ubc1c\uc0dd\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc6f9\ube0c\ub77c\uc6b0\uc800\ub098 \uc0ac\uc6a9\uc790\uac00 \ud589\ud558\ub294 \uc5b4\ub5a4 \ub3d9\uc791\uc744 \uc774\ubca4\ud2b8\ub77c \uce6d\ud558\uba70 \uc6f9 \ube0c\ub77c\uc6b0\uc800 \ub0b4\uc5d0 \uc0c8\ub85c\uc6b4 \ud398\uc774\uc9c0\ub97c \ubd88\ub7ec\uc624\ub294\uac83\ub3c4 \uc774\ubca4\ud2b8\uc5d0 \ud574\ub2f9\ud569\ub2c8\ub2e4. \uc6f9\ubb38\uc11c \uc601\uc5ed \ub0b4\uc5d0\uc11c \uc774\ub8e8\uc5b4 \uc9c0\ub294 \ub3d9\uc791\uc5d0 \ud55c\ud574 \uc774\ubca4\ud2b8\ub77c \ud558\uba70 \uc6f9\ubb38\uc11c … <a title=\"\uc774\ubca4\ud2b8\" class=\"read-more\" href=\"https:\/\/coalacoding.com\/?p=431\" aria-label=\"\uc774\ubca4\ud2b8\uc5d0 \ub300\ud574 \ub354 \uc790\uc138\ud788 \uc54c\uc544\ubcf4\uc138\uc694\">\ub354 \uc77d\uae30<\/a><\/p>\n","protected":false},"author":0,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15],"tags":[],"class_list":["post-431","post","type-post","status-publish","format-standard","hentry","category-javascript-basics"],"_links":{"self":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/431","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"replies":[{"embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=431"}],"version-history":[{"count":1,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/431\/revisions"}],"predecessor-version":[{"id":433,"href":"https:\/\/coalacoding.com\/index.php?rest_route=\/wp\/v2\/posts\/431\/revisions\/433"}],"wp:attachment":[{"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=431"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=431"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/coalacoding.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=431"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}