본문 바로가기

전체 글

[Git/Github] 시작하기 (CLI vs GUI) 더보기 닫기 본 글은 유튜브를 참고해 개인적으로 정리한 글입니다. https://youtu.be/1I3hMwQU6GU git을 사용하는 두가지 방법 CLI(Command Line Interface) : 명령줄을 입력해서 사용 GUI(Graphical User Interface) : 일반인 사용자들이 쓰기 편하도록 그래픽 요소를 이용한 인터페이스 Git을 공부할 때는 CLI 위주로 실습해서 명령어들과 동작 방식을 익힐 것 사용할 때는 작업의 성질에 따라 편리하고 유리한 것으로 혼용할 것 Git에 어던 기능들이 있고 어떻게 동작하는지 CLI로 직접 명령어들을 입력해보면서 익혀두어야 Git에 대해 보다 정확히 이해하고 제대로 사용할 수 있다. 더보기
[Git/Github] 시작하기 (설치와 세팅 - 윈도우) 더보기 본 글은 유튜브를 참고해 개인적으로 정리한 글입니다. https://youtu.be/1I3hMwQU6GU 개발협업을 위해 버전관리, 형상관리 툴로 깃허브를 많이 이용한다. 요즘엔 개발자 뿐만아니라 퍼블리셔도 거의 필수적으로 쓴다고해서 포폴 디자인 작업도 끝났겠다. 코딩 작업을 앞두고 주말을 이용해서 깃과 깃허브에 대해서 공부해보려고 한다. 1. Git을 해야하는 이유 Git은 VCS라는 종류의 프로그램들 중 하나다. Version Control System 프로그램의 버전 관리를 위한 툴 프로젝트의 시간과 차원을 관리하는 프로그램이다. 시간 - 프로젝트의 버전을 과거로 되돌리거나 특정 내역을 취소할 수 있다. 차원 - 프로젝트의 여러 모드를 쉽게 전환하고 관리할 수 있다. 2. 설치와 세팅 (윈도.. 더보기
[HTML/CSS] favicon(파비콘, favorite icon) 파비콘으로 만들 이미지 파일을 준비하고, 이미지 파일을 파비콘으로 변경해주는 웹페이지에서 이미지를 변경한다. https://www.favicon-generator.org/ 웹페이지를 나타내는 아이콘, 웹페이지의 로고를 설정합니다. 루트 경로에 favicon.ico 파일이 있으면 자동으로 로딩하기 때문에 를 따로 작성할 필요가 없지만, 만약 favicon.png 파일을 사용하려면 다음과 같이 를 작성할 수 있습니다. 더보기
[Javascript] scrolla.js scrolla.js 적용법 1. 먼저 js 폴더에 scrolla.js파일을 저장한다. 2. js 폴더에 script.js 파일을 만든다. 3. html > head 부분에 작성한다 /* 항상 순서는 제이쿼리가 먼저 나와야 한다.*/ 4. body부분 애니메이션 줄 부분에 animate 클래스 넣고 data-animate="motion" 작성한다. 5. scrolla.js가 잘 삽입되었는지 개발자 도구(F12)에서 확인한다. 6. script.js에 아래 스크립트 작성 $(function() { $('.animate').scrolla({ mobile: true, //모바일버전시 활성화 once: false //스크롤시 딱 한번만 하고싶을땐 true }); }); 7. css파일에 애니메이션 적용하는 부분에.. 더보기
[Javascript] splitting.js 적용법 참조 https://splitting.js.org/ 1. HTML에서 적용할 부분을 로 묶고 data-splitting을 적는다 Commit to developing the newest technologies and build a more prosperous future 2. 모션을 줄 곳. css에 .char 나 .word를 작성 (.char는 낱글자, .word는 단어에 애니메이션을 적용한다.) h2 .char { display: inline-block; animation: slide-up 1s cubic-bezier(.10, 0, .10, 1) both; animation-delay: calc(60ms * var(--char-index)); } 3. js에 splitting();을 호출한다. //s.. 더보기
[GSAP] 1. 설치방법 GSAP 이란? 타임라인 기반의 애니메이션 자바스크립트 라이브러리이다. CSS와 바닐라 자바스크립트만으로도 동적인 화면을 만들 수 있지만 GSAP은 세밀한 움직임과 동작의 연속성을 훨씬 간편하게 설정할 수 있다. 1. 설치 방법 CDN, NPM, 다운로드 파일을 직접 연결하는 등 여러 방법이 있는데 가장 간편하게는 CDN을 연결해서 사용하는 것이다. https://greensock.com/docs/v3/Installation Docs Documentation for GreenSock Animation Platform (GSAP) greensock.com 이와 같은 GSAP의 다양한 플러그인 중 필요한 것들을 선택해서 html에 복사 붙여넣기를 하면 된다. 더보기

티스토리툴바