Inflearn brand logo image
Inflearn brand logo image
์ฑ„๋„ํ†ก ์•„์ด์ฝ˜
BEST

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ํฌํŠธํด๋ฆฌ์˜ค(App Official Landing Website)

๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ํฌํŠธํด๋ฆฌ์˜ค(App Official Landing) ์ œ์ž‘ ๊ณผ์ •์€ HTML+CSS+JQUERY ํผ๋ธ”๋ฆฌ์‹ฑ์œผ๋กœ ๋ฐ˜์‘ํ˜• ์›น์‚ฌ์ดํŠธ ์ „์ฒด ์ œ์ž‘๊ณผ์ •์„ ํ†ตํ•ด ํผ๋ธ”๋ฆฌ์‹ฑ ์ค‘๊ธ‰ ์‹ค๋ ฅ์œผ๋กœ ๊ฐ€๋Š” ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋‹จ๋‹จํžˆ ํ•˜๊ณ  ์‹ค์ „ ํผ๋ธ”๋ฆฌ์‹ฑ์˜ ๋…ธํ•˜์šฐ๋ฅผ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํŠนํžˆ, ์›น์‚ฌ์ดํŠธ ์ „์ฒด ์ œ์ž‘๊ณผ์ •์„ ์ถฉ๋ถ„ํ•œ ์„ค๋ช…๊ณผ ์‹ค์ „ ์ž‘์—…์œผ๋กœ ๊ฒฝํ—˜ํ•˜๊ณ  ๊ฐœ์ธ ํฌํŠธํด๋ฆฌ์˜ค ์›น์‚ฌ์ดํŠธ ์ œ์ž‘์— ์ž์‹ ๊ฐ์„ ๊ฐ–๊ฒŒ ๋ฉ๋‹ˆ๋‹ค. ํ•„์ˆ˜๋กœ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ์ œ์ด์ฟผ๋ฆฌ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ Scroll Reveal Animation๊ณผ Slick ์Šฌ๋ผ์ด๋” ์‚ฌ์šฉ๋ฒ•์„ ํ•™์Šตํ•ฉ๋‹ˆ๋‹ค. ๋ฐ˜์‘ํ˜• ์ œ์ž‘ ๋ฐฉ์‹์€ ๊ธฐ์กด ๋ฐฉ์‹์˜ float์™€ position์„ ์ด์šฉํ•œ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘ ๋ฐฉ์‹์œผ๋กœ ์ œ์ž‘ํ•ฉ๋‹ˆ๋‹ค. ํ•˜์ง€๋งŒ ์–ด๋Š ํŠน์ • ์š”์†Œ์—์„œ๋Š” Flex๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ถ„๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

Thumbnail

์ฝ”๋”ฉ์›์Šค ์ˆ˜๊ฐ•์ƒ ์—ฌ๋Ÿฌ๋ถ„~ ์˜์ƒ ์—…๋ฐ์ดํŠธ ์†Œ์‹์ž…๋‹ˆ๋‹ค.

๋ฐ˜์‘ํ˜• ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ชจ๋‹ฌ ๋งŒ๋“ค๊ธฐ ์˜์ƒ์ด ์—…๋ฐ์ดํŠธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค

๋ชจ๋‹ฌ์ฐฝ ๋งŒ๋“ค๊ธฐ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ์ œ์ž‘์„ ์œ„ํ•œ CSS ์†์„ฑ์— ๋Œ€ํ•ด์„œ ์ž์„ธํžˆ ์„ค๋ช…๋˜์–ด ์žˆ์Šต๋‹ˆ๋‹ค.
ํ•˜์ง€๋งŒ ์˜์ƒ์ด ๊ธด ๋งŒํผ ์ฒœ์ฒœํžˆ ์ฐจ๋ถ„ํ•˜๊ฒŒ ์˜์ƒ ๋งŒ๋“ค๊ธฐ ๋ณด์‹œ๋ฉด์„œ ์‹ค์Šตํ•˜์‹œ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

CSS ์†์„ฑ์„ ๋ณ€๊ฒฝํ•ด์„œ ๋ชจ๋‹ฌ์ฐฝ์ด ๋‚˜ํƒ€๋‚  ๋•Œ ๋‹ค์–‘ํ•˜๊ฒŒ ๋ณ€๊ฒฝํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ๊น”๋”ํ•˜๊ณ  ์‰ฌ์šด ์ œ์ด์ฟผ๋ฆฌ ์ฝ”๋“œ๋กœ ๋ชจ๋‹ฌ์ฐฝ์„ ์ œ์–ดํ•ฉ๋‹ˆ๋‹ค.
์™„์„ฑ๋ณธ ํŒŒ์ผ๊ณผ ์‹ค์Šต ์†Œ์ŠคํŒŒ์ผ์€ ์ธํ”„๋Ÿฐ ๊ฐ•์˜์—์„œ ๋‹ค์šด๋กœ๋“œ ๋ฐ›์œผ์‹ค ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์–ด๋ ค์šด ์‹œ๊ธฐ์ง€๋งŒ ๋Š˜ ๊ฑด๊ฐ•ํ•˜์‹œ๊ณ  ์—ด์‹ฌํžˆ ํ•˜์„ธ์š”~!!

โ–ผ ๋ฐ˜์‘ํ˜• ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ชจ๋‹ฌ(HTML+CSS+JQUERY) - 1๋ถ€

https://youtu.be/KU91Wzq6ig8

โ–ผ ๋ฐ˜์‘ํ˜• ์• ๋‹ˆ๋ฉ”์ด์…˜ ๋ชจ๋‹ฌ(HTML+CSS+JQUERY) - 2๋ถ€

https://youtu.be/WNgk8GlRcXM

๋Œ“๊ธ€