transform-style: preserve-3d
[์์] layout ์งค ๋ flex? grid?
- flex๋ฅผ ์ฌ์ฉํ๋ ์ด์
wrap์ ์จ์ ๋ฐ์ํ์ผ ๋ ์์ดํ ์ด ์๋์ ์ผ๋ก ์๋๋ก ๋ฐฐ์น๋๊ฒ ๋ง๋ค๊ธฐ ์ํด์, ํน์ ์์ดํ ์ด ๋ ์ถ๊ฐ๋ ๊ฒฝ์ฐ๋ฅผ ๋๋นํด์- grid๋ฅผ ์ฌ์ฉํ๋ ์ด์
์์ดํ ์ด fix์ด๊ณ UI๊ฐ ๊นจ์ง์ง ์๋๋ก ํ๊ธฐ ์ํด์
flex-basis
flex-basis
์ width
๊ฐ ๊ฐ์ด ์ ์ธ๋์ด์์ผ๋ฉด flex-basis๊ฐ width ์์ฑ์ ๋ฎ์ด๋ฒ๋ฆฐ๋ค. ํ์ง๋ง width๊ฐ ๊ฐ์ ์ฑ์ด ๋ ๋์์ ์ค์ ์ ์ฉ๋๋ ๊ฑด width ๊ฐ์ด ์ ์ฉ๋จ.flex-basis
์ ๊ธฐ๋ณธ๊ฐ์ auto
์ด๋ค. ํ์ง๋ง flex:1
๊ณผ ๊ฐ์ด flex
์์ฑ์ ์ ์ธํ๋ฉด ์๋์ผ๋ก flex-basis:0
์ด ๋๋ค.splitting.js
ํ์ฉํ์ฌ 3D ์ํ text animation ๋ง๋ค๊ธฐsplitting.js
๋ผ๋ ํ๋ฌ๊ทธ์ธ์ ํ์ฉํด์transform
์์ฑ์ผ๋ก css text animation์ ๋ง๋ค์ด๋ณด์๋ค. ์ด๊ฒ ๋ฐ๊นฅ ์ํต(?)์ด๋ ์์ชฝ ์ํต์ text length๊ฐ ๋น์ทํด์ผ ๊ธ์๋ผ๋ฆฌ ์ ๊ฒน์น๊ณ ์ ๋์จ๋ค. ์๋ฒฝํ ๋ฐ์ง ๋ชจ์์ ๊ตฌํํ์ง ๋ชปํ๋ค. ์์ธํ ๋ณด๋ฉด ํ
๋๋ฆฌ๊ฐ ๊ณก์ ์ด ์๋๊ณ ๊ธ์๋จ์๋ก ๊ฐ์ ธ์๋ค. ๊ฐ ๊ธ์ ํ๋ํ๋์ char
ํด๋์ค๋ฅผ ๋ถ์ฌํด์ ์คํ์ผ์ ์ฃผ๋ ๋ฐฉ์์ด๋ผ์ ๊ทธ๋ฐ๊ฑด๋ฐ ๊ฐ ๊ธ์์ ๊ณก์ ์ ์ฃผ๋ ์คํ์ผ๋ง์ ํ ์ ์์์ง ๊ณ ๋ฏผํด๋ด์ผ๊ฒ ๋คtransform
์ด๋ animation
์์ฑ ์ฐ๋ฉด์ css๊ฐ ์ผ๋ง๋ ๊ฐ๋ ฅํ์ง ๋ค์ ํ๋ฒ ๊นจ๋ซ๊ฒ ๋์๋ค๋ช์ผ ์ ์ CSS ๋ฐฉ๋ฒ๋ก ๋ฐฐ์ฐ๋ฉด์ ๋ชจ๋ํ ํ๋ ๋ฒ์ ๋ฐฐ์ ์๋๋ฐ ๋ชจ๋ํํ๋๊ฒ ๋๋ฌด ์ด๋ ต๋ค ๊ทธ๋ฅ ํผ๊ทธ๋ง์ ๋์์๋๋๋ก ํ๋ฉด์ ๋๊ฐ์ด ๊ทธ๋ ค์ง๊ฒ ํ๋ ๊ฑด ์ ๋ง ์ฌ์ด๋ฐ ๋ชจ๋ํ๋ฅผ ๊ณ ๋ คํ๋ฉด์ CSS ์คํ์ผ๋ง์ ํ๋ ๊ฒ์ด ๋๋ฌด ์ด๋ ค์ด ๊ฒ ๊ฐ๋ค ์ฐ์ต์ด ๋ง์ด ํ์ํ๋ค
์ฐ์ต์ ๋ง์ด ํ๋ ค๋ฉด ๊ทธ๋งํผ ์๊ฐ์ ๋ค์ฌ์ ํด์ผํ๋๋ฐ ์์ฆ ๊ณ์ ์์
์๊ฐ ๋๋๊ณ ๋๋ฉด ํผ์ ธ๋ฒ๋ฆฐ๋ค๐ญ ๋จธ๋ฆฟ์์ผ๋ก๋ ํญ์ '์ ๋
๋จน๊ณ 7์๋ถํฐ ๋ฐ๋ก ๋ค์ ๊ณต๋ถํด์ผ์ง' ์๊ฐํ๊ณ ์๋๋ฐ ๋งค๋ฒ 2์๊ฐ ๋๊ฒ ์ฌ๊ฒ๋๋ค ์ํด.. ์คํ๋ผ์ธ์ผ๋ก ์ ๋
๋ชจ๊ฐ์ฝ๊ฐ ์์์ผ๋ฉด ์ข๊ฒ ๋๋ฐ ๊ทธ๋ฃน์๋คํ๊ณ ์๊ธฐํด๋ด์ผ๊ฒ ๋ค