๋ฐ์ํ ์น์ฌ์ดํธ ํฌํธํด๋ฆฌ์ค(App Official Landing) ์ ์ ๊ณผ์ ์ HTML+CSS+JQUERY ํผ๋ธ๋ฆฌ์ฑ์ผ๋ก ๋ฐ์ํ ์น์ฌ์ดํธ ์ ์ฒด ์ ์๊ณผ์ ์ ํตํด ํผ๋ธ๋ฆฌ์ฑ ์ค๊ธ ์ค๋ ฅ์ผ๋ก ๊ฐ๋ ๊ธฐ๋ณธ๊ธฐ๋ฅผ ๋จ๋จํ ํ๊ณ ์ค์ ํผ๋ธ๋ฆฌ์ฑ์ ๋ ธํ์ฐ๋ฅผ ๊ฐ๊ฒ ๋ฉ๋๋ค. ํนํ, ์น์ฌ์ดํธ ์ ์ฒด ์ ์๊ณผ์ ์ ์ถฉ๋ถํ ์ค๋ช ๊ณผ ์ค์ ์์ ์ผ๋ก ๊ฒฝํํ๊ณ ๊ฐ์ธ ํฌํธํด๋ฆฌ์ค ์น์ฌ์ดํธ ์ ์์ ์์ ๊ฐ์ ๊ฐ๊ฒ ๋ฉ๋๋ค. ํ์๋ก ์ฌ์ฉํด์ผ ํ๋ ์ ์ด์ฟผ๋ฆฌ ํ๋ฌ๊ทธ์ธ์ผ๋ก Scroll Reveal Animation๊ณผ Slick ์ฌ๋ผ์ด๋ ์ฌ์ฉ๋ฒ์ ํ์ตํฉ๋๋ค. ๋ฐ์ํ ์ ์ ๋ฐฉ์์ ๊ธฐ์กด ๋ฐฉ์์ float์ position์ ์ด์ฉํ ๋ฐ์ํ ๋ ์ด์์ ์ ์ ๋ฐฉ์์ผ๋ก ์ ์ํฉ๋๋ค. ํ์ง๋ง ์ด๋ ํน์ ์์์์๋ Flex๋ฅผ ์ฌ์ฉํ๋ ๋ถ๋ถ๋ ์์ต๋๋ค.
์ฝ๋ฉ์์ค ์๊ฐ์ ์ฌ๋ฌ๋ถ~ ์์ ์ ๋ฐ์ดํธ ์์์ ๋๋ค.
๋ฐ์ํ ์ ๋๋ฉ์ด์ ๋ชจ๋ฌ ๋ง๋ค๊ธฐ ์์์ด ์ ๋ฐ์ดํธ๋์์ต๋๋ค
๋ชจ๋ฌ์ฐฝ ๋ง๋ค๊ธฐ๋ฟ๋ง ์๋๋ผ ๋ฐ์ํ ๋ ์ด์์ ์ ์์ ์ํ CSS ์์ฑ์ ๋ํด์ ์์ธํ ์ค๋ช
๋์ด ์์ต๋๋ค.
ํ์ง๋ง ์์์ด ๊ธด ๋งํผ ์ฒ์ฒํ ์ฐจ๋ถํ๊ฒ ์์ ๋ง๋ค๊ธฐ ๋ณด์๋ฉด์ ์ค์ตํ์๋ฉด ๋ฉ๋๋ค.
CSS ์์ฑ์ ๋ณ๊ฒฝํด์ ๋ชจ๋ฌ์ฐฝ์ด ๋ํ๋ ๋ ๋ค์ํ๊ฒ ๋ณ๊ฒฝํ ์ ์์ต๋๋ค.
๊ทธ๋ฆฌ๊ณ ๊น๋ํ๊ณ ์ฌ์ด ์ ์ด์ฟผ๋ฆฌ ์ฝ๋๋ก ๋ชจ๋ฌ์ฐฝ์ ์ ์ดํฉ๋๋ค.
์์ฑ๋ณธ ํ์ผ๊ณผ ์ค์ต ์์คํ์ผ์ ์ธํ๋ฐ ๊ฐ์์์ ๋ค์ด๋ก๋ ๋ฐ์ผ์ค ์ ์์ต๋๋ค.
์ด๋ ค์ด ์๊ธฐ์ง๋ง ๋ ๊ฑด๊ฐํ์๊ณ ์ด์ฌํ ํ์ธ์~!!
โผ ๋ฐ์ํ ์ ๋๋ฉ์ด์ ๋ชจ๋ฌ(HTML+CSS+JQUERY) - 1๋ถ
โผ ๋ฐ์ํ ์ ๋๋ฉ์ด์ ๋ชจ๋ฌ(HTML+CSS+JQUERY) - 2๋ถ