디자인과 개발 그 사이

svg를 다룰 줄 알게되면 별별 신기한 효과를 낼 수가 있다. https://www.stellaachenbach.com/ (우측 하단에 눈동자모양에 마우스를 올려보세요👀)그치만 코드로 그림을 표현한다는 것에 대한 심적 부담감이 크다면 Figma를 통해서 한번

HTML을 처음 배우기 시작했던 작년 여름, 해외 웹사이트들을 눈팅하다가 한눈에 반해버렸던 2D/3D WebGL 라이브러리 - three.js 🤩시각적인 결과물을 내는 작업을 좋아하는 나에게는 아주아주 매력적인 도전 과제였다.현란한 애니메이션과 3D 요소들이 너무 복

벡터 이미지를 SVG로 추출할 때 Figma가 정말정말정말 유용하다.특히 이미지의 요소들을 따로 따로 애니메이션으로 조작해야 할 때, 피그마에서 미리 그룹을 지어서 내보내서 그룹별로 ID를 가져와서 사용하면 되니 아주아주 간편하다. (파일 추출시 "Include ID

💁‍♀️ Data Driven DocumentsD3.js는 데이터 시각화 Javascript 라이브러리로, 데이터를 바탕으로 HTML의 DOM을 직접 조작하는 것이 특징!D3는 DOM을 '직접' 제어하고 React는 Virtual DOM으로 문서를 조작합니다. 두 라

이번 게시글에서는 데이터 시각화 라이브러리인 D3.js와 React.js의 Hooks를 이용하여 곡선 그래프를 간단하게 만들어보겠습니다. D3.js를 처음 접하신다면, 전편인 D3.js + React.js (Hooks) 함께 사용하기 -1 를 간단히 훑고 돌아와주

The Muratorium 유튜브 채널의 Using React (Hooks) with D3 튜토리얼을 우리말로 요점 정리한 포스팅입니다. 튜토리얼 영상을 꼭 보고 와주세요! 영어 튜토리얼이 익숙치 않으셔도 한번 쭉 보시고 와서 본 포스팅을 보시면 이해가 되실 거예요.

제 개인 포트폴리오 웹사이트(만들다가 잠정 중단된,, 😅)에 사용된 애니메이션 효과중에서 주위에서 반응이 좋았던 마우스커서 애니메이션을 소개해드리고자 합니다! 코드도 짧고 난이도도 쉬운 편이니 한번 도전해보세요!

올해 초 단기 프로젝트로 세달간 반응형 웹사이트 퍼블리싱 을 했었습니다.증맬 빡세기도 했지만 퍼블리싱에 대해 정말 압축적으로 많이 배운 좋은 경험이었지요. 그런데 이후 몇달간 프론트엔드 공부만 하니 잊혀지는 것 같아서 예전에 간단히 정리해놓았던 글을 다시 꺼내서 정리해

같은 코드, Chrome하고 Safari에서는 다른 화면?