๐ 7์ 2์ฃผ์ฐจ ํ๊ณ
๐๏ธ vue transition ํ์ธ ํ์
vue๋ฅผ ๊ฐ๋ฐํ๋ฉด์ ์ ๋๋ฉ์ด์ ๊ฐ์ ๋ถ๋ถ๋ค์ด ํ์ํ ๋๊ฐ ์๋ค. ํ์ง๋ง v-if๋ฅผ ์ฐ๊ณ ์ ๋๋ฉ์ด์ ์ ์ฉํ๋ฉด ๋์ง ์๋๋ค.๊ทธ๋ฆฌํ์ฌ vue์์๋ transition๋ฅผ ์ ๊ณตํ๊ณ ์๋ค. transiton์ ํตํด ์ ๋๋ฉ์ด์ ๊ตฌ์ถ์ด ๊ฐ๋ฅํ๋ค. ์ด ๋ถ๋ถ์ ๋ํ์ฌ ๋ธ๋ก๊ทธ๋ฅผ ์จ๋ณด๋๋ก ํด์ผ๊ฒ ๋ค.
โ๏ธ css ๊ณตํตํ ํ์
ํ์ฌ ํ์ฌ์์๋ ๋น ๋ฅด๊ฒ ๊ฐ๋ฐ์ ํ๋ค๋ณด๋ css๊ฐ ์ค๊ตฌ๋๋ฐฉ์ผ๋ก ๋์ด์๋๋ฐ ์ด๊ฒ์ ์ด๋ป๊ฒ ๊ณตํตํ ์ํฌ์ง ๊ณ ๋ฏผ์ด ํ์ํ๋ค. ์์ ํ๊ตฐ๋ฐ์ ๊ด๋ฆฌํ๋ค๋์ง, ๊ทธ๋ฌํ ๋ถ๋ถ์ด ๊ณ ๋ฏผ์ด ํ์ํ๋ค.
๐งงcss ์๋๋จ์ ํ์ธ ํ์
๋ฐ์ํ์ ๊ฐ๋ฐํ๋ค๋ณด๋ฉด px์ผ๋ก ํ๋ฉด ํญ์ ํฌ๊ธฐ๊ฐ ๊ณ ์ ์ด๋ผ ํผ๋ธ๋ฆฌ์ฑํ ๋ ์ ๋งค๋ชจํธ ํ ๋๊ฐ ์๋ค. ๊ทธ๋ฆฌํ์ฌ ์๋๋จ์ rem,em,vw,vh์ ๋ํด ์์๋ณด๋๋ก ํ์
๐ canvas ๋ถ์
์ด๋ฒ์ ์ ๋๋ฉ์ด์ ์์ ์ค canvas์ผ๋ก ์์ ํ๋ ๊ฒฝ์ฐ๊ฐ ๋ฐ์ํ์๋๋ฐ, canvas์ ์ฐ์ด๋ ํจ์๋ค์ ๋ํด์ ์ดํด๋ฅผ ํ์ง ๋ชปํ์๋ค. ๊ทธ๋ฆฌํ์ฌ ์ด๋ค ๊ตฌ์กฐ๋ก ๋ง๋ค์ด์ง๋์ง ์ด๋ ค์ด ๋ถ๋ถ์ด ์์ด ํ์ธ ํ์ํ๋ค.