본문 바로가기

Study

[GSAP] 2. 기본 메서드 2. 기본메서드 2-1. to() gsap.to()는 가장 일반적인 유형으로 대상 값을 어딘가로 가게 하는 값이다. gsap.to(".item", {x: 100, y:100, duration:1}); .item을 1초동안 x로 100, y로 100 이동시킨다. gsap.to()는 현재값을 자동으로 파악하여, 시작 값이 필요하지 않는다. 2-2. from() gsap.from()은 to와 반대라고 생각하면 쉽다. gsap.from(".item", {opacity:0, y:100, duration:1}); DOM요소의 현재 위치가 목표값이고, y는 100에서 0까지 나아간다. 2-3. fromTo() gsap.fromTo()는 시작과 끝 값을 지정한다. DOM의 현재값이 무엇이었떤 간에, 애니메이션을 실행하.. 더보기
[Javascript] header 스크롤 방향 이벤트 제거하기 포트폴리오 반응형을 들어가보니 이것저것 신경쓸게 많았다. 이번 포스팅의 주제도 원래는 아무 생각없이 반응형을 완성 시켰다는 거에 만족하면서 즐겁게 쭈꾸미를 먹다가 문득 생각이 나서 휴대폰을 열어 포폴의 모바일 버전을 살펴보고 문제점을 발견했다. 내가 PC버전을 제작하면서 한눈에 한 페이지를 볼 수 있도록 스크롤을 내릴시에는 header가 숨겨지도록 했고 다른 페이지로 이동하기 위해 스크롤을 올릴때 header가 보여지도록 만들었다. 그런데 이게 모바일에서도 필요한건지 문득 생각이 난거다. 가끔 그런 모바일 페이지도 본것같지만 보통의 모바일 페이지는 항상 상단이나 하단에 메뉴가 자리잡고 있다. 그래서 일단 이 이벤트를 어떻게 없앨지 script.js를 열어보았다. $(function() { var prev.. 더보기
[Javascript] header 스크롤 방향 이벤트 상단의 header에 position:fixed를 주면서 top:0, left:0에 위치해서 스크롤 시에도 header가 노출이 되어 스크롤시 가끔은 디자인을 가려서 아쉬울 때가 있다. 그래서 스크롤을 아래로 내리면 헤더는 사라지고, 스크롤을 위로 올리면 헤더는 다시 나타나는 기능을 구현했다. 스크롤을 위로 올린다는 것은 위에 내용을 보거나 다른 곳으로 이동하고 싶다는 의미이기 때문에 UX를 위한 기능이라고 볼 수 있다. 일단, $(function() { var prevScrollTop = 0; document.addEventListener("scroll", function(){ var nowScrollTop = $(window).scrollTop(); //현재 스크롤 위치를 nowScrollTop 에 .. 더보기
[HTML/CSS] html 비디오 태그 다운로드 방지하기 html에서 video태그를 이용해서 영상을 재싱하면 컨트롤 바를 이용한다. 그 컨트롤바의 내용 중 다운로드 버튼을 숨기고 싶을 경우에는 controlsList = "nodownload" 를 사용한다. video태그 전체를 보면 이러하다 더보기
[JQuery] jquery 소스 사이트 모바일 레이아웃 http://themeforest.net/item/notifico-mobile-retina-html5-css3-and-iwebapp/5735344 플러그인 모음 http://flowplayer.org/tools/demos/index.html 다양한 효과 소스 http://tympanus.net/codrops/category/tutorials/ jquery,html5 등으로 코딩된 디자인 요소 소스 http://www.htmldrive.net/ jquery의 모든것을 알려주는 사이트 http://api.jquery.com/ 더보기
[Git/Github] 변화를 버전에 담기 더보기 본 글은 유튜브를 참고해 개인적으로 정리한 글입니다. https://youtu.be/1I3hMwQU6GU No comits yet (comits = 버전 이라고 생각하면 된다) Untracked 추적하지 않는 파일 : Git의 관리에 들어간 적 없는 파일 파일 하나를 담을 때는 git add 파일명.확장자 모든 파일을 담을 때는 git add . 버전에 담기 아래 명령어로 commit git commit 아무것도 입력이 되지않는다. Vi 입력 모드로 진입 입력시작 : i 입력종료 : esc 저장없이 종료 : :q 저장없이 강제종료 : :q! 저장하고 종료 : :wq FIRST COMMIT 입력한 뒤 저장하고 종료 커밋메시지까지 함께 작성하기 git commit -m "FIRST COMMIT" 하고.. 더보기
[Git/Github] Git에게 맡기지 않을 것들 더보기 본 글은 유튜브를 참고해 개인적으로 정리한 글입니다. https://youtu.be/1I3hMwQU6GU 굳이 포함할 필요가 없거나 보안상의 문제로 포함하지 말아야할때 Git의 관리에서 특정 파일/폴더를 배제한다. .gitignore 파일을 사용해서 배제할 요소들을 지정할 수 있다. 중요한 문서를 만들고 git status 명령어를 입력하면 이렇게 뜨는 것을 확인할 수 있는데 이때 .gitignore 파일을 생성하고 내용에 배제할 파일.확장자명 을 입력 후 저장하면 더이상 뜨지 않는 걸 확인 할 수 있다. 자세한것은 여기서 알아볼 수 있다. https://git-scm.com/docs/gitignore Git - gitignore Documentation The optional configurat.. 더보기
[Git/Github] Git 설정 & 프로젝트 관리 시작하기 더보기 본 글은 유튜브를 참고해 개인적으로 정리한 글입니다. https://youtu.be/1I3hMwQU6GU 1) Git 설정 Git 전역으로 사용자 이름과 이메일 주소를 설정 (Github 계정과는 별개) Git bash에서 아래 명령어 실행 git config --global user.name "(본인 이름)" git config --global user.email "(본인 이메일)" 아래 명령어들로 확인한다. git config --global user.name git config --global user.email 기본 브랜치명 변경 git config --global init.defaultBranch main 2) 프로젝트 생선 & Git관리 시작 내가 원하는 곳에 폴더를 생성한다. 그걸 v.. 더보기

티스토리툴바