๋ฐ˜์‘ํ˜•
250x250
Recent Posts
ยซ   2024/12   ยป
์ผ ์›” ํ™” ์ˆ˜ ๋ชฉ ๊ธˆ ํ† 
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
๊ด€๋ฆฌ ๋ฉ”๋‰ด
728x90
๋ฐ˜์‘ํ˜•

๋ชฉ๋ก[WEB & AI] (feat. ์ทจ์ค€)/์ŠคํŒŒ๋ฅดํƒ€์ฝ”๋”ฉํด๋Ÿฝ_์›น๊ฐœ๋ฐœ์ข…ํ•ฉ๋ฐ˜ (44)

728x90
๋ฐ˜์‘ํ˜•

Hello creators ๐Ÿ™Œ

2-8_Ajax ํ•จ๊ป˜ ์—ฐ์Šตํ•˜๊ธฐ

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ๋ฐฐ์šฐ๊ณ ์ž ํ•˜๋Š” ๊ฒƒ ๋”ฐ๋ฆ‰์ด ๋ฐ์ดํ„ฐ๋กœ ์ด๋ ‡๊ฒŒ ๋งŒ๋“ค๊ธฐ ์—…๋ฐ์ดํŠธ ๋ฒ„ํŠผ ๋ˆ„๋ฅด๋ฉด -> ๋‚˜์˜ค๊ฒŒ 5๊ฐœ ๋ฏธ๋งŒ์ด๋ฉด -> ๋นจ๊ฐ„์ƒ‰ โ…ก. ๋”ฐ๋ฆ‰์ด API ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ํ™•์ธ 1. ํ•ด๋ด ๋”ฐ๋ฆ‰์ด API http://spartacodingclub.shop/sparta_api/seoulbike ๋ณด๋ฉด์„œ ํ™•์ธํ•  ๊ฒƒ ์ „์ฒด ๋ฐ์ดํ„ฐ ๊ตฌ์กฐ ํ•„์š”ํ•œ ํ•ญ๋ชฉ ์ด๋ฆ„ ์ฒดํฌ โ…ข. ajax ํ€ด์ฆˆ 1 1. ๊ธฐ๋ณธ ์ œ๊ณต ์ฝ”๋“œ jQuery + Ajax์˜ ์กฐํ•ฉ์„ ์—ฐ์Šตํ•˜์ž! 2. ์„œ์šธ์‹œ OpenAPI(์‹ค์‹œ๊ฐ„ ๋”ฐ๋ฆ‰๊ธฐ ํ˜„ํ™ฉ)๋ฅผ ์ด์šฉํ•˜๊ธฐ ๋ชจ๋“  ์œ„์น˜์˜ ๋”ฐ๋ฆ‰์ด ํ˜„ํ™ฉ์„ ๋ณด์—ฌ์ฃผ์„ธ์š” ์—…๋ฐ์ดํŠธ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅผ ๋•Œ๋งˆ๋‹ค ์ง€์› ๋‹ค ์ƒˆ๋กœ ์”Œ์—ฌ์ ธ์•ผ ํ•ฉ๋‹ˆ๋‹ค. ์—…๋ฐ์ดํŠธ ๊ฑฐ์น˜๋Œ€ ์œ„์น˜ ๊ฑฐ์น˜๋Œ€ ์ˆ˜ ํ˜„์žฌ ๊ฑฐ์น˜๋œ ๋”ฐ๋ฆ‰์ด ์ˆ˜ 102. ๋ง์›์—ญ 1๋ฒˆ์ถœ๊ตฌ ์•ž 22 0 103. ..

2-5_Quiz_JQuery ์—ฐ์Šตํ•˜๊ธฐ

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ๋ฐฐ์šฐ๊ณ ์ž ํ•˜๋Š” ๊ฒƒ ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์› ๋˜๊ฑฐ ํ™œ์šฉํ•ด์„œ ํ€ด์ฆˆ ํ’€๊ธฐ โ…ก. ํ€ด์ฆˆ ํ’€๊ธฐ ์‚ฌ์ „ ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ 1. ์ด ์ฝ”๋“œ ์Šค๋‹ˆํŽซ ๋ณต์‚ฌํ•ด์„œ ์‹œ์ž‘ jQuery + Javascript์˜ ์กฐํ•ฉ์„ ์—ฐ์Šตํ•˜์ž! 1. ๋นˆ์นธ ์ฒดํฌ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ 1-1. ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์ž…๋ ฅํ•œ ๊ธ€์ž๋กœ ์–ผ๋Ÿฟ ๋„์šฐ๊ธฐ [์™„์„ฑ๋ณธ]1-2. ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์นธ์— ์•„๋ฌด๊ฒƒ๋„ ์—†์œผ๋ฉด "์ž…๋ ฅํ•˜์„ธ์š”!" ์–ผ๋Ÿฟ ๋„์šฐ๊ธฐ ํด๋ฆญ 2. ์ด๋ฉ”์ผ ํŒ๋ณ„ ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ 2-1. ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ ์ž…๋ ฅ๋ฐ›์€ ์ด๋ฉ”์ผ๋กœ ์–ผ๋Ÿฟ ๋„์šฐ๊ธฐ 2-2. ์ด๋ฉ”์ผ์ด ์•„๋‹ˆ๋ฉด(@๊ฐ€ ์—†์œผ๋ฉด) '์ด๋ฉ”์ผ์ด ์•„๋‹™๋‹ˆ๋‹ค'๋ผ๋Š” ์–ผ๋Ÿฟ ๋„์šฐ๊ธฐ [์™„์„ฑ๋ณธ]2-3. ์ด๋ฉ”์ผ ๋„๋ฉ”์ธ๋งŒ ์–ผ๋Ÿฟ ๋„์šฐ๊ธฐ ํด๋ฆญ 3. HTML ๋ถ™์ด๊ธฐ/์ง€์šฐ๊ธฐ ์—ฐ์Šต 3-1. ์ด๋ฆ„์„ ์ž…๋ ฅํ•˜๋ฉด ์•„๋ž˜ ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ [์™„์„ฑ..

2-4_JQuery ์ ์šฉํ•˜๊ธฐ(ํฌ์ŠคํŒ… ๋ฐ•์Šค)

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ๋ฐฐ์šฐ๊ณ ์ž ํ•˜๋Š” ๊ฒƒ '๊ธฐ๋กํ•˜๊ธฐ' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด -> 'posting ๋ฐ•์Šค' ๊ฐ€ ๋‚˜์˜ด '๋‹ซ๊ธฐ' ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด -> 'posting ๋ฐ•์Šค' ๊ฐ€ ๋“ค์–ด๊ฐ โ…ก. ํ•จ์ˆ˜ ๋งŒ๋“ค์–ด์„œ ๋ถ™์—ฌ๋ณด๊ธฐ 1. ์ „๋žต 1) ์‰ฌ์šด ํ•จ์ˆ˜๋กœ ๊ธฐ๋ณธ logic ์„ ์™„์„ฑ = [๋ผˆ๋Œ€ ์™„์„ฑ] 2) ์ข€ ๋” ๋ณต์žกํ•œ ํ•จ์ˆ˜๋กœ ์›ํ•˜๋Š” [๋””ํ…Œ์ผ ์™„์„ฑ] 2. [๋ผˆ๋Œ€ ์™„์„ฑ] open_box, close_box ํ•จ์ˆ˜ ๋งŒ๋“ค์–ด์„œ -> ๊ธฐ๋กํ•˜๊ธฐ ๋ฐ ๋‹ซ๊ธฐ ๋ฒ„ํŠผ์— ๋ถ™์ด๊ธฐ 1) ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ 2) ๊ธฐ๋กํ•˜๊ธฐ ๋ฒ„ํŠผ์— ๋ถ™์ด๊ธฐ ๋‚ด ์ƒ์•  ์ตœ๊ณ ์˜ ์˜ํ™”๋“ค ๐ŸŽฌ ์˜ํ™” ๊ธฐ๋กํ•˜๊ธฐ โœ๏ธ 3) ๋‹ซ๊ธฐ ๋ฒ„ํŠผ์— ๋ถ™์ด๊ธฐ ๊ธฐ๋กํ•˜๊ธฐ๐Ÿ‘‡ ๋‹ซ๊ธฐ๐Ÿ™Œ 4) ๊ฒฐ๊ณผ๋ฌผ 3. [๋””ํ…Œ์ผ ์ถ”๊ฐ€] 1) jQuery ์‚ฌ์šฉํ•ด์„œ ๋™์ผ ํ•จ์ˆ˜์—..

2-3_JQuery ๋‹ค๋ค„๋ณด๊ธฐ

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ jQuery ==์ž์ฃผ ์“ฐ๋Š” ๊ฒƒ== ํ•™์Šต input ๋ฐ•์Šค์˜ ๊ฐ’์„ ๊ฐ€์ ธ์™€๋ณด๊ธฐ div ๋ณด์ด๊ธฐ / ์ˆจ๊ธฐ๊ธฐ ํƒœ๊ทธ ๋‚ด html ์ž…๋ ฅํ•˜๊ธฐ โ…ก. input ๋ฐ•์Šค์˜ ๊ฐ’์„ ๊ฐ€์ ธ์™€๋ณด๊ธฐ 1. ๋ญ˜ ํ•œ๊ฑฐ์•ผ? input box ์— ์žˆ๋Š” URL ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ ๋˜๋Š” ์ž…๋ ฅํ•˜๊ธฐ 2. ์–ด๋–ป๊ฒŒ ์ ‘๊ทผํ• ๊ฑฐ์•ผ? URL ๊ฐ’ ์„ ๊ฐ€์ ธ์˜ค๋ ค๋ฉด -> URL ์„ '์ง€์นญ' ํ•  ์ˆ˜ ์žˆ์–ด์•ผ ํ•จ. '์ง€์นญ' = ์ด๋ฆ„ํ‘œ, ์งฑ๊ตฌ์˜ ๋ฐ”์ง€์—์„œ ์งฑ๊ตฌ! =='CSS== ์—์„œ ์ง€์นญ' ์€ =='Class'== ๋กœ ํ–ˆ์Œ ==jQuery== ์—์„œ๋Š” =='id'== ๋กœ ์ง€์นญ ํ•จ โญโญโญโญโญ ์˜ํ™” URL ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๊ธฐ ์œ„ํ•ด ID ๋ฅผ url ๋กœ ์„ค์ • ๊ทผ๋ฐ ๊ถ๊ธˆํ•œ..

2-2_JQuery ์‹œ์ž‘ํ•˜๊ธฐ

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ jQuery ์˜์˜ ๋ฐ ํ•„์š”์„ฑ ## โ…ก. jQuery ์ดํ•ด --- 1. ์˜์˜ ==HTML ์š”์†Œ๋ฅผ ์กฐ์ž‘== ํ•˜๋Š” javascript ๋ฅผ ๋ฏธ๋ฆฌ ์ž‘์„ฑํ•ด๋‘” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ. Cf. ๋ถ€ํŠธ์ŠคํŠธ๋žฉ์€ CSS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ! ์˜ˆ๋ฅผ ๋“ค๋ฉด ์ด๋ ‡๊ฒŒ ์ง๊ด€์ ์ž„. ๋ญ”๊ฐ€ ๊ฐ์ถ”๋ผ! -> hide ๋ฅผ ์“ด๋‹ค. โ…ข. ์‚ฌ์šฉํ•ด๋ณด๊ธฐ jQuery CDN ๋ถ€๋ถ„ ์ฐธ๊ณ ํ•ด์„œ ์ž„ํฌํŠธํ•˜๊ธฐ #code_snipet โญโญโญ ํ•ด๋‹น URL ์ ‘์† : https://www.w3schools.com/jquery/jquery_get_started.asp ์ด๊ฑฐ ํ•œ์ค„ ์ถ”๊ฐ€ ํ•˜๋ฉด ๋ผ ๐Ÿ‘‡ ๋‹ค๋งŒ, ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5.0 ํ…œํ”Œ๋ฆฟ ์—๋Š” ์ด๋ฏธ jQuery ๊ฐ€ ์ถ”๊ฐ€๋˜์–ด ์žˆ์Œ. ๐Ÿ’ญ What i learned ๋ถ€ํŠธ์ŠคํŠธ๋žฉ 5.0 ํ…œํ”Œ๋ฆฟ์„ ์„ค์น˜ํ•˜๋ฉด -..

2-1_2์ฃผ์ฐจ ์˜ค๋Š˜ ๋ฐฐ์šธ ๊ฒƒ

โ… . ์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) 1. ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ํ†ตํ•ด ํ™ˆํŽ˜์ด์ง€ '์›€์ง์ž„' ์„ ์ฃผ๊ธฐ ex) ๋ฒ„ํŠผ ํด๋ฆญ ํ–ˆ์„ ๋•Œ > ๋‚˜์™”๋‹ค ๋“ค์–ด๊ฐ”๋‹ค. ex) ์„œ์šธ์‹œ ๋ฐ์ดํ„ฐ ๋ฐ›์•„์™€์„œ > ๋‚ด ํ™ˆํŽ˜์ด์ง€์— ์ด์šฉํ•˜๊ธฐ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ๋ณต์Šต โ…ก. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณต์Šต : ํ™€์ง ํ•จ์ˆ˜ ๋งŒ๋“ค๊ธฐ ํ•ด๋ณด๊ธฐ ๋ˆŒ๋ €์„ ๋•Œ ๋งˆ๋‹ค -> 'ํ™€' ์ง' 'ํ™€' '์ง' ๋‚˜์˜ค๊ฒŒ ํ•˜๊ธฐ ์ž‘์„ฑํ•œ ์ฝ”๋“œ ๐Ÿ”— ๋‚ด ์ƒ์•  ์ตœ๊ณ ์˜ ์˜ํ™”๋“ค ๐ŸŽฌ ์˜ํ™” ๊ธฐ๋กํ•˜๊ธฐ โœ๏ธ ๊ฒฐ๊ณผ๋ฌผ ์ถ”๊ฐ€์ ์œผ๋กœ ๋ฐฐ์šธ ๊ฒƒ ๋ฒ„ํŠผ ์ƒ‰๊น” ๋ฐ”๊พธ๊ณ  ์‹ถ์„ ๋•Œ ํ•„์š”ํ•œ๊ฒŒ -> jQuery div ๋ฐ•์Šค ํ•˜๋‚˜ ๊ฐ์ถ”๊ณ  ์‹ถ์œผ๋ฉด ํ•„์š”ํ•œ๊ฒŒ -> jQuery ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๐Ÿ’ญ What i learned ์˜์–ด๋ฅผ ์ฝ๋Š” ๊ฒƒ ์ฒ˜๋Ÿผ, ํ•ด์„์ด ๋˜๋Š” ๋Š๋‚Œ์ด ์ค‘์š”ํ•˜๋‹ค. ๋‚ด๊ฐ€..

1-16_1์ฃผ์ฐจ ๋ & ์ˆ™์ œ ์„ค๋ช…

์ด๋ฒˆ ํšŒ์ฐจ ํ•™์Šต ๋ชฉํ‘œ (goal) ์ดํ•ด ํ•˜๊ณ ์ž ํ•˜๋Š” ๊ฒƒ 'html, css, Javascript ๋ฌธ๋ฒ•' ์— ๋Œ€ํ•œ ์ดํ•ด ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์“ฐ๊ธฐ ๋งŒ๋“ค๊ณ ์ž ํ•˜๋Š” ๊ฒƒ ํŒฌ๋ช…๋ก ์ˆ™์ œ 1๏ธโƒฃ ์‚ฌ์ „ ์ค€๋น„ homework.html ํŒŒ์ผ ๋งŒ๋“ค๊ธฐ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ ํ…œํ”Œ๋ฆฟ ๋„ฃ๊ธฐ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ ์‹œ์ž‘ ํ…œํ”Œ๋ฆฟ ์ฝ”๋“œ๐Ÿ”— ์ด๊ฑธ๋กœ ์‹œ์ž‘ํ•ด๋ณด์ฃ ! 2๏ธโƒฃ ์ด์ „ ์ž‘์—… ๊ฒฐ๊ณผ๋ฌผ์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ ์ŠคํŒŒ๋ฅดํƒ€ํ”ผ๋””์•„ ์—์„œ ๊ฐ€์ ธ์˜ค๊ธฐ ํ•„์š” ์—†๋Š” ๊ธฐ๋Šฅ๋“ค ์‚ญ์ œ ํ•ต์‹ฌ์€ ์™ธ์›Œ์„œ ์“ฐ๋Š”๊ฒŒ ์•„๋‹ˆ๋ผ ๊ฐ€์ ธ์™€์„œ, ๊ตฌ์กฐ ํŒŒ์•…ํ•˜๊ณ , ํ•„์š”ํ•œ๊ฑฐ, ๋ฐ”๊ฟ” ๋ผ๋Š”๊ฑฐ โญโญโญโญโญโญโญโญ ํŒŒ์นœ์ฝ” ์‚ฌ์ง„ ํ•˜๊ณ  ์‹ถ์œผ๋‹ˆ๊นŒ, ๊ทธ๊ฑธ๋กœ ๋ฐ”๊พธ๋Š”๊ฑฐ โญโญโญโญโญ ๐ŸŽŠ DJ ์ž‘์—… ์‹œ์ž‘ โœ… ์‚ฌ์ง„ ๋ฐ”๊พธ๊ธฐ background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0..