프로그래밍/HTML/CSS/JavaScript 썸네일형 리스트형 Base64, Blob URL Image Binding 기법. 안녕하세요? 이번 포스팅에서는 Blob (Binary Large Object), Base64 를 사용하여 img 태그에 데이터를 바인딩 하는 방법에 대해 포스팅 하고자 합니다.간혹 웹페이지에 있는 이미지들을 특수 목적에 의해 이미지를 불러와 base64 로 바인딩 하는 경우가 종종 있습니다. 용량이 크고 많은 이미지가 아니라면 base64 로 바인딩해서 사용하는 부분에 큰 문제가 되지 않지만,용량이 크고 많은 이미지를 base64 로 바인딩 사용한다면,base64 String 에 의해 DOM 문서 크기가 상당히 커지면서 성능에 대한 저하가 있습니다.따라서, 이런 문제를 해결하기 위해 blob 객체로 바꾸고, blob URL 을 사용하여 이미지를 바인딩한다면,이런 성능 저하 문제를 어느 정도 해결 할 수 .. 더보기 움직이는 이미지 스크롤 모션 구현 하기. 이번 포스팅에서는 스크롤 모션을 구현하는 방법에 대해 포스팅 하겠습니다. 본 포스팅은 CSS/JavaScript/HTML 기본 문법을 숙지 하고 있다고 가정 하에 설명하겠습니다. 보통 데스크탑 환경에서는 스크롤 모션을 넣는 경우는 드물지만, 모바일 환경에서는 많은 앱, 웹에서 스크롤 모션을 구현하여 사용 하고 있습니다. 네이버 블로그 모바일 화면에서도 스크롤을 통한 모션이 들어가 있고, 카카오에서 제작한 brunch(브런치) 앱에서도 스크롤 모션이 메인으로 사용되고 있습니다. 이번 포스팅에서는 이러한 스크롤 모션을 모바일 웹브라우져 에서 구현하는 방안에 대해서 포스팅 하도록 하겠습니다. (카카오 브런치와 동일한 모션을 구현하겠습니다.) 먼저, 아래 스크롤 모션을 먼저 봐주시기 바랍니다. 네이버 모바일 블.. 더보기 이전 1 다음
