개발 공부일기

아묻따 코드 만들거 = 캐러셀 구조 = container > button-left / slider / button-right slider css .slider { --slider-index: 0; transform: translateX(calc(var(--slider-index) * -100%)); transition: transform 250ms ease-in-out; } 목적이 뭐냐면 저 slider-index를 변수로 써서 가로값 트랜스폼 줄꺼 그러면 button-left를 클릭하면 slider-index가 마이너스값, button-right를 클릭하면 플러스값이 되어야 함 클릭했을때 +1 -1하니까 리액트가 생각이나네 여튼 이벤트리스너 달건데 그냥 버튼에 쿼리셀렉터 다는게 아니라 화면에 클릭이 일..

gsap tools -tweenlite -tweenmax -timelinelite -timelinemax -plugins tweenlite cdn " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenLite.min.js"> " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/plugins/CSSPlugin.min.js"> *autoAlpha:0 === opacity: 0; + visibility: hidden; tweenlite의 basic method 4가지 1. to // 이 vars안에 들어가는거는 ..

출처 : https://greensock.com/get-started/ GSAP이란 자바스크립트 쓰는 곳 어디든지 갖다쓸수있는 애니메이션 플러그인 캔버스태그써서 three.js, pixi.js랑 써도되고 리액트같은데도 당연히 쓸수있고 그냥 플러그인 자체만으로도 사용가능 자주쓰이는 플러그인은 1. splitText 2. Draggable 3.MorphSVGPlugin 4.DrawSVGPlugin 5..MotionPathPlugin 초간단 사용법 " target="_blank" rel="noopener">https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"> cdn으로 불러와주고 박스 하나 만들어서 색깔, 크기값 주기 html: div1 css: ..

출처: https://www.youtube.com/watch?v=36HrZHzPeuY ES6 1. Shorthand property names key와 value가 동일한 경우 줄여쓰기 가능 { const es6 = { name: 'js', age: 'very long', }; const name = 'js'; const age = 'very long' const es7 = { name, age, } } 2. Destructuring assignment 오브젝트의 key와 value에 접근할때 예를들면 student.name 이런식으로 쓰는데 이걸 const { name, level } = student; 이렇게 작성가능 3. Spread syntax 배열 복사할때 [...배열명] [...배열명1, ....

유튜브 출처: https://www.youtube.com/watch?v=CojyGfCMvuU 깃헙 링크: https://github.com/minyeokang/three 3d 애니메이션 라이브러리로 동적인 웹 구현해보기 내가 요즘 캔버스 공부하고 이런 애니메이션 플러그인 알아보고있었는데 마침 내사랑 코딩애플 선생님이 three.js 이용해서 3d 그래픽 렌더링하는걸 올려주셨다 따라해보자! 1.sketchfab에서 무료 3d glTF파일 다운로드 glTF이란? GL Transmission Format // JSON기반 3차원 장면과 모델을 표현하는 파일 포맷 2.기본셋팅 html에 canvas 그려주고 npm으로 three.js 설치하던지 cdn쓰던지 하고 import해오기 //나는 npm안쓰고 그냥 강의..

출처: https://www.youtube.com/watch?v=Yvz_axxWG4Y&t=994s main subject 이 캔버스 컨테이너는 그래픽 컨텐츠를 담는 박스 이 박스안에 무언가를 그려넣으려면 자바스크립트를 작성해야한다, 자세한 기초 내용은 이곳을 참고하고 https://unikys.tistory.com/274 why should i use this? 일단 html에 이미 내장되어있음 = 내가 다운받아서 쓸 필요도 없고 자바스크립트로 마음껏 컨트롤해서 다양하게 구현이 가능하다. 사실 이렇게 애니메이션 주는 자바스크립트 라이브러리가 한두개가 아니다 이전 포스팅인 pixi.js도 결국 애니메이션때문이고 요즘 프론트엔드 대세인 스크롤애니메이션효과 같은걸 쓸때 이런걸 많이 사용하기때문에 연습삼아 이것..

출처: http://www.tcpschool.com/php/php_intro_intro what is php? PHP(PHP: Hypertext Preprocessor) C언어를 기반으로 만들어진 서버 측에서 실행되는 서버 사이드 스크립트 언어 텍스트처리에 특화됨 -> html문서 처리에 적합 보안에 안전하지 않은 언어 구조로 이루어짐 why php? 다이나믹 웹을 쉽고 빠르게 만들어주기때문 php코드를 html안에 넣으면 웹서버는 이 php코드를 해석하여 다이나믹 웹을 생성 (다이나믹 웹이란 사용자 상황에 따라 달라지는 웹 -> 사용자 요청을 해석해서 그에 따른 데이터를 가공, 생성하는 것) php for wordpress php관련하여 워드프레스 구조가 잘 설명되어 있는 글 참고 https://eng..

WebGL => Web Graphic Library 웹상에서 2D, 3D 그래픽을 렌더링하기 위한 low level Javascript API html의 canvas 요소 위에 그려진다. PixiJS is an HTML5 Creation Engine and can be used to create beautiful digital content with the fastest, most flexible 2D WebGL renderer. =픽시는 webgl기반으로 그래픽 렌더링해주는 플러그인이다. 사용방법 픽시홈페이지에서 파일 다운로드해서 연결하거나 cdn연결하거나 npm install해서 사용하거나 여러가지 방법이 있음 참고사이트 픽시는 공홈보다 https://github.com/pixijs/pixijs 깃헙..

Why wordpress? - 웹호스팅과 도메인사용, 유료플러그인 등 완전히 무료라고 할수는 없지만 워드프레스 자체는 무료 오픈소스라는 점 - 압도적인 웹사이트 점유율 - 강력한 플러그인 - 독립적이며 완전한 커스텀 가능 - 구글 검색 엔진 최적화 만약 내가 워드프레스로 뭘 할수있는지 난 잘 모르겠다~ 싶으면 https://themeforest.net/category/wordpress 여기서 사이트 preview해보는것도 추천 워드프레스는 본래 개발자들이 온라인 컨텐츠를 보다 편하게 작성, 관리하라고 만들어진 도구 윅스처럼 비개발자 누구나 쉽게 웹사이트를 만들수 있는 웹사이트 빌더가 아님 그래서 테마와 플러그인 설치방법을 배워야하는게 아니라 구동방법을 배워야한다. https://www.wp-data.co..