---์๋ ํ์ธ์ ๋์์ธ๊ณผ ๊ฐ๋ฐ์ ์ฌ๋ฏธ๋ฅผ ๊ฐ์ง๊ณ ๊ฐ์๋ฅผ ๋ง๋๋ ๋ฒ์ค์ ๋๋ค ๐ -----------------------------------------------------์จ๋ผ์ธ / ์คํ๋ผ์ธ ์ถ๊ฐ ๋ฌธ์๋ seonbeom2@gmail.com ์ผ๋ก ์ฐ๋ฝ์ฃผ์ธ์ ๐โโ
Courses
Reviews
- Design System with Figma
- GSAP Guide for Web Animation Part.03
- GSAP Guide for Web Animation Part.01
- GSAP Guide for Web Animation Part.02
- The 7 Best Notion Templates You Can Make Yourself
Posts
Q&A
์ปฌ๋ฌ๋งตํํ๊ณ ๋ผ์ดํธ/๋คํฌ ๋ชจ๋ ์ค์ ์ ์์ ๋ฐ์ ์ด ์๋ผ์ ใ ใ
์๋ ํ์ธ์ ์ด์์ฐ ๋ ํด๋น ์ง๋ฌธ์ ๋ํ ์ ๋ฐ์ดํธ ์์์ ์ ์์์ ์ถ๊ฐํด๋์ ์ ์ด ์์ต๋๋ค. ํด๋น ๋ด์ฉ์ ํ์ธํ์๊ณ ๋ง์ง๋ง ์์์ ๋จผ์ ์์ฒญํ์ ํ ์ดํ ์์ ์ ์งํํด ์ฃผ์๋ฉด ๋์ฑ ์ข์ ๊ฑฐ ๊ฐ์ต๋๋ค. https://www.inflearn.com/course/%EB%94%94%EC%9E%90%EC%9D%B8-%EC%8B%9C%EC%8A%A4%ED%85%9C-with-%ED%94%BC%EA%B7%B8%EB%A7%88/news/1355091๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 36
Q&A
FOUC ๊ด๋ จ ์ง๋ฌธ์ ๋๋ค!
์๋ ํ์ธ์ yooniverse ๋ ๐ ์ ํํ ํ์ธ์ ์ํด ๊นํ ์ฃผ์๋ฅผ ๊ฐ์ด ๋จ๊ฒจ์ฃผ์ค ์ ์์๊น์~?
- 1
- 1
- 40
Q&A
scroll Draw SVG์์ ์ค์ ์ด ์๋ ์ ์ ์ผ๋ก ๊ทธ๋ฆฌ๊ณ ์ถ์ด์
์๋ ํ์ธ์ ssooya90 ๋ ๐ strokeDasharray๋ง์ผ๋ก๋ dotted stroke์ ์ ๋๋ฉ์ด์ ์ ๊ตฌํํ๊ธฐ์ ํ๊ณ๊ฐ ์์ต๋๋ค.(์ ๋ค์ด ๋ชจ์ฌ ์ ์ ์ด๋ฃจ๋ ๊ตฌ์กฐ์ด๊ธฐ ๋๋ฌธ์ ๊ทธ๋ ์ต๋๋ค) ๊ทธ๋์ ์ ์ ํ์นธ์ฉ ์ ๋๋ฉ์ด์ ์ ๋ฐ๋ณต์ ์ฃผ์ด dotted stroke๋ฅผ ๊ทธ๋ ค๋๊ฐ๋ ๋ฐฉ์์ ์ฌ์ฉํด์ผ ํฉ๋๋ค.์๋์ ์ฝ๋๋ฅผ ์ฐธ๊ณ ํด๋ณด์ธ์ https://codepen.io/kindtigerr/pen/bNbaowq ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 1
- 39
Q&A
ํํธ 4 ์คํ ์ผ์ ๋ฌธ์
์๋ ํ์ธ์ ํ๋ด๊ฒฝ๋ ๐ ์ ๊ฐ์๋ฅผ ์ข๊ฒ ๋ด์ฃผ์ ์ ๊ฐ์ฌ๋๋ฆฝ๋๋ค ๐โโ์๋ง ๋ด๋ ์ด์ ํผ๊ทธ๋ง ์จ๋ผ์ธ ๊ฐ์ ์คํ ํ ๋ด๋ ๋ง์ฏค์ ํํธ4 ๊ฐ์๊ฐ ์ฌ๋ผ๊ฐ์ง ์์๊น ํฉ๋๋ค. ์น ์ ๋๋ฉ์ด์ ์ ๊ด์ฌ ๊ฐ์ ธ์ฃผ์ ์ ๊ฐ์ฌํ๊ณ , ์ดํ์ 25๋ ์ดํ์ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์์ ๋ฆฌ์กํธ ๊ฐ์๋ ์์๋๋ก ์คํํ ์์ ์ด๋ ๋ง์ ๊ด์ฌ ๋ถํ๋๋ฆฝ๋๋ค ๐ ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 48
Q&A
๊นํ๋ธ sync ์ค๋ฅ
์๋ ํ์ธ์ ๊น์ฌ์๋ ๐ ๊นํ ์ ์ ๋ช ๊ณผ ์ ์ฅ์ ์ด๋ฆ์ ๋์๋ฌธ์๊ฐ ๋ค ๋ง๋์ง ํ์ธํด์ฃผ์๊ณ , ํน์ ์๋ก์ด ์ ์ฅ์๋ฅผ ๋ง๋ค๊ณ ํธ์ํ๋ ๊ฑฐ๋ผ๋ฉด, ์๋ก์ด ์ ์ฅ์์ ์๋ฌด๊ฒ๋ ์์ผ๋ฉด ์ฌ๋ผ๊ฐ์ง ์์ต๋๋ค.README.md ํ์ผ ํ๋๋ผ๋ ์ฌ๋ ค ๋์ผ์ ์ผ ํด๋น ํ ํฐ์ด ์ฌ๋ผ๊ฐ ์ ์์ต๋๋ค! ์ด ๋ถ๋ถ๋ ํ์ธํด์ฃผ์ธ์ :)
- 1
- 2
- 61
Q&A
GSAP์ ์ฌ์ฉํ๋ฉด์ ๋ฆฌ์ฌ์ด์ง ์ ์ ๋๋ฉ์ด์ ๊ฐ ์ฌํ ๋น์ ๋ํด ์ง๋ฌธ๋๋ฆฝ๋๋ค.
์๋ ํ์ธ์ ๋ณด๋ฅด์ฝ๋ ๐ DOM ๊ฐ์ฒด์ ์์ฑ์ GSAP์ด ๊ด๋ฆฌํ๋ ๋์์ด ์๋ Javascript ์์ฒด์ ์ฒ๋ฆฌ ๊ฒฐ๊ณผ์ด๊ธฐ ๋๋ฌธ์์ง์ ๊ฐ์ ธ์ฌ ๊ฒฝ์ฐ ์ด๋ฒคํธ๋ฅผ ์ฌ์ฉํด ์ ๋ฐ์ดํธ๋ฅผ ํด์ค์ผ ํฉ๋๋ค.DOM ๊ฐ์ฒด๋ฅผ GSAP์ผ๋ก ๋ฐ์์ฑ์ ์ง์ ์ ์ดํ๊ณ ์ ํ๋ค๋ฉด gsap.to(elem,{ x:()=>{ // ์ฝ๋ฐฑ ์ฌ์ฉ } }) ์์ฑ์ ์ฝ๋ฐฑ ํจ์๋ฅผ ์ฐ๊ฒฐํ์ฌ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.์ฝ๋ฐฑ ๋ฐฉ์์ ์ฌ์ฉํ๋ฉด gsap์ด ์ ๋ฐ์ดํธ ๋ ๋๋ง๋ค ๊ฐ์ ์๋กญ๊ฒ ๊ณ์ฐํ๊ธฐ ๋๋ฌธ์ ๋ณด๋ค ํธํ๊ฒ ์ ๋๋ฉ์ด์ ์ ์ด๊ฐ ๊ฐ๋ฅํฉ๋๋ค. Q. ์คํฌ๋กค์ ์ค๊ฐ์ผ๋ก ๋ด๋ ธ์ ๋์ฒ๋ผ ์ ๋๋ฉ์ด์ ์ด ์ค๊ฐ์ ๋ ์งํ๋ฌ์ ๋์ ๊ฐ์ ๊ฒฝ์ฐ๋ฅผ ์ฒ๋ฆฌํ๋ ๋ฐฉ๋ฒ์ด ๋ฐ๋ก ์๋์ง๋ ๊ถ๊ธํฉ๋๋ค.์ด ๋ถ๋ถ์ ๋ํด์ ์ ๊ฐ ์ ๋๋ก ์ดํดํ์ง ๋ชปํด ๋ต๋ณ์ ๋๋ฆฌ๊ธฐ ์ด๋ ต์ต๋๋ค ใ ^ใ ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 54
Q&A
์ค๋ฌด์ค ์คํฌ๋กค๋ฐ ๋ชจ๋ฐ์ผ์์ ๋ป๋ปํ ๋๋์ด ๋ค์ด์!
์๋ ํ์ธ์ rinrinhye๋ ๐ ๋ชจ๋ฐ์ผ์ ํ๊ฒฝ์ด ๋ค์ํด์ ์ ํํ ๋ต๋ณ์ ๋๋ฆฌ๊ธด ์ด๋ ค์ธ ๊ฒ ๊ฐ์ต๋๋ค. ๊ณต์ ๋ฌธ์์์ ์๋ดํ๋ ๋ด์ฉ์ ํ์ฑํ / ๋นํ์ฑํ๋ฅผ ์ ๊ณตํ๊ฑฐ๋ ํ๋ฌ๊ทธ์ธ์ ์ฌ์ฉํด delta ๊ฐ์ ๋ค๋ฅด๊ฒ ๋ด๋ณด๋ด๋ ํํ๋ก ์ฌ์ฉ์ด ๊ฐ๋ฅํ๋ค๊ณ ์ ์ํ๊ณ ์์ต๋๋ค. mobile scroll disabled https://github.com/idiotWu/smooth-scrollbar/issues/159smooth-scroll mobile issue :https://github.com/idiotWu/smooth-scrollbar/issues?q=%08mobile๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 113
Q&A
์ ์๋ ์๋ ค์ฃผ์ ๋ด์ฉ์ ๊ธฐ๋ฐ์ผ์ ๊ตฌํํ๊ณ ์ถ์ UI๊ฐ ์์ต๋๋ค.
์๋ ํ์ธ์ eljsh95๋ ๐ ๊ณต์ ์ ๋๋ฉ์ด์ ์ ๋ํ ์ง๋ฌธ์ด ๋ง์ ํ ์คํธ๋ก ์ค๋ช ๋๋ฆฌ๊ธฐ ํ๊ณ๊ฐ ์์ด์์์ผ๋ก ์ ์ํ์ฌ ๋ต๋ณ์ ๋๋ ค๋ด ๋๋ค. ์น์ 5. GSAP utils method ๋ถ๋ถ์ ์ผ๊ฐํจ์ ํํธ๋ฅผ ๋ ์ฝ๋ฉ์ผ๋ก ๋จ๊ฒจ๋จ์ผ๋ ์ฐธ๊ณ ํ์ฌ ์ค๋ฌด์ ๋ฐ์ํด๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 99
Q&A
์ ๋ฐ์ดํธ ๋ฒ์ ํ ํฐ ์คํ๋์ค import ์ ..and 2 more
์๋ ํ์ธ์ ์ค์ฌ์ฉ๋ ๐ ๋ณดํต์ and 2 more ๋ถ๋ถ์ ํด๋ฆญํ๋ฉด ํ๋จ์ ๋ ๊ธธ๊ฒ ๋์ค๊ฒ ๋ฉ๋๋ค. ํน์ ํด๋ฆญ์ ํด๋ ๋์ค์ง ์์๊น์?
- 1
- 1
- 88
Q&A
OneScroll Layout ์ง๋ฌธ ๋๋ฆฝ๋๋ค!
์๋ ํ์ธ์ ๊น์ธ์ง๋ ๐ ๋น์ทํ ์ง๋ฌธ์ ๋ํ ๋ต๋ณ์ด ์์ด ๋งํฌ๋ฅผ ๊ณต์ ๋๋ฆฝ๋๋ค.์ฒซ ๋ฒ์งธ ์ง๋ฌธhttps://www.inflearn.com/community/questions/1376447/onescroll-layout-1-%EA%B0%95%EC%9D%98%EC%A4%91-%EC%A7%88%EB%AC%B8-%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4์ฐ๊ฒฐ๋ ๋ ๋ฒ์งธ ์ง๋ฌธhttps://www.inflearn.com/community/questions/1376900/onescroll-layout-1-%EA%B4%80%EB%A0%A8-%EC%9E%AC%EC%A7%88%EB%AC%B8%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4 ํด๋น ์ฝ๋๋ ํ์ต ์๋ฃ ์์ ์ฒจ๋ถํด๋จ์ผ๋ ๋ค์ ํ์ธํด๋ณด์๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. ๊ฐ์ฌํฉ๋๋ค :)
- 1
- 2
- 78