Learn JQuery Tutorials

10+
๋‹ค์šด๋กœ๋“œ
์ฝ˜ํ…์ธ  ๋“ฑ๊ธ‰
์ „์ฒด์ด์šฉ๊ฐ€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€
์Šคํฌ๋ฆฐ์ƒท ์ด๋ฏธ์ง€

์•ฑ ์ •๋ณด

jQuery ์ž์Šต์„œ๋Š” jQuery ๊ธฐ๋ณธ ์‚ฌํ•ญ, jQuery ์˜ˆ์ œ, jQuery ์„ ํƒ๊ธฐ, jQuery ์ด๋ฒคํŠธ, jQuery ํšจ๊ณผ, jQuery ์ˆœํšŒ, CSS ๋ฐ jQuery ํŠน์„ฑ์„ ๋ฐฐ์šฐ๋Š” ๋ฐ ๋„์›€์ด ๋ฉ๋‹ˆ๋‹ค. ๊ธฐ์ดˆ๋ถ€ํ„ฐ ๊ณ ๊ธ‰ ์ˆ˜์ค€๊นŒ์ง€ jQuery๋ฅผ ๋‹จ๊ณ„๋ณ„๋กœ ๋ฐฐ์šฐ์‹ญ์‹œ์˜ค. ์ด๋Ÿฌํ•œ jQuery ์ž์Šต์„œ๋Š” ํ™˜๊ฒฝ, ๊ธฐ๋ณธ ๊ตฌ๋ฌธ, ์„ ํƒ๊ธฐ, jQuery ๋ฉ”์„œ๋“œ ์„ค์ •์—์„œ ์‹œ์ž‘ํ•ฉ๋‹ˆ๋‹ค.
jQuery๋ฅผ
jQuery๋Š” ๋น ๋ฅด๊ณ  ์ž‘๊ณ  ํฌ๋กœ์Šค ํ”Œ๋žซํผ์ด๋ฉฐ ๊ธฐ๋Šฅ์ด ํ’๋ถ€ํ•œ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. HTML์˜ ํด๋ผ์ด์–ธํŠธ ์ธก ์Šคํฌ๋ฆฝํŒ…์„ ๋‹จ์ˆœํ™”ํ•˜๋„๋ก ์„ค๊ณ„๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ์ž‘๋™ํ•˜๋Š” ์‚ฌ์šฉํ•˜๊ธฐ ์‰ฌ์šด API๋กœ HTML ๋ฌธ์„œ ์ˆœํšŒ ๋ฐ ์กฐ์ž‘, ์• ๋‹ˆ๋ฉ”์ด์…˜, ์ด๋ฒคํŠธ ์ฒ˜๋ฆฌ, AJAX ๋“ฑ์„ ๋งค์šฐ ๊ฐ„๋‹จํ•˜๊ฒŒ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

jQuery์˜ ์ฃผ์š” ๋ชฉ์ ์€ ์›น ์‚ฌ์ดํŠธ์—์„œ JavaScript๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ณด๋‹ค ์ธํ„ฐ๋ž™ํ‹ฐ๋ธŒํ•˜๊ณ  ๋งค๋ ฅ์ ์œผ๋กœ ๋งŒ๋“œ๋Š” ์‰ฌ์šด ๋ฐฉ๋ฒ•์„ ์ œ๊ณตํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ถ”๊ฐ€ํ•˜๋Š” ๋ฐ ์‚ฌ์šฉ๋ฉ๋‹ˆ๋‹ค.

jQuery๋ž€ ๋ฌด์—‡์ธ๊ฐ€
jQuery๋Š” ์ž‘๊ณ  ๊ฐ€๋ณ๊ณ  ๋น ๋ฅธ JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค. ํฌ๋กœ์Šค ํ”Œ๋žซํผ์ด๋ฉฐ ๋‹ค์–‘ํ•œ ์œ ํ˜•์˜ ๋ธŒ๋ผ์šฐ์ €๋ฅผ ์ง€์›ํ•ฉ๋‹ˆ๋‹ค. ?์ž‘๊ฒŒ ์ ๊ฒŒ ํ•˜๊ณ  ๋” ๋งŽ์ด ํ•˜์‹œ๊ฒ ์Šต๋‹ˆ๊นŒ?๋ผ๊ณ ๋„ ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜ํ–‰ํ•˜๋Š” ๋ฐ ๋งŽ์€ JavaScript ์ฝ”๋“œ๊ฐ€ ํ•„์š”ํ•œ ๋งŽ์€ ์ผ๋ฐ˜์ ์ธ ์ž‘์—…์ด ํ•„์š”ํ•˜๊ณ  ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ํ•œ ์ค„์˜ ์ฝ”๋“œ๋กœ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”์„œ๋“œ์— ๋ฐ”์ธ๋”ฉํ•˜๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ๋˜ํ•œ AJAX ํ˜ธ์ถœ ๋ฐ DOM ์กฐ์ž‘๊ณผ ๊ฐ™์€ JavaScript์˜ ๋งŽ์€ ๋ณต์žกํ•œ ์ž‘์—…์„ ๋‹จ์ˆœํ™”ํ•˜๋Š” ๋ฐ ๋งค์šฐ ์œ ์šฉํ•ฉ๋‹ˆ๋‹ค.

jQuery๋Š” ์ž‘๊ณ  ๋น ๋ฅด๊ณ  ๊ฐ€๋ฒผ์šด JavaScript ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ž…๋‹ˆ๋‹ค.
jQuery๋Š” ํ”Œ๋žซํผ ๋…๋ฆฝ์ ์ž…๋‹ˆ๋‹ค.
jQuery๋Š” "์ž‘๊ฒŒ ๋” ์ ๊ฒŒ ์“ฐ๊ธฐ"๋ฅผ ์˜๋ฏธํ•ฉ๋‹ˆ๋‹ค.
jQuery๋Š” AJAX ํ˜ธ์ถœ ๋ฐ DOM ์กฐ์ž‘์„ ๋‹จ์ˆœํ™”ํ•ฉ๋‹ˆ๋‹ค.
jQuery๋ฅผ ๊ธฐ๋Šฅ
๋‹ค์Œ์€ jQuery์˜ ์ค‘์š”ํ•œ ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค.

HTML ์กฐ์ž‘
DOM ์กฐ์ž‘
DOM ์š”์†Œ ์„ ํƒ
CSS ์กฐ์ž‘
ํšจ๊ณผ ๋ฐ ์• ๋‹ˆ๋ฉ”์ด์…˜
์œ ์šฉ
์•„์•ฝ์Šค
HTML ์ด๋ฒคํŠธ ๋ฐฉ๋ฒ•
JSON ํŒŒ์‹ฑ
ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ†ตํ•œ ํ™•์žฅ์„ฑ
jQuery๊ฐ€ ํ•„์š”ํ•œ ์ด์œ 
๋•Œ๋กœ๋Š” jQuery์˜ ํ•„์š”์„ฑ์ด ๋ฌด์—‡์ธ์ง€ ๋˜๋Š” AJAX/JavaScript ๋Œ€์‹  jQuery๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ์–ด๋–ค ์ฐจ์ด๊ฐ€ ์žˆ๋Š”์ง€์— ๋Œ€ํ•œ ์งˆ๋ฌธ์ด ์ƒ๊ธธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. jQuery๊ฐ€ AJAX์™€ JavaScript๋ฅผ ๋Œ€์ฒดํ•œ๋‹ค๋ฉด? ์ด ๋ชจ๋“  ์งˆ๋ฌธ์— ๋Œ€ํ•ด ๋‹ค์Œ ๋‹ต๋ณ€์„ ๋งํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

๋งค์šฐ ๋น ๋ฅด๊ณ  ํ™•์žฅ ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.
์‚ฌ์šฉ์ž๊ฐ€ UI ๊ด€๋ จ ๊ธฐ๋Šฅ ์ฝ”๋“œ๋ฅผ ๊ฐ€๋Šฅํ•œ ์ตœ์†Œํ•œ์˜ ๋ผ์ธ์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋„๋ก ํ•ฉ๋‹ˆ๋‹ค.
์‘์šฉ ํ”„๋กœ๊ทธ๋žจ์˜ ์„ฑ๋Šฅ์„ ํ–ฅ์ƒ์‹œํ‚ต๋‹ˆ๋‹ค.
๋ธŒ๋ผ์šฐ์ €์˜ ํ˜ธํ™˜ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ฐœ๋ฐœํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๊ฒƒ์€ ๋Œ€๋ถ€๋ถ„ ์ƒˆ๋กœ์šด ๋ธŒ๋ผ์šฐ์ €์˜ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค.

jQuery๋กœ ์›น์‚ฌ์ดํŠธ์™€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ๊ตฌ์ถ•ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด API ๋ฌธ์„œ์— ๋‹ด์„ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ๋ณด๋‹ค ๋” ๋งŽ์€ ๊ฒƒ์„ ๋ฐฐ์šธ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ธฐ๋ณธ ์‚ฌํ•ญ์— ๋Œ€ํ•œ ์„ค๋ช…, ์ผ๋ฐ˜์ ์ธ ๋ฌธ์ œ์— ๋Œ€ํ•œ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•, ๋ชจ๋ฒ” ์‚ฌ๋ก€ ๋ฐ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์„ ์ฐพ๊ณ  ์žˆ๋‹ค๋ฉด ์ œ๋Œ€๋กœ ์ฐพ์•„์˜ค์…จ์Šต๋‹ˆ๋‹ค!
์—…๋ฐ์ดํŠธ ๋‚ ์งœ
2025. 8. 22.

๋ฐ์ดํ„ฐ ๋ณด์•ˆ

๋ณด์•ˆ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ๋ฐ์ดํ„ฐ๋ฅผ ์ˆ˜์ง‘ ๋ฐ ๊ณต์œ ํ•˜๋Š” ๋ฐฉ์‹์„ ํŒŒ์•…ํ•˜๋Š” ๊ฒƒ์—์„œ ์‹œ์ž‘๋ฉ๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ ๊ฐœ์ธ ์ •๋ณด ๋ณดํ˜ธ ๋ฐ ๋ณด์•ˆ ๊ด€ํ–‰์€ ์‚ฌ์šฉ์ž์˜ ์•ฑ ์‚ฌ์šฉ, ์ง€์—ญ, ์—ฐ๋ น์— ๋”ฐ๋ผ ๋‹ค๋ฅผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๋‹ค์Œ์€ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ œ๊ณตํ•œ ์ •๋ณด์ด๋ฉฐ ์ถ”ํ›„ ์—…๋ฐ์ดํŠธ๋  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
์ œ3์ž์™€ ๊ณต์œ ๋˜๋Š” ๋ฐ์ดํ„ฐ ์—†์Œ
๊ฐœ๋ฐœ์ž๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ณต์œ ๋ฅผ ์„ ์–ธํ•˜๋Š”์ง€ ์ž์„ธํžˆ ์•Œ์•„๋ณด์„ธ์š”.
์•ฑ์—์„œ ์ˆ˜์ง‘ํ•  ์ˆ˜ ์žˆ๋Š” ๋ฐ์ดํ„ฐ ์œ ํ˜•
๊ธฐ๊ธฐ ๋˜๋Š” ๊ธฐํƒ€ ID
๋ฐ์ดํ„ฐ๊ฐ€ ์•”ํ˜ธํ™”๋˜์ง€ ์•Š์Œ
๋ฐ์ดํ„ฐ๋ฅผ ์‚ญ์ œํ•  ์ˆ˜ ์—†์Œ