about web

[홈페이지구축시] 자주사용하는 툴

0. 이미지 최적화 https://tinypng.com/ 파일명도 안바뀌고 너무 좋타 ㅜㅜ 1. PuTTY 명령어가끔쓰지만 너무나 유용한 putty명령어정리 ls디렉토리 조회rm -f 파일삭제rm -rf 폴더삭제mv 파일/폴더 이동 및 이름변경tar cvfz .tar.gz 폴더 gz압축tar xvfz .tar.gzgz압축 풀기tar cvf .tar 폴더 tar압축tar xvf .tartar압축 풀기cd 폴더이동chmod 파일 권한수정chmod -R 폴더와 폴더내 권한수정

오픈소스 플레이어 VLC로 프레임 추출하기

0. 다운로드https://www.videolan.org/vlc/download-windows.html 1. 프레임 추출 방법 (1) 다운로드 후 실행 화면 (2) ctrl+P 눌러서 환경설정으로 들어가서 '전체' 클릭 (3) 비디어 > 필터> 장면필터 (4) 이미지형식 / 이미지 저장 폴더 경로 설정/ 녹화비율 설정 : 녹화비율은 영상의 프레임 속도와 맞춰주면 1초당 한프레임이 추출된다. (5) 필터 섹션에서 '장면 비디오 필터' 체크 후 저장 (6) 그리고 추출하고자 하는 영상을 재생하면 지정해둔 경로로 이미지가 저장된다.

홈페이지 최적화하기

1. 네이버 웹마스터 도구 등록 (네이버 서치 어드바이저) https://searchadvisor.naver.com/ 네이버 서치어드바이저 네이버 서치어드바이저와 함께 당신의 웹사이트를 성장시켜보세요 searchadvisor.naver.com (1) 먼저, 이게 내 홈페이지(블로그)라는걸 인증하기 위해, 서피어드바이저에서 제공해주는 메타태그를 등록하고자 하는 사이트 HTML 코드 내 에 삽입해야 한다. (2) 사이트 등록확인 / 로봇 텍스트 네이버 웹마스터도구에 등록이 제대로 되었는지 확인하는 방법은, 메뉴의 검증에서 웹 페이지 최적활로 들어가서 아무것도 입력하지 않고 확인을 누르면, '검색 로봇 수집'이라고 있다. 여기에 모두 초록색으로 체크가 되어있다면 성공, 단 'robot.txt'가 "!"로 되어..

[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..