๐ฑ ํฌํธํด๋ฆฌ์ค ๐ฑ
1.Scroll Animation ๊ตฌํ
Vanilla JS์ TypeScript๋ฅผ ๊ณ๋ค์ฌ์ Scroll ๋น์จ์ ์ํ Animation ์ ์ฉํ๋ ๋ฐฉ๋ฒ
2.Accordion menu ๊ตฌํ
details์ summary๋ฅผ ์ด์ฉํ Accodian menu ๊ตฌํ๊ณผ ์ ๋๋ฉ์ด์ ์ ์ฉ ๋ฐฉ๋ฒ์ ๋ํ ํฌ์คํธ
3.image carousel ๊ตฌํ
valliaJS๋ก image-carousel ๊ตฌํํ๋ ๋ฐฉ๋ฒ์ ๋ํ ํฌ์คํธ
4.์์ง์ด๋ ๋ฐฐ๊ฒฝํ๋ฉด ๊ตฌํ
์์ง์ด๋ ๋ฐฐ๊ฒฝํ๋ฉด ๊ตฌํ ๋ฐฉ๋ฒ์ ๋ํ ํฌ์คํธ
5.TOC ( Table Of Contents ) ๊ตฌํ
TOC ๊ตฌํ ๋ฐฉ๋ฒ์ ๋ํ ์์์ ์ค๋ช
6.๐งน ๊ธฐ๋ณธ ์ธํ ๐งน
ํฌํธํด๋ฆฌ์ค๋ฅผ ๋จ์ํ ํ ์คํธ๋ก ์ฝ๊ธฐ๋ณด๋ค๋ ์น ํ๋ก ํธ์๋ ๊ฐ๋ฐ์์ธ ๋งํผ ์นํ์ด์ง๋ก ๋ง๋ค์ด์ ๋ฐฐํฌํ๊ณ ๊ฒ์์์ง์ ์ํด ๊ฒ์๋๋๋ก ๋ง๋ค์ด๋ณด๊ณ ์ถ์ด์ ๊ฐ๋ฐ์ ์์ํ์ต๋๋ค.
7.๐ฎ ์คํฌ๋กค์ ์ํ ์ ๋๋ฉ์ด์ ๐ฎ
์คํฌ๋กค์ ์ํ ์ ๋๋ฉ์ด์ ๋ฐฉ๋ฒ ์ ๋ฆฌ by IntersectionObserver
8.๐ ์์ธ ๋ด์ฉ ๋ณด๊ธฐ ( <details>, <summary> ) ๐
<details>, <summary>, ResizeObserver์ ๋ํ ์ ๋ฆฌ
9.๐ง ์ ์ ๋ฐ์ดํฐ ๊ด๋ฆฌ ๋ฐ ๋งํฌ๋ค์ด ํ์ฑ
๋งํฌ๋ค์ด ํ์ผ์์ front-matter๋ฅผ ์ฝ๋ ๋ฐฉ๋ฒ๊ณผ markdown์ ํ์ฑํด์ html๋ก ๋ง๋๋ ๋ฐฉ๋ฒ์ ๋ํ ์ค๋ช ๊ธ
10.๐ ๋ชฉ์ฐจ ์คํฌ๋กค ( TOC )
๋ชฉ์ฐจ ์คํฌ๋กค ๊ตฌํ ๋ฐฉ๋ฒ ์ ๋ฆฌ