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

2021-09-06 (147์ผ์ฐจ) ํฌํŠธํด๋ฆฌ์˜ค ์ž‘์—… ์ค‘ intro + portfolio, ํƒญ๋ฉ”๋‰ด์— ๋”ฐ๋ผ ํ™”๋ฉด์ด ์ „์ฒด์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ํšจ๊ณผ

by widely design 2021. 9. 10.

ํฌํŠธํด๋ฆฌ์˜ค ์ž‘์—… ์ค‘ intro + portfolio

์œ ์šฉํ•œ ์†Œ์Šค์ฝ”๋“œ 27๊ฐ• (ํƒญ๋ฉ”๋‰ด์— ๋”ฐ๋ผ ํ™”๋ฉด์ด ์ „์ฒด์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ํšจ๊ณผ)

 

 

ํฌํŠธํด๋ฆฌ์˜ค ์ฝ”๋”ฉ ์ž‘์—… ์ค‘ (intro + portfolio)

intro์—๋Š” ์˜์ƒ์ด ๋“ค์–ด๊ฐ„๋‹ค. 

codepen์œผ๋กœ ์ž„์‹œ์ž‘์—… ์ค‘์ด๋ผ ์•„์ง ์˜์ƒ์œผ๋ก  ๋„ฃ์ง€ ๋ชปํ•˜๊ณ  ์‚ฌ์ง„์œผ๋กœ ๋Œ€์ฒดํ–ˆ๋‹ค.

intro์œ„์— ๋ถ€๋ถ„์— ์ข‹์•„ํ•˜๋Š” ๋ช…์–ธ์„ ๋„์› ๋‹ค.

ํ”ผ๊ทธ๋งˆ ํ”„๋ ˆ์ž„ ์•ˆ์—์„œ ์ €์žฅํ•ด์„œ ํ”„๋ ˆ์ž„ ์•„๋ž˜์— ๊น”๋ฆฐ ๋ฐฑ๊ทธ๋ผ์šด๋“œ๋ž‘ ๊ฐ™์ด ์ถ”์ถœ์ด ๋ผ์„œ

ํ”„๋ ˆ์ž„์—์„œ ๊บผ๋‚ด์„œ ๋ช…์–ธ ๊ฐœ์ฒด๋งŒ ๋”ฐ๋กœ ์ถ”์ถœํ–ˆ๋‹ค. ๋ชฐ๋ž๋˜ ์ ์„ ์•Œ์•„๋‚ด์„œ ๊ธฐ์˜๋‹ค!

portfolio ๋ถ€๋ถ„ ์ฝ”๋”ฉ์„ ์‹œ์ž‘ํ–ˆ๋‹ค.

์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋“œ์— ๋Œ€ํ•ด ๋ฐฐ์šธ ๋•Œ ์ž˜ ๋ชปํ•ด๋‚ด๊ณ  ์žฌ๋ฏธ๋„ ๋ชป ๋Š๊ปด์„œ ๋‘๋ ค์›€์ด ๋งŽ์•˜๋‹ค.

ํ•˜์ง€๋งŒ ๋‚ด๊ฐ€ ํ•˜๊ณ  ์‹ถ์€ ์ž‘์—…์„ ํ•ด๋‚ด๋‹ค ๋ณด๋‹ˆ ํ•˜๋‚˜ํ•˜๋‚˜ ๊ณต์ฑ…์— ๊ณ„์‚ฐํ•ด๊ฐ€๋ฉฐ ๋งŒ๋“ค์–ด๋ณด๋‹ˆ ๊ธˆ๋ฐฉ ๋š๋”ฑ ๋งŒ๋“ค์–ด๋ƒˆ๋‹ค.

์—ญ์‹œ ์žฌ๋ฏธ๋ฅผ ๋Š๋ผ๋Š” ๊ฒƒ์ด ์ค‘์š”ํ•œ ๊ฒƒ ๊ฐ™๋‹ค! ใ…Žใ……ใ…Ž

๊ทธ๋ฆฌ๊ณ  ์˜ํ™” ์ปจ์…‰์ด๋ผ ํฌํŠธํด๋ฆฌ์˜ค ๋ถ€๋ถ„์— ์ปคํŠผ์ด ์—ด๋ฆฌ๋Š” ํšจ๊ณผ๋ฅผ absolute left๋ฅผ ์ด์šฉํ•˜์—ฌ ์คฌ๋‹ค.

์›ํ•˜๋Š” ๋Œ€๋กœ ํ‘œํ˜„์„ ๋งŒ๋“ค์–ด๋‚ธ๋‹ค๋Š” ๊ฒŒ ์ฐธ ์‹ ๊ธฐํ•˜๊ณ  ์žฌ๋ฐŒ๋‹ค.

๋‚ด์ผ์€ artwork๋ถ€๋ถ„ ์Šค์™€์ดํผ ์Šฌ๋ผ์ด๋“œ๋ฅผ ๋งŒ๋“ค์–ด์•ผ๊ฒ ๋‹ค!!

 

- ํƒญ๋ฉ”๋‰ด์— ๋”ฐ๋ผ ํ™”๋ฉด์ด ์ „์ฒด์ ์œผ๋กœ ๋ฐ”๋€Œ๋Š” ํšจ๊ณผ

See the Pen by jhs (@jangka44) on CodePen.

๋Œ“๊ธ€