์ธ๋„ค์ผ [js library] AOS ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ตฌํ˜„ํ•˜๊ธฐ ์ฐธ๊ณ  [AOS] ๐Ÿ“š ์Šคํฌ๋กค ์• ๋‹ˆ๋ฉ”์ด์…˜ ์‚ฌ์šฉ๋ฒ• - Animate On Scroll AOS.js (Animate On Scroll) ๊ธฐ๋ณธ์ ์œผ๋กœ ์Šคํฌ๋กค ์›€์ง์ž„์— ๋”ฐ๋ผ ๊ฐœ์ฒด์— ์›€์ง์ž„์„ ์ฃผ๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜์˜ ๊ฒฝ์šฐ, AOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์‰ฝ๊ฒŒ ์• ๋‹ˆ๋ฉ”์ด์…˜์„ ์ค„ ์ˆ˜ ์žˆ๋‹ค. AOS ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๊นŠ inpa.tistory.com ์ด๋ฒˆ์— ๋งŒ๋“ค๊ณ  ์žˆ๋Š” ์™ธ์ฃผ ์‚ฌ์ดํŠธ์—์„œ ๋งŽ์ด ์“ฐ์ด๋Š” ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค. ์ด ํšจ๊ณผ ํ•˜๋‚˜๋งŒ์œผ๋กœ๋„ ์›น์ด ํ•œ์ธต ๋” ๋‹ค์ด๋‚˜๋ฏนํ•ด๋ณด์—ฌ์„œ ์•ž์œผ๋กœ๋„ ์ž์ฃผ ์“ธ ๊ฒƒ ๊ฐ™๋‹ค. ์‚ฌ์ง„์ด ๊ฐ€์šด๋ฐ์„œ๋ถ€ํ„ฐ ์ปค์ง€๋Š” ํšจ๊ณผ ์•„๋ž˜์—์„œ ํ•˜๋‚˜์”ฉ ์˜ฌ๋ผ์˜ค๊ฒŒ
์ธ๋„ค์ผ ์™ธ์ฃผ ์ผ์ง€ 1 ๋‚˜๋Š” ์˜ค๋Š˜๋„ ๋งค์šฐ ํ™”๋‚˜์žˆ๋‹ค. ํ”„๋ก ํŠธ ์งค ๋•Œ ๋นผ๊ณค ํ•ญ์ƒ ํ™”๋‚˜๋Š” ๋“ฏ.. ํ™”๋‚˜๋ฉด์„œ ์ ˆ๋Œ€ ๋†“์ง€ ์•Š๋Š”๋‹ค.. ์ง€๊ธˆ 7์‹œ๊ฐ„์งธ ์—‰๋ฉ์ด ๋ถ™์ด๊ณ  ์žˆ๋‹ค. ๋‚˜ ์ž˜ ์ˆ˜ ์žˆ๋ƒ 1. samesite ์—๋Ÿฌ Schemeful ๋™์ผ ์‚ฌ์ดํŠธ "๋™์ผ ์‚ฌ์ดํŠธ"์˜ ์ •์˜๋Š” URL ์ฒด๊ณ„๋ฅผ ํฌํ•จํ•˜๋„๋ก ์ง„ํ™”ํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์‚ฌ์ดํŠธ์˜ HTTP์™€ HTTPS ๋ฒ„์ „ ๊ฐ„์˜ ๋งํฌ๋Š” ์ด์ œ ํฌ๋กœ์Šค ์‚ฌ์ดํŠธ ์š”์ฒญ์œผ๋กœ ๊ณ„์‚ฐ๋ฉ๋‹ˆ๋‹ค. ๊ฐ€๋Šฅํ•œ ํ•œ ๋ฌธ์ œ๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ๊ธฐ web.dev ์šฐ์„  ํฌ๋กฌ์œผ๋กœ ๋„์šธ ๋•Œ ๋‚˜ํƒ€๋‚˜๋Š” ์—๋Ÿฌ์— ๋Œ€ํ•ด ๊ณต๋ถ€๋ฅผ ์ข€ ํ•ด๋ดค๋Š”๋ฐ 2021๋…„๋ถ€ํ„ฐ samesite์— ๋Œ€ํ•œ default์„ค์ •์ด ๋ฐ”๋€Œ์–ด ๋‚˜ํƒ€๋‚œ๋‹ค๊ณ  ํ•œ๋‹ค. 2. vscode์˜ liveserver์—์„œ๋Š” php๊ฐ€ ์ž‘๋™ํ•˜์ง€ ์•Š๋Š”๋‹ค. ํ•˜....์‹œ๊ฐ„๋‚ญ๋น„ ์ด๋Ÿฐ ๊ธฐ๋ณธ์ ์ธ๊ฑฐ ๊นŒ๋จน๊ณ  ๋‚ด ์ฝ”๋“œ๋ฌธ์ œ์ธ ์ค„ ์•Œ๊ณ  ์‚ฝ์งˆ ..
์ธ๋„ค์ผ [java]Deep copy์™€ Shallow copy ์ถœ์ฒ˜ https://hoho325.tistory.com/89
์ธ๋„ค์ผ [JAVA] int ์™€ Integer์˜ ์ฐจ์ด 1) int๋Š” ๋ฌด์—‡์ธ๊ฐ€? (primitive type) int๋Š” ๋ณ€์ˆ˜์˜ ํƒ€์ž…(data type)์ด๋‹ค. ๋ณ€์ˆ˜(variable)๋Š” '๊ฐ’์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๋ฉ”๋ชจ๋ฆฌ ์ƒ์˜ ๊ณต๊ฐ„'์„ ์˜๋ฏธ ํ•ฉ๋‹ˆ๋‹ค. int a = 3; char firstName = "H"; ์—์„œ a ๋‚˜ H ๋Š” ๋ณ€์ˆ˜(๋ณ€์ˆ˜๋ช…)๊ฐ€ ๋˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ๊ทธ ์•ž์— ์ ํžŒ int ์™€ char๊ฐ€ ๋ณ€์ˆ˜์˜ ํ˜•์„ ์ง€์ •ํ•ด์ฃผ๊ณ  ์žˆ๋Š” ๊ฒƒ์ด, ๋ณ€์ˆ˜์˜ ํƒ€์ž…( = data type = ์ž๋ฃŒํ˜• ) ์ด๋ผ ํ•ฉ๋‹ˆ๋‹ค. ์ฆ‰, ์ž๋ฃŒํ˜•์€ 'data์˜ type์— ๋”ฐ๋ผ ๊ฐ’์ด ์ €์žฅ๋  ๊ณต๊ฐ„์˜ ํฌ๊ธฐ์™€ ์ €์žฅ ํ˜•์‹์„ ์ •์˜ํ•œ ๊ฒƒ' ์ด๋ผ๊ณ  ๋ณผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌํ•œ ์ž๋ฃŒํ˜•์€ ๊ธฐ๋ณธํ˜•(primitive type)๊ณผ ์ฐธ์กฐํ˜•(referece type)์œผ๋กœ ๋‚˜๋‰˜๋Š”๋ฐ, int ๋Š” ์ด ์ค‘ ๊ธฐ๋ณธํ˜•์— ์†ํ•ฉ๋‹ˆ๋‹ค. ๊ธฐ๋ณธํ˜•์—๋Š” ๋‹ค..
์ธ๋„ค์ผ Spring web service camp week1: front-end(html, css, javascript.. etc) *์ž‘์„ฑ์ค‘ ๋‘๋ฒˆ์งธ๋กœ ์ฐธ์—ฌํ•˜๋Š” ์›น์„œ๋น„์Šค ์บ ํ”„. ์ƒ๊ฐ๋ณด๋‹ค ํ•˜๋ฃจํ•˜๋ฃจ ๋ฐฐ์šฐ๋Š” ๊ฒŒ ๋งŽ์•„์„œ ์ฃผ๋ณ„๋กœ ํ•˜๋‚˜์”ฉ ๊ธฐ๋ก์„ ๋‚จ๊ฒจ๋‘๋ ค ํ•œ๋‹ค. ํด๋ก /์ƒˆ๋กœ์šด ์›น ์„œ๋น„์Šค ๊ธฐํš ์ค‘ 1ํƒ์„ ํ•ด์•ผํ•˜๋Š”๋ฐ, ๋‚˜๋Š” ํด๋ก ์„ ์„ ํƒํ–ˆ๋‹ค. ์™œ๋ƒ๋ฉด ๊ฐœ์ธ ํ”„๋กœ์ ํŠธ๋กœ ๊ตฌ์ƒ์ค‘์ธ ์›น์ด ํ•˜๋‚˜ ์žˆ๋Š”๋ฐ, ์ด ํ”„๋กœ์ ํŠธ์— ๋„์›€์ด ๋  ๋งŒํ•œ ๊ฒƒ์„ ํ•˜๊ณ  ์‹ถ์—ˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ฃผ์š” ๋ ˆํผ๋Ÿฐ์Šค๋กœ ์‚ผ์€๊ฒŒ ๋ฐ”๋กœ Differ์ด๋‹ค. Differ์€ ์„ฑ์žฅ์„ ์œ„ํ•œ ์งˆ๋ฌธ์„ ๋˜์ ธ์ฃผ๋Š” ์›น ์‚ฌ์ดํŠธ๋กœ, ์ฒ˜์Œ ๋ณด์ž๋งˆ์ž ๋ฐ˜ํ–ˆ๋˜ ๊ฒƒ ๊ฐ™๋‹ค. ํฐํŠธ๋ถ€ํ„ฐ ๊ตฌ์„ฑ๊นŒ์ง€ ๋””์ž์ธ์ ์œผ๋กœ ๋งˆ์Œ์— ์™ ๋“ค ๋ฟ ์•„๋‹ˆ๋ผ ๋‚˜์—๊ฒŒ ํฅ๋ฏธ๋กœ์šด ์ƒ๊ฐ๊ฑฐ๋ฆฌ๋ฅผ ๋˜์ ธ์ค€๋‹ค๋Š” ์ ์ด ์ธ์ƒ์ ์ด์—ˆ๋‹ค. ์ตœ๊ทผ ๋ฏธ๋…ธ์ด๊ฐ€ ๋ชจ๋ธ์ด ๋˜์–ด์„œ ์‚ฌ์ดํŠธ๊ฐ€ ์กฐ๊ธˆ ๋ฐ”๋€Œ์—ˆ๋Š”๋ฐ, ๋‹คํ–‰ํžˆ ๊ทธ ์ดํ›„ ์บ ํ”„๊ฐ€ ์‹œ์ž‘ํ–ˆ๋‹ค. (์บ ํ”„ ์ค‘์— ๋ฐ”๋€Œ์—ˆ์œผ๋ฉด ํฐ์ผ๋‚  ๋ป” !!) ๐Ÿ“ https://www.differ.c..
์ธ๋„ค์ผ default.css ์„ธํŒ…ํ•˜๊ธฐ ๋ธŒ๋ผ์šฐ์ € ๋งˆ๋‹ค ๋””ํดํŠธ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋Š” css ๊ฐ’๋“ค์ด ์žˆ๋‹ค. margin, padding ๊ฐ™์€ css ์†์„ฑ(property)์˜ ๊ฐ’๋“ค์ด 0์ด ์•„๋‹ˆ๋ผ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ์ •ํ•œ ์ž„์˜์˜ ๊ฐ’์œผ๋กœ ์„ค์ •๋˜์–ด ์žˆ๋‹ค. ์ด๋Ÿฐ ๊ฐ’๋“ค์„ ์ดˆ๊ธฐํ™”ํ•˜๊ณ  ์ž‘์—…์„ ํ•ด์•ผ ๋‚ด๊ฐ€ ์˜๋„ํ•œ ๊ฐ’์œผ๋กœ ํ™”๋ฉด์— ์ถœ๋ ฅ๋  ์ˆ˜ ์žˆ๋‹ค! ์˜ˆ๋ฅผ ๋“ค์–ด, ์›น๋ธŒ๋ผ์šฐ์ € css ์ดˆ๊ธฐํ™” ์ „์— header ํด๋ž˜์Šค div์— margin๊ณผ padding์„ ์ฃผ์ง€ ์•Š์•„๋„ positioning์ด ์›ํ•˜๋Š” ๋Œ€๋กœ ๋˜์ง€ ์•Š๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค. ๊ทธ ์™ธ์—๋„ ๋ธŒ๋ผ์šฐ์ €๋งˆ๋‹ค ๋‹ค๋ฅธ ๊ธฐ๋ณธ ์„ค์ •๊ฐ’๋“ค์„ ์ดˆ๊ธฐํ™”ํ•˜๊ธฐ ์œ„ํ•˜์—ฌ default.css๋ฅผ ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค. ๋‹ค์Œ์€ ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•˜๋Š” default.css ํŒŒ์ผ์ด๋‹ค. ์ฃผ์˜ํ•  ์ ์€, ๋‚ด๊ฐ€ ๋งŒ๋“  style.css ํŒŒ์ผ๋ณด๋‹ค ์•ž์— ์„ ์–ธํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. ๊ทธ๋ž˜์•ผ ๋‚ด๊ฐ€ ์„ ์–ธํ•œ ์Šคํƒ€์ผ..
์ธ๋„ค์ผ [Javascript plugin] Masonry Layout ์ ์šฉํ•˜๊ธฐ ๋ฉ”์ด์Šจ๋ฆฌ ๋ ˆ์ด์•„์›ƒ ( Masonry Layout )์„ ์ด์šฉํ•˜๋ฉด ํฌ๊ธฐ๊ฐ€ ๋‹ค๋ฅธ ์ปจํ…์ธ ๋ฅผ ํšจ์œจ์ ์œผ๋กœ ๋ฐฐ์น˜ํ•  ์ˆ˜ ์žˆ๋‹ค. ๋นˆ์˜์—ญ์„ ์ตœ์†Œํ™”ํ•  ์ˆ˜ ์žˆ์œผ๋ฉฐ ์ง€๊ฒจ์šด ์Šคํƒ€์ผ๋กœ๋ถ€ํ„ฐ ๋ฒ—์–ด๋‚˜ ์ž์œ ๋กœ์šด ๋Š๋‚Œ์„ ์ฃผ๊ธฐ๋„ ํ•œ๋‹ค! ํ•€ํ„ฐ๋ ˆ์ŠคํŠธ๊ฐ€ ์ด๋Ÿฌํ•œ ๋ ˆ์ด์•„์›ƒ์„ ์‚ฌ์šฉํ•˜๋Š”๋ฐ, width๋Š” ๊ณ ์ •ํ•˜๊ณ  height๋Š” ์„ค์ •ํ•˜์ง€ ์•Š์€ ๊ฒƒ์œผ๋กœ ๋ณด์ธ๋‹ค. ๊ตฌ๊ธ€๋ง์„ ํ•ด๋ณด๋‹ˆ ์˜ค์ง css๋กœ๋งŒ ๊ตฌํ˜„ํ•˜๋Š” ๋ฐฉ๋ฒ•๋„ ๋‚˜์˜ค๊ธด ํ•˜๋˜๋ฐ.. ํšจ์œจ์ถฉ์ธ ๋‚˜๋Š” ๋” ๊ฐ„ํŽธํ•œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ คํ•œ๋‹ค. https://masonry.desandro.com/ Masonry Install Download CDN Link directly to Masonry files on unpkg. Package managers Install with Bower: bower install ma..
์ธ๋„ค์ผ JQuery ์ •๋ณตํ•˜๊ธฐ 4 (ํƒ์ƒ‰, animation, ajax) ํƒ์ƒ‰ ์ฒด์ธ ์ปจํ…์ŠคํŠธ๋ฅผ ์œ ์ง€ํ•˜๋ฉด์„œ ์ œ์–ด์˜ ๋Œ€์ƒ์ด ๋˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ๋ณ€๊ฒฝํ•˜๋Š” ๊ธฐ๋ฒ• http://api.jquery.com/category/traversing/ ๐Ÿ“ ์˜ˆ์ œ javascript์„ ์ž…๋ ฅ ํ•œ ํ›„์— ์—”ํ„ฐ๋ฅผ ๋ˆŒ๋Ÿฌ์ฃผ์„ธ์š”. .add(selector)์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•œ๋‹ค .andSelf()ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์— ์ด์ „ ์—˜๋ฆฌ๋จผํŠธ ์…‹์„ ๋” ํ•œ๋‹ค .children([selector])์ž์‹ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค .closest(selector)๊ฐ€์žฅ ๊ฐ€๊นŒ์šด selector ์กฐ์ƒ ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ํƒ์ƒ‰ํ•œ๋‹ค .each(function(index,Element))ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์— ๋ฐ˜๋ณต ์ž‘์—…์„ ์‹คํ–‰ํ•œ๋‹ค .end()์ด์ „ ์ฒด์ธ ์ปจํ…์ŠคํŠธ๋กœ ๋Œ์•„๊ฐ„๋‹ค. .eq(index)ํ˜„์žฌ ์—˜๋ฆฌ๋จผํŠธ ์…‹์—์„œ index์— ํ•ด๋‹นํ•˜๋Š” ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์„ ํƒํ•œ๋‹ค .filter(s..
์ธ๋„ค์ผ JQuery ์ •๋ณตํ•˜๊ธฐ 3 (event, element, form) ์ด๋ฒคํŠธ๋ž€? ์‹œ์Šคํ…œ์—์„œ ์ผ์–ด๋‚˜๋Š” ์‚ฌ๊ฑด์„ ์˜๋ฏธ javascript๋‚˜ jQuery์—๊ฒŒ ์ด๋ฒคํŠธ๋ž€ ๋ธŒ๋ผ์šฐ์ ธ์—์„œ ์ผ์–ด๋‚˜๋Š” ์‚ฌ๊ฑด์„ ์˜๋ฏธํ•œ๋‹ค. (ํด๋ฆญ, ๋งˆ์šฐ์Šค ์ด๋™, ํƒ€์ดํ•‘, ํŽ˜์ด์ง€ ๋กœ๋”ฉ๋“ฑ) ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ž‘๋™ํ•  ๋กœ์ง์„ ์‹œ์Šคํ…œ์—๊ฒŒ ์•Œ๋ ค๋‘๋ฉด ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์‹œ์Šคํ…œ์ด ๊ทธ ๋กœ์ง์„ ํ˜ธ์ถœํ•œ๋‹ค. jQuery์˜ ์ด๋ฒคํŠธ ํฌ๋กœ์Šค๋ธŒ๋ผ์šฐ์ง•์˜ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์คŒ bind๋กœ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์„ค์น˜ํ•˜๊ณ , unbind๋กœ ์ œ๊ฑฐ (์˜ˆ์ œ1) (on,off๋กœ ์—…๋ฐ์ดํŠธ ๋จ) trigger๋กœ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๊ฐ•์ œ๋กœ ์‹คํ–‰ (์˜ˆ์ œ2) click, ready์™€ ๊ฐ™์ด ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ ํ—ฌํผ(helper)๋ฅผ ์ œ๊ณตํ•จ live๋ฅผ ์ด์šฉํ•˜๋ฉด ํ˜„์žฌ ์กด์žฌ ํ•˜์ง€ ์•Š๋Š” ์—˜๋ฆฌ๋จผํŠธ์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ์„ค์น˜ํ•  ์ˆ˜ ์žˆ์Œ ์˜ˆ์ œ1. on, off, trigger๋ฅผ ์ด์šฉํ•œ ์ด๋ฒคํŠธ์˜ ์„ค์น˜,..