Banner

My Tech Blog (์†์„ฑ)

ํƒ์ƒ‰์„ ํƒ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๊ธฐ๋ณธ ์„ ํƒ์ž๋กœ ์„ ํƒํ•œ ์š”์†Œ ์ค‘ ์›ํ•˜๋Š” ์š”์†Œ๋ฅผ ํ•œ ๋ฒˆ ๋” ํƒ์ƒ‰ํ•ด์„œ ์ข€ ๋” ์ •ํ™•ํ•˜๊ฒŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ๋‹ค. ๋Œ€ํ‘œ์ ์ธ ์˜ˆ๋กœ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•ด์„œ ์„ ํƒํ•˜๋Š” `์œ„์น˜ํƒ์ƒ‰ ์„ ํƒ์ž`์™€ ๋ฐฐ์—ด์— ๋‹ด๊ฒจ์ง„ ์š”์†Œ ์ค‘ ์ง€์ •๋œ ์†์„ฑ๊ณผ ๊ฐ’์œผ๋กœ ์„ ํƒํ•˜๋Š” `์†์„ฑ ํƒ์ƒ‰ ์„ ํƒ์ž`๊ฐ€ ์žˆ๋‹ค.  1. ์œ„์น˜ ํƒ์ƒ‰ ์„ ํƒ์ž โ–ผ๊ธฐ๋ณธ ์„ ํƒ์ž๋กœ ์„ ํƒํ•œ ์š”์†Œ๋Š” ๋ฐฐ์—ด์— ๋‹ด๊ธฐ๊ฒŒ ๋œ๋‹ค.๊ทธ๋ž˜์„œ ๋ฐฐ์—ด์˜ ์ธ๋ฑ์Šค๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ํŠน์ • ์š”์†Œ๋ฅผ ์ข€ ๋” ์ •ํ™•ํ•˜๊ฒŒ ์„ ํƒํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด๋‹ค. ์ข…๋ฅ˜์šฉ๋ฒ•์„ค๋ช…$("์š”์†Œ ์„ ํƒ:first")$("์š”์†Œ ์„ ํƒ").first()$("li:first")$("li").first()์ „์ฒด ์š”์†Œ ์ค‘ ์ฒซ๋ฒˆ์งธ ์š”์†Œ๋งŒ ์„ ํƒ$("์š”์†Œ ์„ ํƒ:last")$("์š”์†Œ ์„ ํƒ").last()$("li:last")$("li").last()์ „์ฒด ์š”์†Œ ..
์ด๋ฒˆ ํฌ์ŠคํŒ… ์„ค๋ช…์€ ์ œ๊ฐ€ ์ž‘์„ฑํ–ˆ์œผ๋‚˜ ์ด๋ฏธ์ง€๋Š” ๋‹ค๋ฅธ ๊ณณ์—์„œ ์ž˜ ๊ทธ๋ ค์ง„ ๊ฒƒ๋“ค์„ ๊ฐ€์ ธ์™”์Šต๋‹ˆ๋‹ค.์ด๋ฏธ์ง€๋งˆ๋‹ค ์ถœ์ฒ˜ ํ‘œ๊ธฐํ–ˆ์Šต๋‹ˆ๋‹ค :)  ์—ฌ๊ธฐ ๊ฐ€์‹œ๋ฉด flex ์š”์†Œ๋“ค์„ ์ง์ ‘ ํด๋ฆญํ•ด ๋ณด๋ฉด์„œ ํ™”๋ฉด ๋ ˆ์ด์•„์›ƒ์„ ํ™•์ธํ•ด ๋ณผ ์ˆ˜ ์žˆ์–ด์š”. flex-shrink - CSS: Cascading Style Sheets | MDNThe flex-shrink CSS property sets the flex shrink factor of a flex item. If the size of all flex items is larger than the flex container, the flex items can shrink to fit according to their flex-shrink value. Each flex line's negati..
๋ธ”๋กœ๊ทธ ๊พธ๋ฏธ๊ธฐ ํ•˜๋ฉด์„œ ๊ฐ„๋‹จํ•œ ๋ฎค์ง ํ”Œ๋ ˆ์ด์–ด๋ฅผ ๋งŒ๋“ค์—ˆ๋‹ค. ์Œ์•…์ด ์žฌ์ƒ ์ค‘์ผ ๋•Œ๋งŒ ํ˜„์žฌ ํ”Œ๋ ˆ์ด์ค‘์ธ ์Œ์•… ์ •๋ณด๋ฅผ ํ‘œ์‹œํ•˜๋Š” ์ฝ”๋“œ ์–ด๋–ป๊ฒŒ ์งฐ๋Š”์ง€ ๊ฐ„๋‹จํžˆ ์˜ฌ๋ ค ๋ณธ๋‹ค. ํ”Œ๋ ˆ์ด ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ธฐ ์ „๊นŒ์ง€๋Š” `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. form ํƒœ๊ทธencrype์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ๊ฐ’ "name", "method", "actioin", "encrype" ํŒŒ์ผ์ด๋‚˜ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ๊ฐ€ ์žˆ๋Š” ํผ์€ ๋ฐ˜๋“œ์‹œ enctype="multipart/from-data" ์ด ํƒ€์ž…์œผ๋กœ ์ง€์ •์„ ํ•ด์•ผ ํŒŒ์ผ ์—…๋กœ๋“œ(์ „์†ก)์ด ๋œ๋‹ค. ๊ทธ๋ž˜์•ผ ์„œ๋ฒ„์— ํŒŒ์ผ์„ ์ €์žฅํ•ด์„œ ์ฒ˜๋ฆฌ ํ•  ์ˆ˜ ์žˆ๋‹ค.    ๋ณด์•ˆ๋•Œ๋ฌธ์— ์ž๋™์™„์„ฑ์ด๋‚˜ ์ž…๋ ฅ ๊ฐ’ ์ฒดํฌ๋ฅผ ํ•˜์ง€ ์•Š๋„๋ก ํ•˜๋ ค๋ฉด qutocomoplete="off" ํผ ์†์„ฑ๊ณผ "novalidate" ์†์„ฑ ์‚ฌ์šฉ + +  2. input ํƒœ๊ทธplaceholder="ํ…์ŠคํŠธ"์ž…๋ ฅ ํ•„๋“œ์— ์˜ˆ์ƒ๋˜๋Š” ์ถ”์ฒœ ๊ฐ’์„ ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ•˜๋Š” ์šฉ๋„ ํƒœ๊ทธ ํฌ์ปค์Šค ๋˜๋ฉด ์‚ฌ๋ผ์ง readonly์ฝ๊ธฐ ์ „์šฉ. ์ž…๋ ฅํ•„๋“œ๊ฐ€ ์‚ฌ์šฉ์ž ์ž…๋ ฅ ๋ถˆ๊ฐ€ํ•œ ์ƒํƒœ๊ฐ€ ๋จ. ..
๋‚ด๊ฐ€ ๋ณผ๋ ค๊ณ  ์ •๋ฆฌํ•จ1. ์—”ํ„ฐํ‹ฐ์˜ ํŠน์ง• ๋‹ค์Œ ์ค‘ ์—”ํ„ฐํ‹ฐ๊ฐ€ ๊ฐ–๋Š” ํŠน์ง•์œผ๋กœ ์ ํ•ฉํ•˜์ง€ ์•Š์€ ๊ฒƒ์€? - ๋‹ค๋ฅธ ์—”ํ„ฐํ‹ฐ์™€ 1๊ฐœ ์ด์ƒ์˜ ๊ด€๊ณ„๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค- ๋ฐ˜๋“œ์‹œ ์†์„ฑ์„ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.- `1๊ฐœ ์ด์ƒ`์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค. => 2๊ฐœ- ์œ ๋‹ˆํฌํ•จ์„ ๋ณด์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์‹๋ณ„์ž๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค. ํ•œ ๊ฐœ์˜ ์—”ํ„ฐํ‹ฐ๋Š” ๋‘ ๊ฐœ ์ด์ƒ์˜ ์ธ์Šคํ„ด์Šค๋ฅผ ๊ฐ–๋Š”๋‹ค.ํ•œ ๊ฐœ์˜ ์ธ์Šคํ„ด์Šค๋Š” ๋‘ ๊ฐœ ์ด์ƒ์˜ ์†์„ฑ์„ ๊ฐ–๋Š”๋‹ค.ํ•œ ๊ฐœ์˜ ์†์„ฑ์€ ํ•˜๋‚˜์˜ ์†์„ฑ ๊ฐ’์„ ๊ฐ–๋Š”๋‹ค.  ์—”ํ„ฐํ‹ฐ : ํ…Œ์ด๋ธ” ์ „์ฒด (์˜ˆ: `๊ณ ๊ฐํ…Œ์ด๋ธ”`)์ธ์Šคํ„ดํŠธ : ํ–‰ (์˜ˆ: `๊ณ ๊ฐ 1๋ช…`)์†์„ฑ : ์—ด (์˜ˆ: ๊ณ ๊ฐ์˜ `์ด๋ฆ„`,`์ „ํ™”๋ฒˆํ˜ธ`,`์ฃผ์†Œ`)2. ๊ธฐ๋ณธ ์—”ํ„ฐํ‹ฐ, ์ค‘์‹ฌ ์—”ํ„ฐํ‹ฐ, ํ–‰์œ„ ์—”ํ„ฐํ‹ฐ๋ฐœ์ƒ์‹œ์ ์— ๋”ฐ๋ฅธ ๋ถ„๋ฅ˜`๊ธฐ๋ณธ ์—”ํ„ฐํ‹ฐ`๋Š” ๋…๋ฆฝ์ ์œผ๋กœ ์ƒ์„ฑ๋˜์–ด ์ž์‹ ๋งŒ์˜ ์ฃผ์‹๋ณ„์ž๋ฅผ ๊ฐ€์ง€๋ฉฐ ๋‹ค..
์ธ์ ˆ๋ฏธ์˜€๋˜๊ฒƒ
'์†์„ฑ' ํƒœ๊ทธ์˜ ๊ธ€ ๋ชฉ๋ก
์ƒ๋‹จ์œผ๋กœ