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

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

2021-08-05 (115์ผ์ฐจ) fullpage, gsap FullPage 10๊ฐ•~15๊ฐ• GSAP์™€ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 21๊ฐ• ~ 23๊ฐ• FullPage - ํƒ‘๋ฐ”์˜ ๋„ค๋น„์— ํ˜„์žฌ ํŽ˜์ด์ง€ ํ‘œ์‹œ๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• data-menuanchor ๋„ฃ์–ด์ฃผ๊ธฐ GSAP - ์ด๋ฏธ์ง€๊ฐ€ ์ค‘๊ฐ„์— ๊ต์ฒด๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• 2021. 8. 6.
2021-08-04 (114์ผ์ฐจ) fullpage FullPage 6๊ฐ•~9๊ฐ• ์›น๋””์ž์ธ๊ธฐ๋Šฅ์‚ฌ 1~7๊ฐ• fullpage - continuousVertical : true : ํŽ˜์ด์ง€๊ฐ€ ๋๋‚˜์ง€ ์•Š๊ณ , ๋ฐ˜๋ณต๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• - navigation : ture : ํŽ˜์ด์ง€์˜ ํ˜„์žฌ์œ„์น˜๋ฅผ ์•Œ๋ ค์คŒ (์ธ๋””์ผ€์ดํ„ฐ) - navigationPosition : navigation์˜ ์œ„์น˜๋ฅผ ์ง€์ •ํ•  ์ˆ˜ ์žˆ์Œ (left, right) - data-tooltip"ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ" : navigation์— hoverํ–ˆ์„ ๋•Œ, ํ•ด๋‹น "ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ"๋ฅผ ์•Œ๋ ค์คŒ ใ„ด ์˜ˆ์™ธ) html section ์†์„ฑ์— ์ ์–ด์•ผ ํ•จ!! - showActiveTooltip : true : ํ•ด๋‹น ํŽ˜์ด์ง€์˜ "ํŽ˜์ด์ง€๋ฒˆํ˜ธ"๋ฅผ navigation์— ๋‚˜ํƒ€๋ƒ„ - responsiveWidth : ? : ?px ์ด์ƒ์—์„œ๋งŒ fullpage.. 2021. 8. 5.
2021-08-03 (113์ผ์ฐจ)tailwind ์ตœ์‹ ๊ธฐ๋Šฅ, rangeFixed, ์ด๋ฏธ์ง€ ์Šคํฌ๋กค ๋”ฐ๋ผ๊ฐ€๊ธฐ(๋ฐ˜์‘ํ˜•) FullPage 3๊ฐ•~5๊ฐ• GSAP์™€ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 17๊ฐ• ~ 20๊ฐ• - fullpage ์…‹ํŒ…๋ฐฉ๋ฒ• - html fullpage.min.js ๊ฐ€์ ธ์˜ค๊ธฐ fullpage.css ๊ฐ€์ ธ์˜ค๊ธฐ #fullpage๋กœ ์ „์ฒด๋ฅผ ๊ฐ์‹ธ๊ธฐ section์œผ๋กœ ํŽ˜์ด์ง€ ๊ตฌ๋ถ„ํ•˜๊ณ  ๋ฌด์กฐ๊ฑด section์ด๋ผ๋Š” class ๋„ฃ์–ด์ฃผ๊ธฐ - javascript new fullpage ('#fullpage', {~~~}); - fullpage์—์„œ ํ•ด๋‹น๋งํฌ๋กœ ์ด๋™ํ•˜๋Š” ๋ฐฉ๋ฒ• โ˜… javascript์—์„œ anchor ์‚ฌ์šฉ โ€ป fullpage์—์„œ๋Š” ์Šคํฌ๋กค๋ฐ”๊ฐ€ ์ƒ๊ธฐ์ง€ ์•Š๋Š”๋‹ค. (scrollBar:false๊ฐ€ ์ ์šฉ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ) ใ„ด scrollBar:true ๋„ฃ์–ด์ฃผ๊ธฐ - rangeFixed ํ™œ์šฉ์˜ˆ์ œ 1) ๋ฐ˜์‘ํ˜• ๋งŒ๋“ค๊ธฐ ?px์ด์ƒ์—์„œ๋งŒ ์‚ฌ์ง„๊ณผ ํ…์ŠคํŠธ๊ฐ€ ์ขŒ์šฐ๋กœ ๋ฐฐ์น˜ .. 2021. 8. 4.
2021-08-02 (112์ผ์ฐจ)tailwind ์ตœ์‹ ๊ธฐ๋Šฅ(tailwind jit), rangeFixed, ์ด๋ฏธ์ง€ ์Šคํฌ๋กค ๋”ฐ๋ผ๊ฐ€๊ธฐ tailwind(์ตœ์‹ ๊ธฐ๋Šฅ) 1๊ฐ•~8๊ฐ• GSAP์™€ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 13๊ฐ• ~ 16๊ฐ• - tailwind ๊ฐ€์žฅ ์ธ๊ธฐ๊ฐ€ ๋งŽ์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋ถ€ํŠธ์ŠคํŠธ๋žฉ๋ณด๋‹ค ์žฅ์ ์ด ๋งŽ์€ํŽธ ๋‹จ์œ„๋ฅผ ์„ธ๋ฐ€ํ•˜๊ฒŒ ์กฐ์ •ํ•  ์ˆ˜ ์—†์Œ (ex) ๋„ˆ๋น„, ๋†’์ด ๋“ฑ - tailwind์˜ ์ตœ์‹ ๊ธฐ๋Šฅ ๋‹จ์œ„์˜ ์„ธ๋ฐ€ํ•œ ์กฐ์ •์ด ๊ฐ€๋Šฅํ•ด์ง ex) w-[100px], h-[580px], bg-[#afafaf] ex) md:w-[500px] → md๊ฐ€ ๋์„ ๋•Œ, ๋„ˆ๋น„๊ฐ€ 500px์ด ๋˜๊ฒŒ ํ•˜๋ผ. ex) md:hover:w-[800px] → md๊ฐ€ ๋์„ ๋•Œ, hover์„ ํ•˜๋ฉด, ๋„ˆ๋น„๊ฐ€ 800px์ด ๋˜๊ฒŒ ํ•˜๋ผ. - tailwind๋งŒ์„ ์‚ฌ์šฉํ•˜์—ฌ 2์ฐจ๋ฉ”๋‰ด ๋งŒ๋“ค๊ธฐ โ˜… group ์‚ฌ์šฉ โ€ป ํ”ํžˆ ํ•˜๋Š” ์‹ค์ˆ˜ : ul์— hoverํ–ˆ์„ ๋•Œ๊ฐ€ ์•„๋‹ˆ๋‹ค!! (ul์€ ํ‰์†Œ.. 2021. 8. 3.
2021-08-01 (111์ผ์ฐจ) ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ณต์Šต - ๋“œ๋ฆผ์ฝ”๋”ฉ์—˜๋ฆฌ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ธฐ์ดˆ ๊ฐ•์˜ 4 ๋“ฃ๊ธฐ - ์Šคํƒ€ํŠธ์—…์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ธฐ - ํƒญ๋ฉ”๋‰ด ๋ณต์Šต 2021. 8. 2.
2021-07-31 (110์ผ์ฐจ) ๊ฐœ์ธ๊ณผ์ œ - ๊ฐœ์ธํ”„๋กœ์ ํŠธ 'iloom ํ”„๋กœ์„ธ์Šค ํŽ˜์ด์ง€' ใ„ด ์ฝ”๋”ฉ ์ž‘์—…์‹œ์ž‘, ์ƒˆ๋ฒฝ 7์‹œ ๋งˆ์นจ 2021. 8. 2.
2021-07-30 (109์ผ์ฐจ) css animation, ์• ๋‹ˆ๋ฉ”์ด์…˜, keyframes 167๊ฐ• ~ 168๊ฐ• (์• ๋‹ˆ๋ฉ”์ด์…˜ ๊ธฐ์ดˆ, floatingํšจ๊ณผ) GSAP์™€ ์Šคํฌ๋กคํŠธ๋ฆฌ๊ฑฐ 11๊ฐ•~12๊ฐ• php ์—ฐ์Šต์‹œ๊ฐ„ โ€ป ๊ตฌ๊ธ€์—์„œ www css animation ๊ฒ€์ƒ‰ํ•˜๋ฉด animation์— ๋Œ€ํ•œ ์ •๋ณด๊ฐ€ ๋‚˜์˜จ๋‹ค. - css animation ์‚ฌ์šฉ๋ฐฉ๋ฒ• anmation-name์œผ๋กœ ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ด๋ฆ„ ์ง€์ • ํ›„, keyframes๋กœ ์›€์ง์ด๊ฒŒ ํ•˜๋Š” ์›๋ฆฌ anmation-duration : ?s; = ?์ดˆ ๋™์•ˆ ์›€์ง์ด๊ฒŒ ํ•˜๊ธฐ anmation-play-state : paused; = ์ •์ง€ ์ƒํƒœ anmation-play-state : running; = ์ž‘๋™ ์ƒํƒœ animation-fill-mode : forwards; = ์• ๋‹ˆ๋ฉ”์ด์…˜ ์ž‘๋™ ํ›„ , ๋๋‚œ ๊ทธ ์œ„์น˜์— ๋จธ๋ฌผ๊ฒŒ ํ•จ animation-iteration-count :.. 2021. 7. 31.
2021-07-29 (108์ผ์ฐจ)fullpage ๊ธฐ๋ณธ์…‹ํŒ…, ์ž‘์„ฑ๊ทœ์น™, Masonry, setTimeout, imageLoaded, ๋กœ๋”ฉํ™”๋ฉด, fontawesome ํšŒ์ „๋ฐฉ๋ฒ• PHP ํŽ˜์ด์ง€๋ณ„ ์ƒ๋‹จํ‘œ์‹œ ๋ณต์Šต fullpage 1๊ฐ•~2๊ฐ• Javascript 88๊ฐ•~89๊ฐ• wiken.io 1๊ฐ•~2๊ฐ• ใ„ดphp, ์Šคํ”„๋ง๋ถ€ํŠธ, next.js ์–ธ์–ด ์ค‘ ํ•˜๋‚˜๋กœ ๋งŒ๋“ค ์˜ˆ์ •์ด๋ผ๊ณ  ํ•˜์…จ๋‹ค.. - fullpage ๊ธฐ๋ณธ์…‹ํŒ… ๋ฐฉ๋ฒ• cdnjs์—์„œ fullpage ๊ฒ€์ƒ‰ ํ›„, ์ฒ˜์Œ 2๊ฐœ ๊ฐ€์ ธ์˜ค๊ธฐ (fullpage.min.js + fullpage.css) - fullpage ์ž‘์„ฑ๊ทœ์น™ 1. ์ „์ฒด๋ฅผ fullpage๋ผ๋Š” id๋กœ ๊ฐ์‹ธ์•ผํ•œ๋‹ค. 2. ํŽ˜์ด์ง€๋งˆ๋‹ค section์œผ๋กœ ๊ตฌ๋ถ„ ํ›„ , section์— section์ด๋ผ๋Š” class๋ฅผ ๋„ฃ์–ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. Masonry : ๋น„์œจ์ด ๋‹ค๋ฅธ ์—ฌ๋Ÿฌ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋‚˜์—ดํ•ด์ฃผ๋Š” ๊ธฐ๋Šฅ - ์‚ฌ์šฉ๋ฐฉ๋ฒ• cdnjs์—์„œ masonry๊ณผ jquery ๊ฐ€์ ธ์˜ค๊ธฐ ํ•˜๋‚˜์˜ ์„น์…˜ ์•ˆ์— ์—ฌ๋Ÿฌ์žฅ์˜ ์ด๋ฏธ์ง€๋ฅผ ๋„ฃ.. 2021. 7. 29.
2021-07-28 (107์ผ์ฐจ) ํ˜„์žฌ์‹œ๊ฐ ํ‘œ์‹œ๋ฐฉ๋ฒ•, ๋žœ๋ค๊ฒฐ๊ณผ, ํŽ˜์ด์ง€๋ณ„ ์ƒ๋‹จํ‘œ์‹œ PHP 45๊ฐ•~50๊ฐ• - PHP์„ ์ด์šฉํ•˜์—ฌ ํ˜„์žฌ์‹œ๊ฐ์„ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ๋ฒ• ์‹ฌ๋ฆฌํ…Œ์ŠคํŠธ ๋งŒ๋“ค์–ด๋ณด๊ธฐ - ์—ฐ์†์ฒดํฌ ์•ˆ ๋˜๊ฒŒ ํ•˜๋Š” ๋ฐฉ๋ฒ• : ๋ชฉ๋ก์„ ๊ทธ๋ฃนํ™” ํ•ด์ฃผ์–ด์•ผ ํ•œ๋‹ค. (name์†์„ฑ์„ ๋„ฃ์–ด ๊ฐ™๊ฒŒ ํ•ด์ฃผ๊ธฐ) ex) 1๋ฒˆ 2๋ฒˆ โ€ป ์ž…๋ ฅ์ƒ์ž๋Š” ๊ฑฐ์˜ form ํƒœ๊ทธ์— ๋‹ด๋Š”๋‹ค. - action์€ form ์•ˆ์—์„œ์˜ ๋ฒ„ํŠผ์„ ๋ˆŒ๋ €์„ ๋•Œ, ๋งํฌ๋กœ ์ด๋™ํ•˜๋Š” ์—ญํ• ์„ ํ•ด์ค€๋‹ค. - : input์„ label๋กœ ๊ฐ์‹ธ์ค€๋‹ค๋ฉด, ํ…์ŠคํŠธ๋ฅผ ํด๋ฆญํ•ด๋„ ํด๋ฆญ์ด ๋œ๋‹ค. → ๊ฐ’์„ ์ฒดํฌํ•œ ํ›„, ๋ฒ„ํŠผ์„ ๋ˆŒ๋Ÿฌ ๋งํฌ๋กœ ์ด๋™๋˜๋ฉด ์ฃผ์†Œ ๋’ค์— '?name=value'๊ฐ€ ๋ถ™๋Š”๋‹ค. ex) result.php?list1=2 (2๋ฒˆ์„ ์ฒดํฌํ–ˆ์„ ๋•Œ) → ํ•˜์ง€๋งŒ, result.php์—๋Š” .. 2021. 7. 29.
2021-07-27 (106์ผ์ฐจ) SSG๊ฐœ์š”, SSG์‚ฌ์šฉ๋ฐฉ๋ฒ• PHP 41๊ฐ•~44๊ฐ• SSG (Static Site Generator) : ํ‰์†Œ์— ์šฐ๋ฆฌ๊ฐ€ ๋งŒ๋“œ๋Š” ์‚ฌ์ดํŠธ : PHP, JSP, ASF๋กœ ๋งŒ๋“ค์ง€ ์•Š์€ ์‚ฌ์ดํŠธ โ€ป PHP๊ฐ€ ๋Œ์•„๊ฐ€๋ ค๋ฉด PHP๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ๋Š” ํ™˜๊ฒฝ์—์„œ ์‹คํ–‰ํ•ด์•ผ ํ•œ๋‹ค. ๋Œ€๋ถ€๋ถ„์˜ ์›น์„œ๋ฒ„์™€ GITHUB๋Š” ์ œ๊ณตํ•˜์ง€ ์•Š๋Š”๋‹ค. PHP๋ฅผ ์“ฐ๋ ค๋ฉด? 1. PHP๊ฐ€ ์„ค์น˜๋œ ํ™˜๊ฒฝ PHPํ˜ธ์ŠคํŒ… (๋Œ€๋ถ€๋ถ„ ์œ ๋ฃŒ) 2. ์ผ๊ด„์ ์œผ๋กœ HTML์œผ๋กœ ๋ฐ”๊ฟ”์ค€ ํ›„, ์˜ฌ๋ฆฌ๊ธฐ SSG ์‚ฌ์šฉ๋ฐฉ๋ฒ• โ€ป XAMPP, COMPOSER๊ฐ€ ์„ค์น˜๋˜์–ด ์žˆ์–ด์•ผ ํ•œ๋‹ค. 1. https://github.com/jhs512/php_simple_ssg ์—์„œ CODE ๋‹ค์šด๋กœ๋“œ 2. jscํด๋” ์•ˆ์— ํ•„์š”์—†๋Š” ํŒŒ์ผ ์‚ญ์ œ ( app.php cmd.php data.php util.php๋ฅผ ์ œ์™ธํ•˜๊ณ  ์‚ญ์ œ) 3. jscํด๋” .. 2021. 7. 28.
2021-07-26 (105์ผ์ฐจ) php์‚ฌ์ดํŠธ ํฌํด์‚ฌ์ดํŠธ ์‹คํ—˜, ๊ฐœ์ธ๊ณผ์ œ ์ž‘์—… php 40๊ฐ• - ์ผ๋ฃธ ํ”„๋กœ์„ธ์ŠคํŽ˜์ด์ง€ ์ž‘์—… ์ƒ์„ธํŽ˜์ด์ง€ ์ž‘์—… ์ค‘ - php ์‚ฌ์ดํŠธ ๋งŒ๋“ค์–ด๋ณด๊ธฐ ( head์™€ foot์€ ๋ถ„๋ฆฌ) * ํŽ˜์ด์ง€ - ํ”„๋กœ์ ํŠธ/docs/index.php # ํ™ˆ - ํ”„๋กœ์ ํŠธ/docs/pf.php # ํฌํŠธํด๋ฆฌ์˜ค - ํ”„๋กœ์ ํŠธ/docs/aboutMe.php # ์ž๊ธฐ์†Œ๊ฐœ * ํŒŒํŠธ - ํ”„๋กœ์ ํŠธ/docs/head.php # ๊ณตํ†ต ์ƒ๋‹จ - ํ”„๋กœ์ ํŠธ/docs/foot.php # ๊ณตํ†ต ํ•˜๋‹จ * ์ •์  ๋ฆฌ์†Œ์Šค - ํ”„๋กœ์ ํŠธ/docs/common.css - ํ”„๋กœ์ ํŠธ/docs/common.js * ์ œ์ถœ - ์ž‘๋™์˜์ƒ occam์œผ๋กœ ์ดฌ์˜ - ๋””์Šค์ฝ”๋“œ์— ์˜ฌ๋ ค์ฃผ์„ธ์š”. * ๊ธฐ๋ฐ˜์†Œ์Šค์ฝ”๋“œ : to2.kr/cWA 2021. 7. 27.
2021-07-25 (104์ผ์ฐจ) ์ž๊ฒฉ์ฆ ๊ณต๋ถ€ - ์›น๋””์ž์ธ๊ธฐ๋Šฅ์‚ฌ ์‹ค๊ธฐ ๊ฐ•์˜ ๋“ฃ๊ธฐ ์›น๋””์ž์ธ ๊ธฐ๋Šฅ์‚ฌ ๋”ฐ๋ผํ•˜๋ฉด ๋”ด๋‹ค - ์›น์Šคํ† ๋ฆฌ๋ณด์ด 2 ~ 4 ์‹œ์ฒญ์™„๋ฃŒ 2021. 7. 27.

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