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

๐Ÿ’š UIUX ์›นํผ๋ธ”๋ฆฌ์…” ๊ณผ์ •(6๊ฐœ์›”)175

2021-08-17 (127์ผ์ฐจ) ์ด๋ฉ”์ผ ๋ฐœ์†ก ํผ(FORM), formspree ์‚ฌ์šฉ๋ฐฉ๋ฒ• ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์ œ์ด์ฟผ๋ฆฌ 99๊ฐ• (์ด๋ฉ”์ผ ๋ฐœ์†ก ํผ) https://codepen.io/jangka44/pen/ZEKNxqZ formspree ์‚ฌ์ดํŠธ ์ฃผ์†Œ - ์ด๋ฉ”์ผ ๋ฐœ์†กํผ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• Formspree์‚ฌ์ดํŠธ ํšŒ์›๊ฐ€์ž… ํ›„, ์ด๋ฉ”์ผ ์ธ์ฆ๊นŒ์ง€ ์™„๋ฃŒ new form ํด๋ฆญ form name : ํฌํŠธํด๋ฆฌ์˜ค ์—ฐ๋ฝ์ฒ˜ project : A NEW Project send emails to : ๋‚˜์˜ ์ด๋ฉ”์ผ ์ฃผ์†Œ ↓ html ์ฝ”๋“œ ๋ณต์‚ฌํ•ด์„œ ๋„ฃ์œผ๋ฉด ๋ (label๋ถ€๋ถ„์€ ๊ตณ์ด ํ•„์š” X) - : โ‰’ํŽธ์ง€์ง€ action="๋ฐ›๋Š”์‚ฌ๋žŒ ์ฃผ์†Œ" method="์ „์†ก๋ฐฉ์‹" (post ์ฃผ๋กœ ์‚ฌ์šฉ) - : ํ•œ ์ค„ ์ž…๋ ฅ์ฐฝ (๋‹ซ๋Š”ํƒœ๊ทธ X) type="์ž‘์„ฑ๋ฐฉ์‹" ex) text, email placeholder="์ดˆ๊ธฐ์— ์ž…๋ ฅ๋˜์–ด์žˆ์„ ๋‚ด์šฉ" autofocu.. 2021. 8. 19.
2021-08-16 (126์ผ์ฐจ) SVG LINE ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์™€ ์ œ์ด์ฟผ๋ฆฌ 95๊ฐ•~98๊ฐ• - SVG LINE ์• ๋‹ˆ๋ฉ”์ด์…˜ 2021. 8. 19.
2021-08-15 (125์ผ์ฐจ)ํฌํด ๋””์ž์ธ ์ž‘์—… ์ค‘ - ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ ์ œ์ž‘ ์ค‘ 2021. 8. 18.
2021-08-14 (124์ผ์ฐจ)ํฌํด์‚ฌ์ดํŠธ ๋””์ž์ธ, ์œ ์ฆˆํˆด์ปดํผ๋‹ˆ ๋ชจ์ž‘ - ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ ์ œ์ž‘ ์ค‘ - ์œ ์ฆˆํˆด์ปดํผ๋‹ˆ ๋ชจ์ž‘ ์ด์–ด์„œ ํ•ด๋ณด๊ธฐ - wiken.io ๋ธ”๋กœ๊ทธ ์ž‘์„ฑ 2021. 8. 15.
2021-08-13 (123์ผ์ฐจ)images downloader, ์ด๋ฏธ์ง€ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ• ์›น์ฝ”๋”ฉ 170๊ฐ•~171๊ฐ• (๋ถ€๋ถ„๋ชจ์ž‘ ์ž๋ฃŒ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ•) - ๋ถ€๋ถ„๋ชจ์ž‘ ์ž๋ฃŒ๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ๋ฒ• chorm images downloader ํ™•์žฅํ”„๋กœ๊ทธ๋žจ ๋‹ค์šด๋กœ๋“œ ํ•„์š”๋กœ ํ•˜๋Š” ํ•ด๋‹น ์‚ฌ์ดํŠธ์— ๊ฐ€์„œ ํด๋ฆญ docํด๋”๋ฅผ ๋งŒ๋“  ํ›„ ์‚ฌ์ง„ ๋„ฃ๊ธฐ ๊นƒํ—ˆ๋ธŒ ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ ์ƒ์„ฑ Add a README file โ–  ์ฒดํฌ settings > pages > master, docx > save ๋ฆฌํฌ์ง€ํ„ฐ๋ฆฌ ๋ฉ”์ธํ™”๋ฉด Add file > upload filesํด๋ฆญ > docํด๋” ๋Œ์–ด๋‹ค ๋†“๊ธฐ > commit changes ์—ฌ๊ธฐ์„œ ์ด๋ฏธ์ง€๋ฅผ ๋งํฌ๋กœ ๊ฐ€์ ธ๋‹ค๊ฐ€ ์“ฐ๊ธฐ! (๋Š๋ฆฌ๋‹ค๋Š” ๋‹จ์ ์ด ์žˆ์Œ, but ํ•ด๊ฒฐ์ฑ… ๋‹ค๋ฅธ ์ฃผ์†Œ๋กœ ์‚ฌ์šฉํ•˜๊ธฐ)(์•„์ง ์„ค๋ช…x) 2021. 8. 15.
2021-08-12 (122์ผ์ฐจ)wiken๊ธ€์ž‘์„ฑ1, ํฌํด์ปจํŽŒ, imageloaded์ ์šฉ, svg path์• ๋‹ˆ๋ฉ”์ด์…˜ - wiken.io ๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑ ใ„ด ์œ ์ฆˆํˆด์ปดํผ๋‹ˆ ๋ถ€๋ถ„๋ชจ์ž‘ ์ž‘์—… 1, ์ƒ๋‹จ๋ฉ”๋‰ด https://wiken.io/ken/55' WIKEN | Ken 55 wiken.io - ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ ์„ ์ƒ๋‹˜๊ป˜ ์ปจํŽŒ ใ„ด ์ด๋ฏธ์ง€ ๋ณ€๊ฒฝํ•˜๊ธฐ - ์ผ๋ฃธ ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ imageloaded ์ ์šฉํ•˜๊ธฐ - svgํŒŒ์ผ๋กœ path์• ๋‹ˆ๋ฉ”์ด์…˜ ์ ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ• ์ผ๋Ÿฌ์ŠคํŠธํŒŒ์ผ์„ svg๋กœ ์ €์žฅ codepen์œผ๋กœ ์—ด์–ด path ํƒœ๊ทธ ์•ˆ์˜ d= " ์š”๊ธฐ " ๋ถ€๋ถ„์— ๋„ฃ์–ด์ฃผ๊ธฐ console์ฐฝ์— ๋‚˜์˜ค๋Š” ์ˆซ์ž (์†Œ์ˆ˜์ ์ œ์™ธ)๋ฅผ css์˜ stroke-dasharray์— ๋„ฃ์–ด์ฃผ๊ธฐ 2021. 8. 13.
2021-08-11 (121์ผ์ฐจ) ํฌํŠธํด๋ฆฌ์˜ค ์ž‘์—… ์ค‘ - wiken.io๋กœ ๋ธ”๋กœ๊ทธ ๊ธ€ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ๋ฒ• - ํฌํŠธํด๋ฆฌ์˜ค ์‚ฌ์ดํŠธ ์ œ์ž‘ ์ค‘ 2021. 8. 13.
2021-08-10 (120์ผ์ฐจ) ์ทจ์—…ํŠน๊ฐ• ์ทจ์—…ํŠน๊ฐ• ใ„ด ์ž์†Œ์„œ ์ž‘์„ฑ๋ฐฉ๋ฒ• ใ„ด ์ด๋ ฅ์„œ ์ž‘์„ฑ๋ฐฉ๋ฒ• ใ„ด ์ง€์›๋ฐฉ๋ฒ• 2021. 8. 12.
2021-08-09 (119์ผ์ฐจ) scroll-behavior, wiken.io ์‚ฌ์šฉ๋ฒ• wiken.io ์‚ฌ์šฉ๋ฒ• ์›น๊ธฐ์ดˆ 169๊ฐ• (id๋ฅผ ์ด์šฉํ•œ ์•ต์ปค ์ด๋™, scroll-behavior) - scroll-behavior : smooth; : id๋ฅผ ์ด์šฉํ•œ ์•ต์ปค ์ด๋™์„ ํ•  ๋•Œ, ๋ฐ”๋กœ ์ด๋™์ด ์•„๋‹Œ! ์Šคํฌ๋กค ์ด๋™์„ ํ•˜๊ฒŒ ํ•ด์ค€๋‹ค. โ€ป id ๋Š” ํ•œ ๊ฐ€์ง€๋งŒ ์ง€์ •ํ•ด์„œ ์“ธ ์ˆ˜ ์žˆ๋Š” ์ด๋ฆ„์ด๋‹ค. (๋™์ผ์‹œํ•œ id๋Š” ์กด์žฌํ•  ์ˆ˜ ์—†๋‹ค.) ใ„ด ์ค‘๋ณต๋  ์ˆ˜ ์—†๊ณ , ๋‹จ ํ•˜๋‚˜๋งŒ ์กด์žฌํ•ด์•ผ ํ•œ๋‹ค. - wiken.io ์š”์ ์ •๋ฆฌ 1๊ฐœ ์ž‘์„ฑ ใ„ด block๊ณผ inline-block์˜ ์ฐจ์ด์  2021. 8. 9.
2021-08-08 (118์ผ์ฐจ)ํฌํŠธํด๋ฆฌ์˜ค ๊ตฌ์ƒ, ํ•„๊ธฐ ์ •๋ณด ์ž๋ฃŒ ์กฐ์‚ฌ - ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ ๊ตฌ์ƒ - ์›น๋””์ž์ธ๊ธฐ๋Šฅ์‚ฌ ์ž๊ฒฉ์ฆ ์‹ค๊ธฐ์‹œํ—˜์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ 2021. 8. 9.
2021-08-07 (117์ผ์ฐจ)ํฌํŠธํด๋ฆฌ์˜ค ๊ตฌ์ƒ ์ค‘ - ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ ๋””์ž์ธ ๊ตฌ์ƒ ์ปจ์…‰์„ ์–ด๋–ป๊ฒŒ ํ• ์ง€? ์›ํŽ˜์ด์ง€? ๋‹ค์ˆ˜ํŽ˜์ด์ง€? ์„น์…˜์„ ์–ด๋–ป๊ฒŒ ๊ตฌ๋ณ„ํ• ์ง€? 2021. 8. 9.
2021-08-06 (116์ผ์ฐจ) imagesLoaded(), nicescrollbar php ssg๊ฐœ๋… 51๊ฐ• (๋ณต์Šต๋‚ด์šฉ) GSAP 24๊ฐ• (๋ณต์Šต๋‚ด์šฉ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ 90๊ฐ•~93๊ฐ• (imagesLoaded)(niceScroll) - ์›น ๊ทธ๋ผ๋””์–ธํŠธ ์‚ฌ์ดํŠธ https://webgradients.com/ Free Gradients Collection by itmeo.com Free collection of 180 background gradients that you can use as content backdrops in any part of your website. webgradients.com - ?.imagesLoaded( ) : ?์˜ ์ด๋ฏธ์ง€๊ฐ€ ์ „๋ถ€ ๋กœ๋”ฉ์ด ๋˜๋ฉด ( )ํ•˜๋ผ. ex) $('body').imagesLoaded(function() { Example__init(); }); → bo.. 2021. 8. 9.

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”