G.SUNAH
PORTFOLIO
HELLO, WORLD!
Plan and
orgnize
anything
- Blog
-
JavaScript &
CSS Animation -
Work
Projects -
Website
Portfolio - Contact Me
Helloโ๐ป
My SideProject
-
React Auckland์ฒซ ๋ฒ์งธ๋ก ์ ์ํ React ์ฌ์ดํธ์ ๋๋ค.
์น์ ๋ณ๋ก jsx ํ์ผ์ ๋ง๋ค์ด export ํ ํ App.js์์ import ํ์ฌ ๋ฐ์์ ์ปดํฌ๋ํธ ๋จ์๋ก ์ฌ์ดํธ๋ฅผ ์ ์ํ์์ต๋๋ค. ๋ํ props๋ฅผ ์ฌ์ฉํ์ฌ ํฐํธ๋ช , ๋ฐฐ๊ฒฝ์ ๋ฑ์ ์ ๋ฌํ๊ณ ์ ์ฉ์์ผฐ์ต๋๋ค. -
React Hotels Combined๋ ๋ฒ์งธ๋ก ์ ์ํ REACT ์ฌ์ดํธ์ ๋๋ค.
npm์ ํตํด Swiper๋ฅผ ์ค์นํ์ฌ Autoplay์ loop ๊ธฐ๋ฅ์ด ์ถ๊ฐ๋ ์ฌ๋ผ์ด๋๋ฅผ ๊ตฌํํ์๊ณ , SCSS๋ฅผ ์ฌ์ฉํด ์คํ์ผ๋ง ํ์์ต๋๋ค. -
React API SiteAPI๋ฅผ ํ์ฉํ React ์ฌ์ดํธ์ ๋๋ค.
TMDB , Youtube , Unsplash API๋ฅผ ํ์ฉํ์ฌ ์ํ, ์์, ์ด๋ฏธ์ง ๊ฒ์ ๊ธฐ๋ฅ์ ์ ์ํ์๊ณ BrowserRouter๋ฅผ ์ฌ์ฉํ์ฌ URL ์ฃผ์์ ๋ฐ๋ผ ๋ค๋ฅธ ํ๋ฉด์ ๋ ๋๋ง ํด์ฃผ์์ต๋๋ค. -
React Youtube APIYoutube API๋ฅผ ํ์ฉํ REACT ์ฌ์ดํธ์ ๋๋ค.
์ผ์ชฝ ๋ฉ๋ด๋ฅผ ํด๋ฆญํ๋ฉด ํด๋น ํค์๋๋ก ๊ฒ์ํ ๊ฒฐ๊ณผ๋ฅผ ๋ณด์ฌ์ฃผ๊ณ , useState์ onChange๋ฅผ ์ฌ์ฉํ์ฌ input value ๊ฐ ์ค์ ์ ํด์ฃผ์์ต๋๋ค. -
Vue Vue SiteVue ์ฌ์ดํธ ์ ๋๋ค.
์น์ ์ ์ปดํฌ๋ํธ๋จ์๋ก ๋๋์ด ์์ ํ์์ต๋๋ค. -
PHP PHP sitePHP ์ฌ์ดํธ ์ ๋๋ค.
ํ์๊ฐ์ , ๋ก๊ทธ์ธ, ๊ฒ์๋ฌผ ๋ฑ๋ก, ๋๊ธ ์์ฑ์ ํ ์ ์๋ ๊ธฐ๋ฅ์ ์ ์ํ์์ต๋๋ค.
Hello,
My
CSS Animation
-
Marquee
transform์ ์ฌ์ฉํ์ฌ x์ถ์ผ๋ก ์ด๋ํ์ฌ
marquee ํจ๊ณผ๋ฅผ ์ฃผ์์ต๋๋ค. -
Wave Effect
๊ฐ์ animation ํจ๊ณผ์ ์์ง์ด๋ ์๊ฐ์ ๋ค๋ฅด๊ฒ ํ์ฌ
์ถ๋ ๊ฑฐ๋ฆฌ๋ ๋ฌผ๊ฒฐ ํจ๊ณผ๋ฅผ ์ฃผ์์ต๋๋ค. -
Sticky Effect
display: flex๋ฅผ ์ฌ์ฉํ์ฌ ์ด๋ฏธ์ง๋ฅผ ๊ฐ์ด๋ฐ ์ ๋ ฌํ์๊ณ ,
position: sticky๋ฅผ ์ฌ์ฉํ์ฌ ๊ฒน๊ฒน์ด ์์ด๋ ํจ๊ณผ๋ฅผ ๋ง๋ค์์ต๋๋ค. -
Todo List
before, after ๊ฐ์์์๋ฅผ ์ฌ์ฉํ์ฌ
checkbox ๋์์ธ์ ํ์์ต๋๋ค. -
Shiny Card
background-clip ๋ฅผ ์ฌ์ฉํ์ฌ ๊ธ์จ์ ์๋ฐ ํจ๊ณผ๋ฅผ ์ฃผ์์ต๋๋ค.
transform : rotate ๋ฅผ ์ฌ์ฉํ์ฌ ์์ง์ด๋ ํจ๊ณผ๋ฅผ ์ฃผ์์ต๋๋ค. -
Snowball
background gradient๋ฅผ ์ฌ์ฉํ์ฌ
์ค๋ ธ์ฐ๋ณผ์ด ์์ง์ด๋ ํธ๋ ์ ์๋๊ฐ์๋ ํจ๊ณผ๋ฅผ ์ฃผ์์ต๋๋ค.