๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ

๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ206

ํ• ๋กœ์œˆ์— ๋งž์ถ˜ 2023๋…„ 10์›” ์ŠคํฌํŠธ๋ผ์ดํŠธ ์•„์›Œ, ๋ ˆ์ด๋“œ์•„์›Œ ํฌ์ผ“๋ชฌ๊ณ  ์ด๋ฒคํŠธ ์ผ์ • ์ •๋ฆฌ ํ• ๋กœ์œˆ์— ๋งž์ถ˜ 2023๋…„ 10์›” ํฌ์ผ“๋ชฌ๊ณ  ์ด๋ฒคํŠธ ์ผ์ • ์ •๋ฆฌ ํฌ์ผ“๋ชฌ๊ณ ๋Š” ๊ณ„์ ˆ, ํŠน๋ณ„ํ•œ ๋‚ , ํ˜น์€ ํŠน์ • ์ฃผ์ œ์— ๋งž์ถฐ ๋‹ค์–‘ํ•œ ์ด๋ฒคํŠธ๋ฅผ ์ฃผ์ตœํ•ฉ๋‹ˆ๋‹ค. 2023๋…„ 10์›”์—๋„ ์˜ˆ์™ธ๋Š” ์•„๋‹™๋‹ˆ๋‹ค. ํŠนํžˆ 10์›”์€ ํ•ผ๋Ÿฌ์œˆ์ด ์žˆ๋Š” ๋‹ฌ์ด๊ธฐ ๋•Œ๋ฌธ์—, ๊ณ ์ŠคํŠธ์™€ ์•…ํƒ€์ž… ํฌ์ผ“๋ชฌ์ด ๋ ˆ์ด๋“œ์™€ ์ด๋ฒคํŠธ์—์„œ ์ž์ฃผ ๋“ฑ์žฅํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ์ด๋ฒˆ ๊ธ€์—์„œ๋Š” 2023๋…„ 10์›”์˜ ํฌ์ผ“๋ชฌ๊ณ  ์ด๋ฒคํŠธ ์ผ์ •์„ ์ƒ์„ธํ•˜๊ฒŒ ์ •๋ฆฌํ•ด ๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ŠคํฌํŠธ๋ผ์ดํŠธ ์•„์›Œ 10์›” 3์ผ (ํ™”์š”์ผ): ํฌ์ผ“๋ชฌ(์•ผ๋ˆ), ๋ณด๋„ˆ์Šค(๋ฐ•์‚ฌ ์‚ฌํƒ• 2๋ฐฐ) 10์›” 10์ผ (ํ™”์š”์ผ): ํฌ์ผ“๋ชฌ(๋ฒ„์„ฏ๊ผฌ), ๋ณด๋„ˆ์Šค(์ง„ํ™” ๊ฒฝํ—˜์น˜ 2๋ฐฐ) 10์›” 17์ผ (ํ™”์š”์ผ): ํฌ์ผ“๋ชฌ(ํ˜ธ๋ฐ”๊ท€), ๋ณด๋„ˆ์Šค(ํฌํš ์‹œ ๋ณ„์˜ ๋ชจ๋ž˜ 2๋ฐฐ) 10์›” 24์ผ (ํ™”์š”์ผ): ํฌ์ผ“๋ชฌ(๋‚˜๋ชฉ๋ น), ๋ณด๋„ˆ์Šค(ํฌํš ์‹œ ๊ฒฝํ—˜์น˜ 2๋ฐฐ) 10์›” 31์ผ (ํ™”์š”์ผ).. 2023. 10. 6.
์ธ๋„ค์ผ ์ด๋ฏธ์ง€ ๋น„์œจ ์œ ์ง€ ์˜์—ญ์— ๊ฝ‰ ์ฐจ๊ฒŒ ์ด๋ฏธ์ง€ ์ž๋ฅด๊ธฐ ํ•œ ํ›„ ๊ฐ€์šด๋ฐ ์ •๋ ฌ CSS ๋ฐ jquery ๊ฐ€๋กœ์„ธ๋กœ ๋น„์œจ โœˆ ์ธ๋„ค์ผ ์ด๋ฏธ์ง€ ๋น„์œจ ์œ ์ง€ ์˜์—ญ์— ๊ฝ‰ ์ฐจ๊ฒŒ ์ด๋ฏธ์ง€ ์ž๋ฅด๊ธฐ ํ•œ ํ›„ ๊ฐ€์šด๋ฐ ์ •๋ ฌ CSS ๋ฐ jQuery ๊ฐ€๋กœ์„ธ๋กœ ๋น„์œจ ์›น์‚ฌ์ดํŠธ๋‚˜ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์„ ์ œ์ž‘ํ•˜๋ฉด์„œ ์ด๋ฏธ์ง€์˜ ๋น„์œจ์ด๋‚˜ ํฌ๊ธฐ๋ฅผ ๋งž์ถ”๋Š” ๊ฒƒ์€ ์ค‘์š”ํ•œ ์ž‘์—… ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ํŠนํžˆ, ์ธ๋„ค์ผ์ด๋‚˜ ๋Œ€ํ‘œ ์ด๋ฏธ์ง€์™€ ๊ฐ™์€ ๊ณ ์ •๋œ ์˜์—ญ์— ๋‹ค์–‘ํ•œ ํฌ๊ธฐ์™€ ๋น„์œจ์˜ ์ด๋ฏธ์ง€๋ฅผ ํ‘œ์‹œํ•ด์•ผ ํ•  ๋•Œ, ๊ทธ ์ด๋ฏธ์ง€๋ฅผ ์˜์—ญ์— ๊ฝ‰ ์ฐจ๊ฒŒ ๋ณด์—ฌ์ฃผ๋ฉด์„œ๋„ ๋„˜์น˜๋Š” ๋ถ€๋ถ„์„ ์ž˜๋ผ๋‚ด์•ผ ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋ฏธ์ง€์˜ ๊ฐ€๋กœ์™€ ์„ธ๋กœ ๋น„์œจ์„ ๊ณ ์ •๋œ ์˜์—ญ์— ๋งž์ถ”๋ ค๋ฉด, ์„œ๋ฒ„์—์„œ ์ด๋ฏธ์ง€๋ฅผ ์ž˜๋ผ๋‚ด๊ฑฐ๋‚˜ ๋ฆฌ์‚ฌ์ด์ง•ํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์ด ๋ฐฉ๋ฒ•์€ ์›๋ณธ ์ด๋ฏธ์ง€์˜ ํ’ˆ์งˆ์„ ์†์ƒ์‹œํ‚ฌ ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์—, CSS๋‚˜ jQuery๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์›๋ณธ ์ด๋ฏธ์ง€๋ฅผ ๊ทธ๋Œ€๋กœ ์œ ์ง€ํ•˜๋ฉด์„œ๋„ ์›ํ•˜๋Š” ๋น„์œจ์— ๋งž๊ฒŒ ๋ณด์—ฌ์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ์ฐพ์•„์•ผ ํ•ฉ๋‹ˆ๋‹ค. CSS๋ฅผ ํ™œ.. 2023. 10. 6.
Jquery ์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋” ํ”Œ๋Ÿฌ๊ทธ์ธ idangerous.swiper.js pagination ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ Jquery ์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋” ํ”Œ๋Ÿฌ๊ทธ์ธ idangerous.swiper.js pagination ์Šคํƒ€์ผ ๋ณ€๊ฒฝํ•˜๊ธฐ ์„œ๋ก  ๋ชจ๋ฐ”์ผ ์›น ๊ฐœ๋ฐœ์—์„œ ์Šฌ๋ผ์ด๋“œ ๊ธฐ๋Šฅ์€ ๋งค์šฐ ์ค‘์š”ํ•ฉ๋‹ˆ๋‹ค. idangerous.swiper.js ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ๋ชจ๋ฐ”์ผ์—์„œ ํ„ฐ์น˜ ์ œ์Šค์ฒ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์Šฌ๋ผ์ด๋“œ๋ฅผ ํŽธ๋ฆฌํ•˜๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ํ›Œ๋ฅญํ•œ ๋„๊ตฌ ์ค‘ ํ•˜๋‚˜์ž…๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด ํ”Œ๋Ÿฌ๊ทธ์ธ์˜ ํŽ˜์ด์ง• ๊ธฐ๋Šฅ์€ ์ˆซ์ž๋‚˜ ๋ถˆ๋ฆฟ ํ˜•ํƒœ๋กœ๋งŒ ์ œ๊ณต๋˜์–ด, ํ…์ŠคํŠธ ๋ฌธ์žฅ์œผ๋กœ ํŽ˜์ด์ง€๋„ค์ด์…˜์„ ํ‘œํ˜„ํ•˜๊ธฐ ์–ด๋ ต์Šต๋‹ˆ๋‹ค. ์ด์— ๋Œ€์‘ํ•˜๊ธฐ ์œ„ํ•ด ํ…์ŠคํŠธ ๋ฌธ์žฅ์„ ํŽ˜์ด์ง• ์ฒ˜๋ฆฌํ•˜๋Š” ๊ผผ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ ค ํ–ˆ์œผ๋ฉฐ, ์ฒ˜์Œ์—๋Š” ๋Œ€๋žต 6~8๊ฐœ์˜ ํŽ˜์ด์ง€๋ฅผ ํ‘œ์‹œํ•˜๋„๋ก ์„ค์ •ํ•˜์˜€์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ๋””์ž์ด๋„ˆ์˜ ์š”์ฒญ์œผ๋กœ 10๊ฐœ์˜ ํŽ˜์ด์ง€๊ฐ€ ๋“ฑ๋ก๋˜์—ˆ์„ ๋•Œ ์ดˆ๋ฐ˜ 6๊ฐœ๋งŒ ๋ณด์ด๊ณ , ๋‚˜๋จธ์ง€๋Š” ๋‹ค์Œ ํŽ˜์ด์ง€์—์„œ ๋ณด์ด๋„๋ก ์ฒ˜๋ฆฌํ•ด์•ผ ํ–ˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฌ.. 2023. 9. 7.
jquery .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•œ ์š”์†Œ ์ด๋™๊ณผ ์ •๋ ฌ jquery .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•œ ์š”์†Œ ์ด๋™๊ณผ ์ •๋ ฌ ์†Œ๊ฐœ ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” jQuery์˜ .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ์š”์†Œ๋ฅผ ์ด๋™ํ•˜๋ฉด์„œ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ํŠนํžˆ, ๋ถ€์„œ๋‚˜ ํŠธ๋ฆฌ ๊ตฌ์กฐ์˜ ๋ชฉ๋ก์—์„œ ํŠน์ • ์š”์†Œ๋ฅผ ์„ ํƒํ•˜์—ฌ ๋‹ค๋ฅธ ๋ชฉ๋ก์œผ๋กœ ์ด๋™ํ•œ ํ›„, ํ•ด๋‹น ๋ชฉ๋ก์„ ์ •๋ ฌํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ๋‹ค๋ฃฐ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ์ƒํ™ฉ ์„ค์ • ๊ฐ€์ •ํ•ด๋ด…์‹œ๋‹ค. ์—ฌ๋Ÿฌ ๋ถ€์„œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ชฉ๋ก์ด ์žˆ๊ณ , ์šฐ๋ฆฌ๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ์„ ํƒํ•œ ๋ถ€์„œ๋ฅผ ๋‹ค๋ฅธ ๋ชฉ๋ก์œผ๋กœ ์ด๋™์‹œํ‚จ ํ›„, ๊ทธ ๋ชฉ๋ก์„ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ ฌํ•˜๊ณ ์ž ํ•ฉ๋‹ˆ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด, '๋””์ง€ํ„ธ ๋ฏธ๋””์–ด' ํŒ€๋“ค์˜ ๋ชฉ๋ก์„ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ๋จผ์ € ๋ณต์‚ฌ ์ด๋™์€ ํด๋ฆญ ์ด๋ฒคํŠธ ๋ฐœ์ƒ๊ณผ ๋™์‹œ์— .appendTo() ํ•จ์ˆ˜๋กœ ์ด๋™๋œ๋‹ค. ์ด ์˜ˆ์‹œ์—์„œ๋Š” jQuery์˜ .sort() ํ•จ์ˆ˜๋ฅผ ํ™œ์šฉํ•˜์—ฌ ๋ถ€์„œ ์ด๋™๊ณผ ์†ŒํŠธ.. 2023. 9. 1.
์—‘์…€ ์›Œํฌ์‹œํŠธ ๋ณดํ˜ธ ํ•ด์ œ ์—‘์…€ ์›Œํฌ์‹œํŠธ ๋ณดํ˜ธ ํ•ด์ œ ๋ณด์•ˆ ๊ฐ•ํ™”๋ฅผ ํ†ตํ•œ ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ์˜ ์•ˆ์ „ํ•œ ๊ด€๋ฆฌ ์„œ๋ก  Microsoft Excel์€ ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ์™€ ์ •๋ณด๋ฅผ ๊ด€๋ฆฌํ•˜๋Š” ๋ฐ ๋„๋ฆฌ ์‚ฌ์šฉ๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ์ด๋Ÿฌํ•œ ๋ฐ์ดํ„ฐ๊ฐ€ ๋ฌด๋‹จ์œผ๋กœ ์ˆ˜์ •๋˜๋Š” ๊ฒƒ์„ ๋ฐฉ์ง€ํ•˜๋ ค๋ฉด ์›Œํฌ์‹œํŠธ ์ˆ˜์ค€์—์„œ ๋ณด์•ˆ์„ ๊ฐ•ํ™”ํ•  ํ•„์š”๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ธ”๋กœ๊ทธ ํฌ์ŠคํŠธ์—์„œ๋Š” ์›Œํฌ์‹œํŠธ ๋ณดํ˜ธ ์„ค์ •๊ณผ ํ•ด์ œ์— ๋Œ€ํ•œ ๋‹จ๊ณ„๋ณ„ ์•ˆ๋‚ด๋ฅผ ์ œ๊ณตํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ๋ฐ์ดํ„ฐ์˜ ์•ˆ์ „ํ•œ ๊ด€๋ฆฌ๋ฅผ ์œ„ํ•œ ํ•„์ˆ˜์ ์ธ ๋‚ด์šฉ๋“ค์„ ์‚ดํŽด๋ณด๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค. ์›Œํฌ์‹œํŠธ ๋ณดํ˜ธ ์„ค์ •ํ•˜๊ธฐ ์ค‘์š”ํ•œ ๋ฐ์ดํ„ฐ์˜ ๋ฌด๋‹จ ์ˆ˜์ •์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์›Œํฌ์‹œํŠธ ์ˆ˜์ค€์—์„œ ํŠน์ • ๋ถ€๋ถ„์— ๋Œ€ํ•œ ํŽธ์ง‘ ๊ถŒํ•œ์„ ์ œํ•œํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜์˜ ๋‹จ๊ณ„๋ฅผ ๋”ฐ๋ผ ์ง„ํ–‰ํ•ด๋ณด์„ธ์š”. Excel ํŒŒ์ผ์„ ์—ด๊ณ  ๋ณดํ˜ธํ•  ์›Œํฌ์‹œํŠธ ํƒญ์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ๋‹ค๋ฅธ ์‚ฌ์šฉ์ž๊ฐ€ ํŽธ์ง‘ ๊ฐ€๋Šฅํ•œ ์…€์„ ์„ ํƒํ•ฉ๋‹ˆ๋‹ค. ํ•„์š”ํ•œ .. 2023. 8. 31.
vscode scss compiler sass ์‚ฌ์šฉํ•˜๋Š”๋ฒ• .mapํŒŒ์ผ์ด ์ƒ์„ฑ๋˜์ง€ ์•Š๊ฒŒ ์„ค์ • vscode scss compiler VSCode์—์„œ SCSS ์ปดํŒŒ์ผ ๋ฐ .map ํŒŒ์ผ ์ƒ์„ฑ ๋ฐฉ์ง€ ์„ค์ • ๋ถ€์ œ: ๊ฐ„ํŽธํ•˜๊ฒŒ SCSS๋ฅผ ์ปดํŒŒ์ผํ•˜๊ณ  .map ํŒŒ์ผ์„ ์ƒ์„ฑํ•˜์ง€ ์•Š๋Š” ๋ฐฉ๋ฒ• ์•ˆ๋…•ํ•˜์„ธ์š”, ์—ฌ๋Ÿฌ๋ถ„! ์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” Visual Studio Code(VSCode)์—์„œ SCSS(Sassy CSS)๋ฅผ ๊ฐ„ํŽธํ•˜๊ฒŒ ์ปดํŒŒ์ผํ•˜๊ณ , ๋ถˆํ•„์š”ํ•œ .map ํŒŒ์ผ ์ƒ์„ฑ์„ ๋ฐฉ์ง€ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์ฝ”๋“œ ์ž‘์„ฑ ํ™˜๊ฒฝ์„ ๋”์šฑ ํšจ์œจ์ ์œผ๋กœ ๋งŒ๋“ค์–ด๋ณด์„ธ์š”. ํ•„์š”ํ•œ ํ™•์žฅ(extension) ๋‹ค์Œ๊ณผ ๊ฐ™์€ ํ™•์žฅ ํ”„๋กœ๊ทธ๋žจ์„ ์„ค์น˜ํ•˜๋ฉด SCSS ์ปดํŒŒ์ผ ๋ฐ .map ํŒŒ์ผ ๊ด€๋ฆฌ๊ฐ€ ํ›จ์”ฌ ๊ฐ„ํŽธํ•ด์ง‘๋‹ˆ๋‹ค. Sass Sass Lint Live Sass Compiler Live Server ์ด์ œ ์ค€๋น„๊ฐ€ ๋˜์…จ๋‹ค๋ฉด, ์‹œ์ž‘ํ•ด๋ด…์‹œ๋‹ค! SCSS ํŒŒ์ผ ์ปดํŒŒ์ผํ•˜๊ธฐ .. 2023. 8. 30.