์ค๋ฌด์์ ์ฌ์ฉํ๋ ์ธํฐ๋ํฐ๋ธ JS, CSS ๋ ธํ์ฐ๋ฅผ ์๋์์ด ๊ณต๊ฐํฉ๋๋ค.
์ด๋ฐ ๊ฑธ
๋ฐฐ์์!
Vanilla JS ์ธํฐ๋ํฐ๋ธ ๊ฐ๋ฐ ๋ ธํ์ฐ
CSS 3D, ์ ๋๋ฉ์ด์ , ํธ๋์คํผ, ํธ๋์ง์
์์ฐ์ฑ์ด ๋์์ง๋ TweenMax ์ฌ์ฉ๋ฒ
StageResize , ๋ฐ์ํ ์ธํฐ๋ํฐ๋ธ
Mobile Touch ๋ฐ orientation(๊ธฐ์ธ๊ธฐ) ํ์ฉ
์น ์ธํฐ๋์ , ๋ ์ฝ๊ณ + ๋ ์ฐฝ์์ ์ผ๋ก! ๐
๋จ์ ์๋น์ค ๊ตฌํ์ ๋์ด ํธ๋ ๋ํ UX๋ฅผ ๊ตฌํํ๋ ค๋ฉด ํํํ ๊ธฐ๋ณธ๊ธฐ๊ฐ ๊ฐ์ฅ ์ค์ํฉ๋๋ค. ํน์ ํ๋ ์์ํฌ๋ ํ๋ฌ๊ทธ์ธ์ ์์กดํ์ง ์๊ณ ์์ ์๋ฐ์คํฌ๋ฆฝํธ(Vanilla JS) ๋ง์ผ๋ก ํด์ธ ์ ๋ช ์ฌ์ดํธ์ ํธ๋ ๋ํ UX๋ฅผ ๊ตฌํํ ์ ์์ต๋๋ค.
TweenMax๋ฅผ ์ด์ฉํ ํ๋ คํ ๋ชจ์ ๋ถํฐ ์คํฌ๋กค ์ด๋ฒคํธ, ๋ฐ์ํ, ๋ชจ๋ฐ์ผ ํฐ์น๊น์ง 15๋ ๊ฐ์ ์ธํฐ๋ํฐ๋ธ ๊ฐ๋ฐ ๋ ธํ์ฐ๋ฅผ ์๋์์ด ๋ด์์ต๋๋ค. (์งง๊ณ ๊ตต๊ฒ!)
โ๋์์ด๋, ๊ธฐํ์๊ฐ ์ด๋ ค์ด ํจ๊ณผ๋ฅผ ์ํด์...โ
โ์์ด๋์ด๋ ์๋๋ฐ ๊ตฌํ์ด ์ด๋ ค์์โ
โ์๋ฐ์คํฌ๋ฆฝํธ ๊ณต๋ถ๋ ํ๋๋ฐ ํ์ฉ์ ๋ชปํด์โ
โ๋ณต๋ถํด์ ์ฌ์ฉ์ ํ๋๋ฐ ์์ฉ์ ๋ชปํ๊ฒ ์ด์โ
โํผ๋ธ๋ฆฌ์
์ ๋ฒฝ์ ๊นจ๊ณ ์ฐ๋ด์ ์ฌ๋ฆฌ๊ณ ์ถ์ด์โ
์ ๋ ๋์์ธ๊ณผ ์ถ์ ์ ๊ฐ๋ฐ ๋น์ ๊ณต์์ ๋๋ค. ๊ธฐ์ด๊ฐ ๋ถ์กฑํ ๊ฒ ์๋, ์์ ๊ธฐ์ด๊ฐ ์์ด ๊ฐ๋ฐ์ ๋ฐ์ด๋ค์์ต๋๋ค. ๊ณ ํต์ค๋ฌ์ธ ์ ๋๋ก ํ๋ค์๋ ๊ฒฝํ์ด ์์ด์ ์ด๋ค ๊ฒ ์ด๋ ค์ด์ง, ์ด๋ค ๋ถ๋ถ์์ ๋งํ๋์ง๋ฅผ ์ ์๊ณ ์์ต๋๋ค. ๋น์์ โ์ด๋ฐ ๊ฐ์๊ฐ ์์์ผ๋ฉด ์ ๋ง ์ข์๊ฒ ๋คโ๋ ์ฌ์ ์ผ๋ก ์ด๋ฒ ๊ฐ์๋ฅผ ๋ง๋ค์์ต๋๋ค.
์ค์ ํ์
์ ๊ฐ๊น์ด
์ค์ ํ ์์
์ธํฐ๋ํฐ๋ธ ๊ธฐ๋ณธ์๋ฆฌ
๊ฐ๊ฒฐํ ์ฝ๋๋ก ์ค๋ช
์ง๋ฃจํ ์ด๋ก ๋์
์ค์ ์ผ๋ก ์งํ
์์ค ์ ๊ณต!
ํจ๊ป ๋ณด๋ฉฐ ์์
์งํ
์น์์ ๋ฐ๋ก ๋ณด๊ธฐ ํด๋ฆญ
Q. ๋น์ ๊ณต์๋ ๋ค์ ์ ์๋์?
์ ๋ ๋น์ ๊ณต์์ ๋๋ค ^^ ์ธํฐ๋ํฐ๋ธ ๊ฐ๋ฐ์ ๊ด์ฌ๋ง ์์ผ๋ฉด ์ถฉ๋ถํฉ๋๋ค.
Q. ๊ฐ์๋ฅผ ๋ฃ๊ธฐ ์ ์ค๋นํด์ผ ํ ๊ฒ์ด ์๋์?
HTML, CSS ๊ธฐ์ด๋ ์๊ณ ๋ค์ผ์๋๋ฉด ํธํฉ๋๋ค. (CSS ์ ์ฒด ์ฝ๋ ํฌํจ๋์ด ์์ต๋๋ค ^^)
Q. ์๋ฐ์คํฌ๋ฆฝํธ(JavaScript)๋ฅผ ์ ๋ชจ๋ฅด๋๋ฐ ๊ด์ฐฎ์๊น์?
๋ณ์, ๋ฐฐ์ด, ํจ์ ๋ฑ ๊ธฐ์ด์ ์ธ ๊ฐ๋
๋ถํฐ ์์ํฉ๋๋ค.
์งํํ๋ค ๋ชจ๋ฅด์๋ ๊ฒ์ ์ง๋ฌธ ๊ฒ์ํ์ ํตํด ์ง๋ฌธํด ์ฃผ์ธ์!
์๊ฐ ์ ์ฐธ๊ณ ํด์ฃผ์ธ์!
ํ์ต ๋์์
๋๊ตฌ์ผ๊น์?
์ทจ์ค์, ๋์์ด๋, ํผ๋ธ๋ฆฌ์ , ํ๋ก ํธ ๊ฐ๋ฐ์
ํด์ธ ์ฌ์ดํธ์ฒ๋ผ ์ฐฝ์์ ์ธ ๊ฐ๋ฐ์ ํ๊ณ ์ถ์ ๋ถ
JS๋ฅผ ๋ณต๋ถํด์ ์ฌ์ฉ์ ํ๋๋ฐ ์์ฉ์ด ํ๋ ๋ถ
๋จ์ ๊ธฐ๋ฅ ๊ตฌํ์ ๊ฐ์ฑ์ ๊ฐ๋ฏธํ๊ณ ์ถ์ ๋ถ
์ ์ ์ง์,
ํ์ํ ๊น์?
HTML, CSS ๊ธฐ๋ณธ์ง์
์๊ฐ์ ์
3,221
์๊ฐํ ์
214
๊ฐ์ ํ์
4.7
๊ฐ์ ์
3
15๋ ์ด์ ์ฌ๋ฌ ๊ธฐ์ ๊ณผ ์ธ๋ก ์ฌ์์ front-end ๊ฐ๋ฐ ๋ฐ
๋ฐ์ดํฐ ์๊ฐํ, ์ธํฐ๋ํฐ๋ธ ์ฌ์ดํธ ์ ์์ ํ์ต๋๋ค.
https://brunch.co.kr/@yahao2512
์ ์ ํจ๊ป ๊นํธ์ฒ๋ผ ๊ฐ๋ฒผ์ด ์ฝ๋ฉ ํจ๊ป ํด๋ณด์์ฃ !
์ ์ฒด
47๊ฐ โ (5์๊ฐ 33๋ถ)
๊ฐ ์ ๊ณต๋๋ ๊ฐ์์ ๋๋ค.
์ โฉ17,600
5๊ฐ์ ํ ๋ถ ์
โฉ88,000