์ฒ์์ ์ด๊ธ์ ๋์์ด ์๋ ์ฑ ์ผ๋ก ๋จผ์ ์์ํด์ ๊ทธ๋ฐ์ง ๊ฐ์ ๋ค์ผ๋ฉด์๋ ์ข ๊ฑฑ์ ๋์ ใ ์๋ฐ์คํฌ๋ฆฝํธ๋ ์์ง ์ ๋ชปํ๋๋ฐ ์ดํด๊ฐ ์ ๋ ๊น ์์ฒญ ๊ฑฑ์ ํ์๋ค์๊ทธ๋๋ ์ฌ์ ๊ฑฑ์ ํ๋ ํธ์ด๋ผใ ใ ใ ใ ใ ๊ทธ๋๋ ๊ฐ์ ํ๋ํ๋ ๋ณด๋ฉด์ ์ฝ๋ ๋ฐ๋ผ์น๊ณ ํ๋๊น ๊ฝค ์ดํดํ๊ธฐ ์ฌ์ ์๊ฐ์๊ฐ ํํธ๋ณ
<figure>ํ๊ทธ: ์ฝํ, ๋ค์ด์ด๊ทธ๋จ, ์ฌ์ง ๋ฑ ๋ฌธ์์ ์ฃผ์ ํ๋ฆ๊ณผ๋ ๋ ๋ฆฝ์ ์ธ ์ฝํ ํธ๋ฅผ ์ ์. ๋ฌธ์์ ๋ด์ฉ๊ณผ๋ ์ฐ๊ด์ฑ์ ๊ฐ์ง๋ ์ฝํ ์ธ ์ ์์น๊ฐ ๋ฌธ์์ ์ฃผ์ ํ๋ฆ๊ณผ๋ ๋ ๋ฆฝ์ ์ด์ด์ ์ ๊ฑฐํด๋ ๋ฌธ์์ ํ๋ฆ์ ์ํฅ์ ์ฃผ์ด์๋ ์๋จ. ๊ทธ๋ฆผ ๋ฑ์ ์ฝํ ์ธ ๋ฅผ ํํํ๋ ํ๊ทธ์ด์ง๋ง
๋ฒจ๋ก๊ทธ์ ์ฌ๋ฆด๊ฑด ๋ง์๋ฐ ์ ์ ์ด ์์ด์ ์ ๋ฆฌ๋ฅผ ๋ชปํ๊ณ ์์...์ผ๋จ ์ ํ๋ธ api๋ก ๋์์ ์ฒจ๋ถํ๋๊ฑฐ๋์คํฌ๋กค์ ์์ญ๋ณ๋ก ํ์ฑํ ๋๋ ํญ์ด๋ ๋ ๋ญ์ง ๋ทฐ ๊ณต๋ถํ๊ฑฐ๋.. ์ํผ ์ ๋ฆฌํด์ ์ฌ๋ ค์ผํจ ๊ทธ๋๋ ์ด๋ฒ ํ๋ก์ ํธํ๋ฉด์ ์๋ก ํด๋ณธ๊ฒ๋ ๋ง๊ณ ์๊ฒ๋๊ฒ๋ ๋ง๋ค fullpage.j
์น ์ ํ๋ฆฌ์ผ์ด์ ์ ๋ง๋ค๊ธฐ ์ํ ๋ผ์ด๋ธ๋ฌ๋ฆฌ์ด์ ํ๋ ์์ํฌ. MVVM(Model-View-ViewModel) ํจํด์ ํ๋ฐฉํ๋ ์ฝ์ด ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ViewModel์ ์ง์ค๋์ด ์๊ณ ๋ณ๊ฐ๋ก ๋ถ๊ฐ์ ์ธ ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ค์ ์ ๊ณตํด ์ข ํฉ์ ์ธ ํ๋ ์์ํฌ๋ฅผ ์ ๊ณตํ๋ค. Visual Studio
์์ฆ ์ ํ๋ก์ ํธ ํ๋ ์ค์ธ๋ฐ ์ง์ฌ ๋จธ๋ฆฌ ๋ค ๊ตณ์ด์ ํฐ์ผ์๋ง์์ด ์ฐฉ์กํ๋ค๐คฆโโ๏ธ๐คฆโโ๏ธ์ง์ง ๋ญ๋ ์ง ์์ฐ๋ฉด ๋ค ๊น๋จน๋๊ฐ๋ณด๋คํ๋ฌ๊ทธ์ธ๋ค ํ์์ ์ข ์ฐพ์์ ์ฐ์ต๋ ํ๊ณ ํด๋ก ์ฝ๋ฉ๋ ์ข ํ๊ณ ๊ทธ๋์ผ๊ฒ ์ ์ด๋ ๊ฒ ๋งจ๋ ํ ์ผ๋ง ์ ๋ฆฝํ๋ ์ค ํ ์ผ์ด ๋์ด์์ผ๋ฉด ์ง์์ ์ฌ๋ฒ๋๋ค
vue ์ฑ ๋ถ์ฒ ์ต์ ๋ฃ์ด์ ์ฃผ๋ฌธํ๋๋ฐ ๋ถ์ฒ ์ด ์๋์ ์ด...๊ทธ๋ฅ ์ฐ๋ ค๊ณ ๋ถ์ฒ ์ทจ์ํ๋๋๋ฐ ์๋ด์์ด ์ฑ ์์ฒด๋ฅผ ์ทจ์ํ๋ค๋๋ง์ธ์ค ์๊ณ ์ทจ์ํด๋ฒ๋ฆด๋ปํ์ ์ข ๋นํฉ์ค๋ฝ๋ค ์ผ๋จ ์ฑ ์ด ์จ๊ฑฐ๋ณด๋๊น ์๊ฐ๋ณด๋ค ์ข ๋๊บผ์์ ๋๋์ ํ ์ ์์์ง๋ ๋ชจ๋ฅด๊ฒ ์ง๋ง... ์ผ๋จ ์ํ๋๊ฑฐ๋ณด๋ค๋ ๋์ํ
svg ์ด๋ฏธ์ง ๋ค๋ฃจ๊ธฐ์์๋ณ๊ฒฝํฌ๊ธฐ์กฐ์ keyframe ์ ๋๋ฉ์ด์ <path> ํ๊ทธ์ style="fill:\_\_\_" ์์ฑ์ ์ฌ์ฉํ๊ฑฐ๋, ๋ ๊ฐ๋จํ๊ฒ fill="\_\_\_" ์์ฑ์ ์ฌ์ฉํ์ฌ svg ์ด๋ฏธ์ง์ ์์์ ์ ์ดํ ์ ์๋ค. ์์์ rgbํํ, hex ๊ฐ,
์ง๋ ๊ธ์ ์ธ๋ jsFiddle์ ๋ณธ๋ฌธ์ ์ฝ์ ํ์๋๋ฐ, ๋ฏธ๋ฆฌ๋ณด๊ธฐ ํ์ด์ง์์๋ ์ ๋๋ก ์๋ํ์ง๋ง ์ค์ ๋ณด์ฌ์ง๋ ๋ถ๋ถ์์๋ ๋ด์ฉ์ด ๋ณด์ด์ง ์์๋ค. ๋งํฌ๋ ์ฝ์ ๋ฐฉ๋ฒ์ด ์๋ชป๋์์์ง๋ ๋ชจ๋ฅธ๋ค๊ณ ์๊ฐํด์ ์ฌ๋ฌ๋ฒ ์๋ํด๋ดค์ง๋ง ์ ๋์ง ์์๋ค. ๊ทธ๋์ ์ฐพ์๋ณธ ๊ฒฐ๊ณผ, ์๋ฌด๋๋ jsF
Math.floor() ์ฃผ์ด์ง ์ซ์์ ๊ฐ๊ฑฐ๋ ์์ ์ ์ ์ค์์ ๊ฐ์ฅ ํฐ ์๋ฅผ ๋ฐํํ๋ ํจ์.์์๋ฅผ ์ฐ๋ฉด ๊ฐ์ฅ ๊ฐ๊น์ด ์ ์๋ฅผ ๋ฐํํด ์ค๋ค ์ ์ด์ฟผ๋ฆฌ ์ฌ์ฉํ ์ซ์ ์นด์ดํ ์ ๋๋ฉ์ด์ . each๋ก ๊ฐ๊ฐ์ ํด๋์ค์ ์ด๋ฒคํธ๋ฅผ ๊ฑธ์ด์ค์์ง ๋ฐฐ์ด์ ์ ๋ชจ๋ฅด๊ฒ ๋๋ฐ ์ข ๋ ๊ณต๋ถํด์ผํ ๋ฏ๐ค