Banner

My Tech Blog (๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๊ฐ„๋‹จํžˆ ํฌ์ŠคํŒ…ํ•˜๋ ค๊ณ  ์‹ฌํ”Œํ•œ To Do List๋ฅผ ๋งŒ๋“ค์–ด ๋ณด์•˜๋‹ค!    1. ๊ตฌ๊ธ€ํฐํŠธ, ์Šคํƒ€์ผ์‹œํŠธ, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—ฐ๊ฒฐ- `style.css`์™€ `script.js` ์—ฐ๊ฒฐ- ๊ตฌ๊ธ€ ํฐํŠธ `Poppins`  ์‚ฌ์šฉํ•˜๊ธฐ ์œ„ํ•ด์„œ Embed Code๋ฅผ 2.  ์ „์ฒด  ์ ์šฉ๋  css ์„ค์ • & container์— ๋ฐฐ๊ฒฝ ์ถ”๊ฐ€โšก  ํฐํŠธ๋Š” ๊ตฌ๊ธ€ ํฐํŠธ `Poppins` ๋กœ ์„ค์ • โšก `box-sizing: border-box;`์š”์†Œ์˜ ํฌ๊ธฐ๋ฅผ ๊ณ„์‚ฐํ•  ๋•Œ `ํŒจ๋”ฉ(padding)`๊ณผ `ํ…Œ๋‘๋ฆฌ(border)`๊นŒ์ง€ ํฌํ•จํ•˜๋„๋ก ์„ค์ •ํ•˜๋Š” ์†์„ฑ. ๊ธฐ๋ณธ์ ์œผ๋กœ CSS์—์„œ box-sizing์˜ ๊ธฐ๋ณธ๊ฐ’์€ `content-box`์ด๋‹ค. `content-box`๋Š” ์š”์†Œ์˜ `width`์™€ `height`๊ฐ€ ์ฝ˜ํ…์ธ  ์˜์—ญ..
๋ธ”๋กœ๊ทธ ๊พธ๋ฏธ๊ธฐ ํ•˜๋ฉด์„œ ๊ฐ„๋‹จํ•œ ๋ฎค์ง ํ”Œ๋ ˆ์ด์–ด๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ์Œ์•…์ด ์žฌ์ƒ ์ค‘์ผ ๋•Œ๋งŒ ํ˜„์žฌ ํ”Œ๋ ˆ์ด์ค‘์ธ ์Œ์•… ์ •๋ณด๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์ฝ”๋“œ ์–ด๋–ป๊ฒŒ ์งฐ๋Š”์ง€ ๊ฐ„๋‹จํžˆ ์˜ฌ๋ ค ๋ณธ๋‹ค. ํ”Œ๋ ˆ์ด ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ธฐ ์ „๊นŒ์ง€๋Š” `Title` ๊ณผ `Progress Bar` ์ด ์ˆจ๊ฒจ์ ธ ์žˆ๋‹ค๊ฐ€ ๊ณก์ด ์žฌ์ƒ๋˜๋ฉด ์ œ๋ชฉ๊ณผ ํ”„๋กœ๊ทธ๋ ˆ์Šค๋ฐ”๊ฐ€ ํ”Œ๋ ˆ์ด์–ด ์œ„๋กœ ๋ถ€๋“œ๋Ÿฝ๊ฒŒ ๋‚˜ํƒ€๋‚˜๋Š” ์ฝ”๋“œ์ด๋‹ค. โšก music-info ํด๋ž˜์Šค CSS ์ฝ”๋“œ์Œ์•… ์žฌ์ƒ ์ „(๊ธฐ๋ณธ์ƒํƒœ).music-body .music-container .music-info { opacity: 0; /* ํˆฌ๋ช…๋„ 100%๋กœ ํ™”๋ฉด์—์„œ์ˆจ๊ฒจ์ง */ transform: translateY(100%); /* (์ˆ˜์ง ๋ฐฉํ–ฅ) ์ž๊ธฐ ์ž์‹  ๋†’์ด๋งŒํผ ์•„๋ž˜๋กœ ์ด๋™ */ transition: transform 0.3s ease-in..
๐Ÿ“‘ 1. ๋ฌธ์ œ์„ค๋ช…๐Ÿ’ก 2. ์ ‘๊ทผ๋ฐฉ์‹๋ฌธ์ œ์—์„œ ์ฃผ์–ด์ง„ ๊ฒƒn : ์ „์ฒด ํ•™์ƒ์˜ ์ˆ˜lost : ์ฒด์œก๋ณต ๋„๋‚œ๋‹นํ•œ ํ•™์ƒ๋“ค์˜ ๋ฒˆํ˜ธ๋“ค  (๋ฐฐ์—ด) reserve : ์—ฌ๋ฒŒ ๊ฐ€์ ธ์˜จ ํ•™์ƒ ๋ฒˆํ˜ธ๋“ค (๋ฐฐ์—ด)์ฒด์œก๋ณต์€ ์•ž,๋’ค ๋ฒˆํ˜ธ ํ•™์ƒ ์—๋งŒ ๋นŒ๋ ค์ค„ ์ˆ˜ ์žˆ์Œ.๋„๋‚œ ๋‹นํ•œ ํ•™์ƒ๋“ค์€ ์—ฌ๋ถ„์ด ์—†์–ด์„œ ์ฒด์œก๋ณต ๋นŒ๋ ค์ค„ ์ˆ˜ ์—†์Œ.1. `lost`์™€ `reserve` ๋ฐฐ์—ด ์ •๋ ฌ 2. ์ฒด์œก์ˆ˜์—…์— ์ฐธ์—ฌํ•  ์ˆ˜ ์žˆ๋Š” ํ•™์ƒ์˜ ์ˆ˜ = ์ฒด์œก๋ณต์ด ์žˆ๊ฑฐ๋‚˜ ๋นŒ๋ฆด ์ˆ˜ ์žˆ๋Š” ํ•™์ƒ๋“ค์˜ ์ˆ˜ `์ฒด์œก๋ณต์„ ๋„๋‚œ ๋‹นํ•˜์ง€ ์•Š์€ ํ•™์ƒ์˜ ์ˆ˜` + `๋„๋‚œ๋‹นํ–ˆ์ง€๋งŒ ์˜ˆ๋น„๋กœ ๋“ค๊ณ  ์˜จ ํ•™์ƒ์˜ ์ˆ˜` + `๋„๋‚œ๋‹นํ–ˆ์ง€๋งŒ ์ฒด์œก๋ณต์„ ๋นŒ๋ฆด ์ˆ˜ ์žˆ๋Š” ํ•™์ƒ์˜ ์ˆ˜`์ด ๋ชจ๋“  ํ•™์ƒ๋“ค์˜ ์ˆ˜๋ฅผ ๋ˆ„์ ํ•ด์„œ answer ๋ณ€์ˆ˜์— ๋‹ด์•„ ์ค€๋‹ค.  โœ… ์ฒด์œก๋ณต์„ ๋„๋‚œ ๋‹นํ•˜์ง€ ์•Š์€ ํ•™์ƒ์˜ ์ˆ˜= ์ „์ฒด ํ•™์ƒ์˜ ์ˆ˜ - ์ฒด์œก๋ณต์„ ๋„๋‚œ๋‹นํ•œ ํ•™..
โœ… ๋ฌธ์ œํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ๋ฌธ์ œ๋ฅผ ์ดํด๋ฆฝ์Šค์—์„œ ํ’€๋˜ ์ค‘ ๋ฐฐ์—ด๋ช…์„ ์ž˜๋ชป๋ด์„œ reserve๋ฅผ reverse๋ผ๊ณ  ์ž…๋ ฅํ•ด ๋ฒ„๋ฆผ์ดํด๋ฆฝ์Šค์—์„œ ๋ฌธ์ž์—ด ์ผ๊ด„ ํ•œ๋ฒˆ์— ์น˜ํ™˜ํ•˜๋Š” ๋ฒ• (์Šค์ฝ”ํ”„ ์ค‘์š”ํ•จ)โœ… ํ•ด๊ฒฐ๋ฒ•1. `Ctrl` + `H`๋กœ `Search` ์ฐฝ ๋„์šฐ๊ธฐ > `File Search` > `Containing text`์— ์ฐพ์„ ๋ฌธ์ž์—ด ์ž…๋ ฅ > `Scope` (๋ฒ”์œ„ ์„ค์ •) ์—์„œ ํ˜„์žฌํŒŒ์ผ๋งŒ ๋ณ€๊ฒฝํ•  ๊ฒƒ์ธ์ง€, ์—ด๋ฆฐ ํŒŒ์ผ ๋ชจ๋‘ ๋ณ€๊ฒฝํ•  ๊ฒƒ์ธ์ง€, ์—ฐ๊ฒฐ๋œ ์ „์ฒด ํŒŒ์ผ์—์„œ ํ•ด๋‹น ๋ฌธ์ž์—ด์„ ๋ชจ๋‘ ์น˜ํ™˜ํ•  ๊ฒƒ์ธ์ง€ ์„ ํƒ ํ•ด ์ค€๋‹ค > `Replace` ์—ฌ๊ธฐ์„œ ์ฃผ์˜ํ•  ์ ์€ `Scope` ์„ค์ •์„ ์ž˜ ํ•ด์•ผ ํ•œ๋‹ค๋Š” ๊ฒƒ!`Workspace`๋กœ ์ฒดํฌํ•˜๋ฉด ํ˜„์žฌ ์ดํด๋ฆฝ์Šค์— ์—ฐ๊ฒฐ๋œ ๋ชจ๋“  ํŒŒ์ผ์—์„œ ๊ฐ™์€ ๋ฌธ์ž๋ฅผ ๋‹ค ์น˜ํ™˜ํ•ด ๋ฒ„๋ฆฐ๋‹ค. `Files opened in edito..
โš ๏ธ๋ฌธ์ œEclipse ๋ฐ”๋กœ๊ฐ€๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ์‹œ Launcher ์‹คํ–‰์ด ๋˜์ง€ ์•Š์Œ. ์—๋Ÿฌ ๋ฉ”์„ธ์ง€ The Eclipse executable launcher was unable to locate i ts companion shared liabray. ํ•„์ž๋Š” ํ•ด๋‹น ๋ฌธ์ œ๋ฅผ ๋‘ ๋ฒˆ ๊ฒช์—ˆ๋Š”๋ฐ, ์ฒซ ๋ฒˆ์งธ ํ•ด๊ฒฐ ๋ฐฉ๋ฒ•๋Œ€๋กœ ํ•ด๋ณด์•˜์œผ๋‚˜ ์ด๋ฒˆ์—๋Š” ํ•ด๊ฒฐ์ด ๋˜์ง€ ์•Š์•„์„œ ๋‹ค๋ฅธ ๋ฐฉ๋ฒ•์œผ๋กœ ํ•ด๊ฒฐํ•ด ์ฃผ์—ˆ์Šต๋‹ˆ๋‹ค. ์ €๋ฒˆ์—๋Š” `eclipse.ini` ํŒŒ์ผ์˜ `-vm` ๊ฒฝ๋กœ (jvm๊ฒฝ๋กœ) ๊ฐ€ ์ž˜๋ชป ์ง€์ •๋˜์–ด ํ•ด๋‹น ๋ถ€๋ถ„๋งŒ์„ ์ˆ˜์ •ํ•ด ์ฃผ๋‹ˆ ๋‹จ์ˆœํžˆ ํ•ด๊ฒฐ์ด ๋˜์—ˆ์Šต๋‹ˆ๋‹ค. ์ด ๋ฌธ์ œ๊ฐ€ ์ผ์–ด๋‚˜๋Š” ์ด์œ ๋Š” ํฌ๊ฒŒ ๋‘ ๊ฐ€์ง€ ์ž…๋‹ˆ๋‹ค. 1. ๋‹จ์ˆœํžˆ eclipse.ini ์—์„œ ๊ฒฝ๋กœ๊ฐ€ ์ž˜๋ชป๋˜์—ˆ์Œ. (ํ•„์ž์˜ ๊ฒฝ์šฐ ์ฒซ๋ฒˆ์งธ ์—๋Ÿฌ๋Š” ์ด๊ฒŒ ์›์ธ) 2. ์‹คํ–‰ํŒŒ์ผ ์ž์ฒด๊ฐ€ ์‚ญ์ œ๋˜๊ฑฐ๋‚˜ ์†์ƒ..
โš ๏ธ๋ฌธ์ œ ์˜ค๋žœ๋งŒ์— VSCode๋ฅผ ๋“ค์–ด์™”๋”๋‹ˆ Git ํ™•์žฅ ํƒญ์— ์•„๋ž˜์™€ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒToo many changes were detected.Only the first 10000 changeds will be shown below. ํ•ด์„๋„ˆ๋ฌด ๋งŽ์€ ๋ณ€๊ฒฝ์ด ์žˆ์Šต๋‹ˆ๋‹ค.์ฒซ๋ฒˆ์งธ 10000๊ฐœ์˜ ๋ณ€ํ™”๋งŒ ์•„๋ž˜ ๋ณด์—ฌ๋“œ๋ฆฝ๋‹ˆ๋‹ค.  ์ด๊ฑด ์˜ค๋ฅ˜๋ผ๊ณ  ํ•˜๊ธฐ๋„ ๊ทธ๋ ‡๊ณ  ์ฝ”๋“œ๋ฅผ ์งœ๋Š”๋ฐ ์ง€์žฅ์€ ์—†์ง€๋งŒ, ์‹ ๊ฒฝ ์“ฐ์—ฌ์„œ ๋นจ๋ฆฌ ํ•ด๊ฒฐํ•˜๊ณ  ์‹ถ์€ ๋ถ„๋“ค์ด ๊ณ„์‹ค ๊ฑฐ๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค. ์ด๊ฑธ ์ž˜๋ชป ์†๋Œ€๋ฉด ์ปดํ“จํ„ฐ์˜ ํŒŒ์ผ์ด๋‚˜ ํด๋” ๋“ฑ์„ ๋‚ ๋ ค ๋ฉ˜๋ถ•์— ๋น ์ง€๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. git clean ํ•จ๋ถ€๋กœ ํ•˜์‹œ๋ฉด ์•ˆ๋ผ์š”. ํŠนํžˆ ์ €๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” VSCode์—์„œ ํ•ด๋‹น ๊ฒฝ๊ณ ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ ค๊ณ  ํ•  ๋•Œ๋งˆ๋‹ค ์ดํด๋ฆฝ์Šค ๊ฒฝ๋กœ๊ฐ€ ํ‹€์–ด์ ธ์„œ Eclipse Launcher์— ์ ‘์†ํ•  ์ˆ˜ ์—†๋Š” ๋ฌธ์ œ๊ฐ€ ๋’ค๋”ฐ๋ผ ์˜ต..
โœ… session ๊ด€๋ฆฌโœ… logout.jspโœ… main.jsp ๋งŒ๋“ค๊ธฐ ์ง€๊ธˆ๊นŒ์ง€ ํšŒ์›๊ฐ€์ž…, ๋กœ๊ทธ์ธ ๊ธฐ๋Šฅ๊นŒ์ง€ ๊ตฌํ˜„ํ•ด๋ณด์•˜๋‹ค.์ด์ œ ์„ธ์…˜ ๊ด€๋ฆฌ๋ฅผ ํ•ด ๋ณด์ž. `session` ์ด๋ž€ ํ˜„์žฌ ์ ‘์†ํ•œ ํšŒ์›์—๊ฒŒ ํ• ๋‹นํ•ด์ฃผ๋Š” ๊ณ ์œ ํ•œ ์•„์ด๋””์ด๋‹ค.๋กœ๊ทธ์ธ์— ์„ฑ๊ณตํ•œ ํšŒ์›์—๊ฒŒ ๊ฐ๊ฐ `session`์„ ๋ถ€์—ฌํ•ด์ฃผ๋Š” ๊ณผ์ •์„ ๊ตฌํ˜„ํ•ด๋ณด์ž. `loginAction.jsp`์— `session`์„ ์„ค์ •ํ•ด์ฃผ๋Š” `session.setAttribute()` ์ฝ”๋“œ ํ•œ ์ค„ ํƒ€์ดํ•‘!`joinAction.jsp`์—๋„ ์ฝ”๋“œ ๋ณต๋ถ™ํ•ด์„œ ๋„ฃ์–ด ์ค€๋‹ค.๋กœ๊ทธ์ธ ์„ฑ๊ณตํ•œ ํšŒ์›์—๊ฒŒ ์„ธ์…˜ ๋ถ€์—ฌํ•˜๊ณ  ๋ฉ”์ธ ํŽ˜์ด์ง€๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ๋” ํ•ด ์ค€๋‹ค. ์ด๋ ‡๊ฒŒ ์„ธ์…˜์„ ์„ค์ •ํ•ด ์ฃผ์—ˆ๋‹ค. ์„ธ์…˜์€ ํ•ด์ œ ํ•˜๊ธฐ ์ „๊นŒ์ง€๋Š” ์œ ํšจํ•˜๊ธฐ ๋•Œ๋ฌธ์— ํ• ๋‹นํ•œ ์„ธ์…˜์„ ํ•ด์ œํ•  ์ˆ˜ ์žˆ๋Š” ๋กœ๊ทธ์•„์›ƒ ํŽ˜์ด์ง€๋„ ๋งŒ๋“ค์–ด ์ฃผ์ž. `joinAc..
โšก1. Main ์˜์—ญ ์›๋ž˜ ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ์กด ์Šคํ‚จ ํ˜„์žฌ ์ปค์Šคํ…€ ์ƒํ™ฉ ์ „์ฒด ๋ทฐ Dark ๋ชจ๋“œ  Light ๋ชจ๋“œ โœ… ์˜ค๋Š˜์˜ ๋ช…์–ธ(๋žœ๋ค๋ช…์–ธ) ์‚ฝ์ž…๋ช…์–ธ์€ ํผ์™”์œผ๋‚˜ HTML/CSS๋Š” ์ง์ ‘ ์ปค์Šคํ…€ํ•จโœ… Header ์ด๋ฏธ์ง€ ๋ณ€๊ฒฝ๋ณ€๊ฒฝ์ „๊ธฐ์กด์—๋Š” ํ”„๋กœํ•„ ์‚ฌ์ง„์ด ๋ฐ˜ํˆฌ๋ช… ํšจ๊ณผ ์ ์šฉ๋˜์–ด ๋ฉ”์ธ ํ—ค๋” ๋ถ€๋ถ„์— ๋„์›Œ์ง. ๋ณ€๊ฒฝํ›„๊ณ ์–‘์ด ์ด๋ฏธ์ง€๋กœ ๋ณ€๊ฒฝ ํ•ด ์ฃผ๊ณ  border-radius  โœ… ์ƒ๋‹จ์— Navigation Bar ์‚ฝ์ž… ํ—ค๋” ์ปค์Šคํ…€์ด ๋๋‚˜๊ณ  ๋‚˜๋‹ˆ ๋ชจ๋ฐ”์ผ ํ™”๋ฉด์—์„œ๋Š” Side๋ฐ”์— hidden์ด๋ผ ์นดํ…Œ๊ณ ๋ฆฌ๋ช…์ด ์•ˆ ๋œฌ๋‹ค.๊ทธ๋ž˜์„œ ์ƒ๋‹จ์— ๋„ค๋น„๊ฒŒ์ด์…˜ ๋ฐ”๋ฅผ ๋‹ฌ์•„์ฃผ๊ธฐ๋กœ ํ–ˆ๋‹ค.   ๋ณ€๊ฒฝ ํ›„ - `Home`, `Algorithm`, `Coding`, `ETC.`, `Visitor` ํƒญ Navigation Bar ๋‹ฌ์•„์คŒ- hover ํ•˜๋ฉด ๊ทธ๋ฆผ์ž ์ƒ๊ธฐ๊ณ , ํฐ..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๊ธ€ ๋ชฉ๋ก (5 Page)
์ƒ๋‹จ์œผ๋กœ