let, const 키워드 let 키워드, const 키워드를 알아보기 전에 var 키워드를 알아보자. [var 키워드] var 키워드는 변수를 선언할 때 사용하며 변수는 스코프(scope)로 구분한다.크게 로컬 변수(Local variable), 글로벌 변수(Global variable)로 나뉜다. 로컬 변수(Local variable) - 함수, 오브젝트 글로벌 변수(Global variable) - 프로그램 전체 ES5에서 vat 키워드를 사용하여 변수를 선언하도록 하기 위해 'use strict'를 도입했다.'use strict'를 사용하면 var 없이 선언 시에 에러가 발생한다. 하지만 근본적으로 var의 문제를 해결하지 못한다.그래서 var 키워드의 문제점을 해결하기 위해 나온 것이 let 키..
CSS animate 가위바위보 연속 움직이는 애니메이션 만들기
크롬에서만 확인했고 타 브라우저 안될 수 있습니다. (ie 하위는 당연히 안됩니다.) 비율을 맞춘 이미지가 준비물로 필요합니다. 제가 사용한 이미지는 무료 icon 사이트에서 가져왔고 찾아보면 많습니다. (출처 http://www.freepik.com) 저는 step을 3등분해서 보여줄거라 다운로드 받은 이미지를 포토샵으로 비율을 맞춰줬습니다. 사용한 이미지 예시↓ CSS .hands{ // 이건 애니메이션 보여지는 크기 width:125px; height: 175px; // 연결된 이미지 bg로 깔고 이미지 크기 정함. background:url('/images/hands2.jpg')no-repeat; background-size:384px; // 0.5초동안 step 3으로 나누어서 무한 실행 ani..
three.js 라이브러리 공부하기
three.js 기초 강의글 보고 까먹을까봐 작성하는 글 보고 배운 강의 출처입니다!! : http://binteractive.org/?p=213예제 및 예제코드는 여기서 확인하세요. three.js는 ie10 이하 호환이 안됩니다. [1편]-구도 잡고 화면 만드는 것 Scene-화면 촬영 PerspectiveCamera-화면에 표현 WebGLPenderer 실제 우리 눈에 보여지게 해주는 renderer three에서 생성한 함수이기 때문에 아래와 같이 실행var camera = new THREE.PerspectriveCamera(...); 3d 객체는 표면이 추가되어야 한다.(재질, 색....)재질을 채우기 위해 Mesh를 함수로 만들어야 위 출처에서 설명하기를 Mesh는? Geometry - 점, ..