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

๐Ÿ’™ ์˜์ƒ๋ฆฌ๋ทฐ20

์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ - 1 #1 ์ง€๊ธˆ ์›น ๋””์ž์ธ์„ ๋ฐฐ์šฐ๋Š” ๊ฑด ๋„ˆ๋ฌด ๋Šฆ์—ˆ๋‚˜? - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ https://www.youtube.com/watch?v=0q0tdEbNci4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=1 ui๋Š” ๋Œ€๋ถ€๋ถ„ ์Šค์ผ€์น˜๋กœ ์ž‘์—… ์ด๋ฏธ์ง€ ํŽธ์ง‘, ๊ทธ๋ž˜ํ”ฝ์€ ํฌํ† ์ƒต์œผ๋กœ ์ž‘์—… web์ด๋ž€ ๋ฌด์—‡์ธ๊ฐ€? - ์†Œํ†ต์„ ์œ„ํ•ด์„œ! - ๋ฏธ๋””์–ด๋ณ€ํ™” (๊ณผ๊ฑฐ)์ผ๋ฐฉํ–ฅ→(ํ˜„์žฌ)์Œ๋ฐฉํ–ฅ - ๋‹จ๊ณ„ : ๊ธฐํš > ๋””์ž์ธ > ๊ฐœ๋ฐœ ใ„ด(์„ธ๋ถ„ํ™”) : ๊ธฐํš > ์›น๋””์ž์ธ > ์›นํ”„๋ก ํŠธ์•ค๋“œ๊ฐœ๋ฐœ > ๋ฐฑ์•ค๋“œ๊ฐœ๋ฐœ > ์šด์˜ ๋ฐ ์œ ์ง€๋ณด์ˆ˜ 2021. 5. 31.
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ์™€ ํ˜„์žฌ ๊ทธ๋ฆฌ๊ณ  ๋ฏธ๋ž˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐฐ์šฐ๊ธฐ์ „ ๊ผญ ๋ด์•ผํ•  ์˜์ƒ | ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์—ญ์‚ฌ์™€ ํ˜„์žฌ ๊ทธ๋ฆฌ๊ณ  ๋ฏธ๋ž˜ (JavaScript, ECMAScript, JQuery, Babel, Node.js) - ๋“œ๋ฆผ์ฝ”๋”ฉ by ์—˜๋ฆฌ ์œ ํŠœ๋ธŒ 1993๋…„ MOSIAC์˜ ๋“ฑ์žฅ ใ„ด marc andreessen๊ฐ€ ์ฃผ๋„ 1994๋…„ marc andressen์ด ๋Œ€ํ•™๊ต๋ฅผ ์กธ์—…ํ•˜์ž ๋งˆ์ž NETSCAPE ํšŒ์‚ฌ ์„ค๋ฆฝ NETSCAPE : ์ •์ ์ธ ์›น์‚ฌ์ดํŠธ๋งŒ ๊ฐ€๋Šฅ, ์‹œ์žฅ์—์„œ 80% ์ ์œ ์œจ ↓ ๋™์ ์ธ ์›น์‚ฌ์ดํŠธ๋ฅผ ๋งŒ๋“ค๊ธฐ ์œ„ํ•˜์—ฌ scripting ์–ธ์–ด ์ถ”๊ฐ€ ํ›„๋ณด 1) java : ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์–ด๋ ค์›Œ์„œ ํŒจ์Šค ํ›„๋ณด 2) brendan eich๋ผ๋Š” ์‚ฌ๋žŒ์„ ์„ญ์™ธํ•ด ๊ธฐ์กด scheme๋ฅผ ๋ณ€ํ˜• → ์ฑ„ํƒ๋จ ↓ 1994๋…„ 9์›” mocha์˜ ๋“ฑ์žฅ (→ livescript๋กœ ์ด๋ฆ„๋ณ€๊ฒฝ) (java.. 2021. 5. 30.
๋ ˆ์ด์–ด์™€ ์—์…‹ ์ •๋ฆฌํ•˜๋Š”๋ฒ• (Feat. Zeplin) - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=2xq-cJCoBMI&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=14 ์ž‘์—… ์™„๋ฃŒ ํ›„ ํด๋ผ์ด์–ธํŠธ์—๊ฒŒ ๋ณด๋‚ผ ๋•Œ ์ฃผ์˜์‚ฌํ•ญ 1 ๋ ˆ์ด์–ด ์ •๋ฆฌ ์œ„ -> ์•„๋ž˜ ์ˆซ์ž ๋งค๊ฒจ์คŒ ex) #01 header -> #02 banner #์„ ๋„ฃ๋Š” ์ด์œ  : ํ•˜์œ„ ์‹ฌ๋ณผ ํ˜น์€ ๊ทธ๋ฃน๊ณผ์˜ ์ฐจ๋ณ„์„ ์œ„ํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ์ •ํ™•ํ•œ ๋ช…์„ ์ ๊ณ , ์„น์…˜ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ํ•ด๋‹น ์„น์…˜๋ช…์œผ๋กœ ์ ์–ด์ฃผ๊ธฐ 2 ๋‚ด๋ณด๋‚ด๊ธฐ ํ•ด์•ผํ•  ์š”์†Œ๋“ค make exportable ํ•ด์ฃผ๊ธฐ ๊ณ ์ •๋œ ์ด๋ฏธ์ง€๋Š” make exportable ํ•ด์ฃผ๊ณ  ์ด๋ฏธ์ง€ ๊ฐ™์€ ๊ฒฝ์šฐ๋Š” ๋ฐฐ๊ฒฝ์„ ํˆฌ๋ช…์œผ๋กœ ์˜๋„ํ•œ ๊ฒŒ ์•„๋‹ˆ๋ผ๋ฉด jpeg๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ•˜๋Š” ์ด๋ฏธ์ง€๋Š” ์ปจํ…์ธ ๋Š” ์šด์˜ ์—…๋ฌด์— ์†ํ•จ์œผ๋กœ ์•ˆ ๋ณด๋‚ด๋„ ๋จ 3 ๋กœ๊ณ ๋‚˜ ์•„์ด์ฝ˜ ๊ฐ™์€ ๊ฒฝ.. 2021. 4. 21.
์›น๋””์ž์ธ ์‹ค์Šต ๋ชจ๋ฐ”์ผ ์„œ๋ธŒ ํŽ˜์ด์ง€(Feat. ์Šค์ผ€์น˜ ์‹ฌ๋ณผ์˜ ํž˜) - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=JxxrQj8sXS4&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=13&t=1s ๋ณต์ œํ›„ ์ด๋ฆ„๋ฐ”๊พธ๊ณ  ๊ณตํ†ต๋˜๋Š” ์š”์†Œ ๋นผ๊ณ  ์‚ญ์ œํ•˜๊ธฐ 2021. 4. 21.
์›น๋””์ž์ธ ์‹ค์Šต ๋ชจ๋ฐ”์ผ ๋ฉ”์ธ ํŽ˜์ด์ง€ - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=qB6UZdPu0Ag&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=12 - ์ผ๋ฐ˜์ ์ธ ์ž‘์—…๋ฐฉ์‹ ๋ชจ๋ฐ”์ผ>ํ…Œ๋ธ”๋ฆฟ>๋ฐ์Šคํฌํƒ‘ - mobile first ์ฝ˜ํ…์ธ  (์ฝ˜ํ…์ธ ์˜ ๊ฐ€๋…์„ฑ) ๋ณต์‚ฌ ํ›„ ๋”๋ธ” ํด๋ฆญํ›„ ํŽธ์ง‘ํ™”๋ฉด์—์„œ ์‚ฌ์ด์ฆˆ ์กฐ์ ˆ adjust content on resize โ– ์ฒดํฌ ๋ฉ”์ธํ™”๋ฉด์œผ๋กœ ๋Œ์•„์™€์„œ ์ˆ˜์ •+์‚ฌ์ด์ฆˆ ์กฐ์ ˆ+๋ฐฐ์น˜ํ•˜๊ธฐ - ๋ชจ๋ฐ”์ผ ์‚ฌ์ด์ฆˆ ๋งŒ๋“ค๊ธฐ 1. a๋ฅผ ๋ˆ„๋ฅด๊ณ  ๊ธฐ์ข…์„ ์„ ํƒํ•˜๊ธฐ 2. view-show layout-layout setting ์ขŒ์šฐ์— margin 20์”ฉ ์ฃผ๊ธฐ → ์ด 40 ๋นผ์ฃผ๊ธฐ =>335px offset 0 ์ฃผ๊ณ  center ๋ˆ„๋ฅด๊ธฐ number of columns 4 ๋˜๋Š” 6 ์ฃผ๊ธฐ gutter width 16px ์ฃผ๊ธฐ.. 2021. 4. 21.
์‹œ์„ ๊ฐ•ํƒˆ ์›น ๋ฉ”์ธ ๋ฐฐ๋„ˆ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ•(feat. ํฌํ† ์ƒต) - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=xb_yfjHj_RE&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=11&t=2s ์‹œ์„ ๊ฐ•ํƒˆ ์›น ๋ฉ”์ธ ๋ฐฐ๋„ˆ ๋งŒ๋“œ๋Š” ๋ฐฉ๋ฒ• - ์–ด๋‘์šด ๋ฐฐ๊ฒฝ์—์„œ ๋น›์ด ๋“ค์–ด์˜ค๋Š” ํšจ๊ณผ 1. ์›์„ ํ•˜๋‚˜ ๊ทธ๋ ค์„œ ๊ฒ€์ •์ƒ‰ ์ฑ„์›Œ์ฃผ๊ธฐ 2. filter>render>lens flare (105mm prime ์ถ”์ฒœ) 3. ๋ ˆ๋ฒจ๊ฐ’์„ ์ค˜์„œ ํ…Œ๋‘๋ฆฌ์˜ ๋ฐ์€ ๋ถ€๋ถ„ ๊ฒฝ๊ณ„๋ฅผ ์—†์• ์ฃผ๊ธฐ - ๋น›์ด ๋‚˜์˜ค๋Š” ํšจ๊ณผ 1. ํŽœํˆด(shape)์œผ๋กœ ๋ชจ์–‘์„ ๊ทธ๋ ค์ฃผ๊ธฐ 2. smart object๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ 3. filter>blur gallery>field blur 4. ์ˆ˜์น˜ ์•Œ๋งž๊ฒŒ ์กฐ์ ˆ (๋๋ถ€๋ถ„์€ ๊ฐ•ํ•˜๊ฒŒ!) 5. ok ๋ฒ„ํŠผ์„ ๋ˆ„๋ฆ„ 6. ๋งˆ์Šคํฌ๋ฅผ ์”Œ์šฐ๊ณ  ๊ทธ๋ผ๋ฐ์ด์…˜๊ณผ ๋ถ“์œผ๋กœ ์ž์—ฐ์Šค๋Ÿฝ๊ฒŒ ๊ฒฝ๊ณ„๋ฅผ ์ง€์›Œ์ฃผ๊ธฐ .. 2021. 4. 21.
์›น๋””์ž์ธ ์‹ค์Šต PC ์นดํ…Œ๊ณ ๋ฆฌ ํŽ˜์ด์ง€ - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=ay7VHoa8tKs&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=10 - ์นดํ…Œ๊ณ ๋ฆฌํŽ˜์ด์ง€ ํ—ค๋”์™€ ํ‘ธํ„ฐ๋Š” ๊ทธ๋Œ€๋กœ ์‚ฌ์šฉ๋จ ๋ฉ”์ธ ๋ฐฐ๋„ˆ์— ๋น„ํ•ด ์กฐ๊ธˆ ๋” ์ž‘๊ฒŒ ์ž‘์—… simbol normal/active ์„œ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ธฐ 2021. 4. 18.
ํ—ค๋”, ๋ฐฐ๋„ˆ, ์„น์…˜, ํ‘ธํ„ฐ ๋””์ž์ธ - ์›น๋””์ž์ธ ์ธ๋ฌธ ๊ฐ•์ขŒ #6 ์›น๋””์ž์ธ ์‹ค์Šต PC ํ—ค๋” ๋””์ž์ธ 01 - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=cCwj-xYYCM0&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=6&t=1s #7 ์›น๋””์ž์ธ ์‹ค์Šต PC ๋ฐฐ๋„ˆ ๋””์ž์ธ 02 - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=jmly8U6Eeuk&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=7 #8 ์›น๋””์ž์ธ ์‹ค์Šต PC ์„น์…˜ ๋””์ž์ธ 03 - ์›น๋””์ž์ธ ์ž…๋ฌธ ๊ฐ•์ขŒ www.youtube.com/watch?v=D8XMY0fb2wQ&list=PLkbzizJk4Ae8VJcW6qpHjiP2qByn4Gs8w&index=8 #9 ์›น๋””์ž์ธ ์‹ค์Šต PC ์„น์…˜, ํ‘ธํ„ฐ ๋””์ž์ธ 04 - .. 2021. 4. 18.

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