ITeus

안녕하세요. Teus입니다. 이번에는 지금까지 만든 성분들이 한번에 Fade-in 되는것이 아니라 유저가 스크롤 함에 따라서 천천히 Fade-in 되는 효과를 만들어 보도록 하겠습니다. # 1. Intersection Observer APIIntersect Observer API는 유저가 특정 Component에 관찰할 경우 해당 관찰 여부를 알려주는 Web표준 기능 입니다. 그래서 보통은 이 기술을 사용해서 인피니티스크롤(스크롤을 내리면 내리면서 계속 새로운 컨탠츠가 생기는 것) 을 구현할때 주로 사용됩니다. 이 Intersect Observer를 활용할 경우, 아래처럼 보다 미려한 모바일 청첩장을 만들수가 있죠    동영상으로 보니깐 뭔지 바로 이해게 되시죠? 이제 Intersection Observ..

안녕하세요 Teus입니다. 이번에는 결혼식에서 또 빠지면 섭한 마음(?) 전하는 곳을 추가해 보도록 하겠습니다. # 1. 설계하기이번같은 경우 신랑/신부 각각의 정보를 따로따로 볼 수 있으면 좋을것 같습니다. Flip/unFlip 방법도 괜찮지만 Gallery에서 만들었던 modal 기능을 재활용 해보려고 합니다. 대표사진 삭제사진 설명을 입력하세요.이렇게 만들기 위해서 일단 Account.jsx 파일을 만들어 줍니다. Account.jsxconst Account = () => { return ( 마음 전하실 곳 신랑측 계좌번호 신부측 계좌번호 )}export default Accoun..

안녕하세요 Teus입니다. 드디어 모바일 청첩장의 모양세가 완성되어가고 있습니다. 이번에는 결혼식이 어디서 열리는지, 해당 내용을 담을 부분을 완성 하겠습니다. # 1. 설계하기이번 포스팅은 큰 내용은 없습니다. 약도 이미지를 확보하고, 해당하는 위치로 이동하기 위한 이동 방법을 기술하면 됩니다. 저는 아래처럼 설계를 했습니다.그러면 이 접근을 위해서 약도와 한글주소, 접근방법을 확인할 필요가 있을탠데요 대부분 이용하시는 웨딩컨밴션의 홈페이지가 있으실겁니다. 거기서 정보를 획득해 옵니다.  여기서 약도를 mymap.png 로 저장해 주고 나머지 텍스트는 임시로 저장해 줍니다. 그리고 이 내용을 활용해서 이제 Navi.jsx, Transport.jsx를 만들어 줍니다. Navi.jsximport weddi..