분류 전체보기

1.@keyframesfrom{}에 애니메이션 시작시점to{}에 에니메이션 종료시점@keyframs rule을 정한다. " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스      %를 통해 %단위로 키프레임을 삽입할수있다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스     2.animation-name@keyframes 뒤에 애니메이션 이름을 프로퍼티값으로 사용한다. 1개 이상의 값을 가질수있다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스     3.animation-duration한 싸이클의 애니메이션시간을 지정  4. animation-timing-function애니메이션 효과 수치함수 지정   5.animat..

트랜지션CSS 프로퍼티의 값이 변화할 때 일정시간에 걸쳐 일어나게 하는것 " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    1.transition-property트랜지션의 대상 CSS 프로퍼티명 지정 (기본값 all) " data-ke-type="html">HTML 삽입미리보기할 수 없는 소스    2.transition-duration트랜지션이 일어나는 지속시간각각 프로퍼티에 따라 1대1로 대응된다." data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   3.transition-timing-function기본값 ease로 트랜지션의 효과리듬을 정한다. " data-ke-type="html">H..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.동기식 vs 비동기식동기식 처리 모델은 하나의 작업이 실행될때 다른 작업은 실행되지않고 대기하게된다.비동기식 처리 모델은 병렬적으로 작업을 처리한다. 하나의 테스크가 종료되지않더라도 다음 작업을 처리하게된다. 자바스크립의 DOM 이벤트 헨들러, Timer함수는 비동기 처리모델이다. 해당 코드에서 func2는 비동기 처리함수은 Timer가 있으므로 시간이 0이여도 func3가 실행된다음에 func2가 처리가 끝나는것을 볼수있다.function func1() { console.log('func1');}function func2() { setTimeout(function() { console.log('func2'); }, 0);}fu..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다. 1.텍스트 노드 접근텍스트 노드의 부모노드를 선택후 자식노드의 nodeValue를 통해 텍스트값에 접근,수정한다.안녕하세요눌러   2.속성(어튜리뷰트) 노드 접근    3.HTML 콘텐츠 조작3-1.textContent텍스트 요소를 취득,변경한다.  3-2.innerHTML해당 요소의 모든 자식요소를 포함하는 하나의 문자열을 얻을수있다.(마크업 포함)       4.DOM 조작4-1.createElement(tagname)태그이름을 가진 요소를 생성  4-2.createTextNode(text)텍스트 노드 생성  4-3.appendChild(Node)자식요소로 DOM트리에 추가  4-4.removeChild(Node)노드를 DOM 트리에..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.  1.DOM (Document Object Model)HTML, XML 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 이 구조를 조작할 수 있도록 하는 인터페이스    2.DOM treedocument 객체를 최상위 노드(루트 노드)로 둔 문서를 트리구조로 표현한 형태각 노드는 요소(HTML 태그), 속성, 텍스트등을 나타낸다.웹에서 개발자도구 -> Elements -> properties에서 DOM트리를 확인가능하다.document├── html ├── head │ └── title │ └── "Sample Page" └── body ├── h1 │ └── "Hell..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.sort(원본 배열 변경)요소를 정렬[4,12,5].sort()//[12,4,5][4,12,5].sort(function(a,b){return a-b;})//[4,5,12]    2.forEachfor문 대신 사용가능[1,2,3,4].forEach(function(item){ document.write(item +" ");});   3.map각 요소에 콜백함수의 반환값으로 새로운 배열생성,반환document.write([1,2,3,4].map(function(a){return a+3}))//4,5,6,7    4.filter콜백 함수의 실행결과가 true인 배열요소만 추출후 새로운 배열반환document.write([1,2,3,4..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.배열JavaScript에서 배열은 객체고 프로토타입 객체는Array.prototype다.const Arr1=[1,2,3];Arr1[1]; //2Arr1.length;//3typeof Arr1;//object  2.생성자 함수const Arr2= new Array(1,2,3);//[1,2,3]const Arr3= new Array(4);//길이 4인 빈 배열생성    3.배열 요소 추가인덱스를 사용하여 할당Arr1[1]=1;   4.배열 요소 삭제delete로 삭제(length 변함 x)splice로 삭제(length 변화 O)delete Arr1[0];Arr1.splice(2,1);    5.배열 순회for in은 순서 보장 xf..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.String 생성자생성자 함수로 생성할수도있지만 변수나 객체 프로퍼티가 문자열값을 가지면 생성자없이 String객체의 메소드와 프로퍼티를 사용할수있다. const str="hihihi"strobj=new String("hellohello")   2.String 프로퍼티2-1.lengthstrobj=new String("hellohello")document.write(strobj.length)//10   3.String 메소드3-1.charAt인수로 index를 전달하여 해당 index의 문자를 반환document.write(strobj.charAt(2)+"")   3-2.concat인수로 1개 이상의 문자열을 입력해서 기존 문자열과 연..