HTML 특수 문자 처리하기 HTML 문서에서는 특수 문자 처리를 해주지 않으면 오류가 발생하는 경우가 있다. 예를 들어 이런 식으로 사용하면 오늘의 날씨를 확인하려면 클릭하세요 >'>' 태그를 열고 닫을 때 사용하기 때문에 구문 에러를 발생시킨다. 또한 html 내에서 여러 번 띄어쓰기를 해도 적용되지 않으니, 이러한 특수 문자에 대한 처리가 필요하다.+태그 내에서는 작성 가능 [많이 쓰는 특수기호] > & & ⓒ © 띄어쓰기 &npsp; [사용법 예제]>오늘의 날씨를 확인하려면 클릭하세요&npsp;> [더 많은 특수 기호에 대한 엔티티 테이블 참고 링크들]Character Entity Reference Chart - http://dev.w3.org/html5/html-author/ch..
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 - 점, ..
마우스 휠로 0 ~ 100까지 숫자 조절이 가능하게 하는 작업을 하게 되었다. 비록 취소되어 사용은 안했지만, 간단하게 검토하던 것을 적어두려고 한다! 처음에는 태그를 사용하여 간단히 작업하려고 했는데, 정책상 브라우저 호환에 문제가 있어서 태그로 작업을 진행하게 되었다. HTML jQuery // Firefox $('#target').on('wheel', function(e){ e.preventDefault(); var num = $(this).val(); if(e.originalEvent.deltaY = 100) return false; console.log('업'); }else{ if(num 0){ if(num >= 100) return false; $(this).val(n..