박데이터 분석

파비콘 만드는 사이트

http://tools.dynamicdrive.com/favicon/ Dynamic Drive- FavIcon Generator FavIcon Generator Use this online tool to easily create a favicon (favorites icon) for your site. A favicon is a small, 16x16 image that is shown inside the browser's location bar and bookmark menu when your site is called up. It is a good way to brand you tools.dynamicdrive.com 파비콘 만들고 나서 구역 에 만 추가해주면 파비콘 등록 완료!

SEO 용어정리

1. 기본용어 - 검색엔진 최적화 (SEO) : 검색엔진에서 찾기 쉽도록 사이트를 개선하는 프로세스 - 검색엔진 (Search engine) : 구글, 야후, 네이버와 같은 검색엔진 - SERP : Search Engine Results Pages 의 약자로 검색엔진 결과 페이지를 의미 - On-page SEO : 소유하고 있는 웹사이트상에서 수행하는 최적화 작업 - Off-page SEO : 해당 웹사이트가 아닌 다른 공간에서 이루어지는 최적화 작업 - On-SERP SEO : 검색결과 페이지에서 이루어지는 최적화 작업 - Black hat SEO : 검색엔진의 정책에 반하는 SEO 작업 - White hat SEO : 검색엔진이 권장하는 방식의 SEO 작업 - Gray hat SEO : 블랙햇과 화이..

15가지 부의 덕목 - '부자의 언어'를 읽고

1. 책제목 : 부자의언어(The Wealthy Gardener) _ 어떻게 살아야 부자가 되는지 묻는 아들에게 2. 지은이 : 존 소포릭 (이한이 옮김) 3. 출판사 : 윌북 4. 스크랩 - 15가지 부의 덕목 (LESSON 6, p376) ⓐ 단순함 Simplicity : 부를 추구하는 일에는 단순성이 필요하다. 나는 매일 아침 영혼을 재충전하고자 명상을 했다. 압박 속에서 차분하고 이성적인 정신을 유지하기 위해 하루하루 마음 챙김 상태로 있었다. 내 앞에 놓인 일들에 온전히 초점을 맞추고 완전히 집중하자, 시간이 천천히 흘러가는 듯했다. 경제적 자유를 추구한 덕분에 나는 단순함의 미덕을 배웠다. _ 정원과 서재를 가지고 있다면, 필요한 모든 걸 가지고 있는 것이다. - 키케로 ⓑ 무심함 Detach..

[JavaScript] 옛날 영화상영을 연상케하는 '고화질' 비디오 재생하기

영화라는 것이 처음 발명되었을 때는, '영상'보다는 '움직이는 사진'에 가까웠다고 한다. 지금의 '고화질'이라는 조건을 충족시키기 위해 영상의 초기 시발점으로 돌아간다는 것이 나는 조금 소름이돋았다. 결국 '기술은 기초(원리)가 탄탄해야되는 구나' 랄까 무튼! 그 방법은 영상을 프레임수 많큼 이미지로 쪼개 스크롤에 반응하여 이미지가 교체되어 '움직이는 이미지'를 '고화질 영상'으로 웹상에서 보다 최적화된 용량으로 제공하는 것이다. * { margin: 0; padding: 0; } body { height: 500vh; } body.before-load { overflow-y:hidden; } .sample-img { position: fixed; top: 0; left: 0; width: 100%; }..

스크롤로 비디오 제어하기

const videoElem = document.querySelector('.sample-video'); let progress-ratio; let currentFrame; function init() { document.body.classList.remove('before-load'); window.addEventListener('scroll', function () { progress-ratio = pageYOffset / (document.body.offsetHeight - window.innerHeight); console.log(progress-ratio); if (progress-ratio 1) progress-..

[JavaScript] Babel - 자바스크립트 컴파일러 사용법

스튜디오 밀님의 강좌를 토대로 정리한 글입니다. 1. Babel 이란 ? 자바스크립트는 계속해서 발전해 나가고 있는 대표적인 언어로써, 신버전의 문법(ES6)이 나온지 꽤 됐지만, 개발자들의 적 '인터넷익스플로어' 같은 구버전의 OS들에는 적용이 잘 되지않아, 서비스를 배포할때에는 구버전의 문법으로 배포해주어야 하는데, 그때 사용하는 것이 바벨이다. 2. Babel 사용법 1) Node JS 설치 2) npm 프로젝트 초기화 프로젝트 폴더에서, npm init -y 3) babel-cli (바벨씨엘아이)_바벨을 터미널창에서 사용할수 있도록해주는_ 설치 npm install --save-dev babel-cli -g 옵션으로 글로벌로 설치하거나, 각 프로젝트마다 다른 babel 버전을 사용하는 경우 --s..