마우스 휠로 전체 페이지 영역 넘기기 지난번 마우스 휠로 input 넘버 값 up, down 작업을 했었다.응용해서 작업 하나 더 했는데 올린다. HTML박스1입니다.박스2입니다.박스3입니다.박스4입니다.박스5입니다.박스6입니다.박스7입니다.박스 7개 생성.몇 개를 생성해도 상관없다.하지만 구분을 위해 class로 css 추가했기 때문에 구분을 위한다면 똑같이 추가할 것. CSSbody,div{ margin:0; padding:0;}div{ display: flex; align-items: center; justify-content: center;}.box1{background-color:red;}.box2{background-color:orange;}.box3{background-color:yellow..
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..