FrontEnd

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.AJAX(Asynchronous JavaScript and XML)자바스크립트로 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식      2.JSON (JavaScript Object Notation)효과적인 데이터 구조화가 가능한 데이터 포맷순수한 텍스트로 구성된 규칙이 있는 데이터 구조{ "name":"Park", "gender":"male", "age":10}   2-1.stringify객체를 JSON 형식의 문자열로 변환    2-2.parseJSON 데이터를 가진 문자열을 객체로 변환    3.XMLHttpRequestXMLHttpRequest 객체를 이용하여 Ajax 요청을 생성하고 전송co..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다. 1.이벤트사용자와 웹페이지가 상호작용하도록 해주는것 1-1.이벤트 종류https://developer.mozilla.org/en-US/docs/Web/Events   1-2.인라인 이벤트 핸들러오래된 방식this는 전역 객체 window버튼버튼">HTML 삽입미리보기할 수 없는 소스   1-3.이벤트 핸들러 프로퍼티 방식this는 이벤트에 바인딩된 요소를 가리킨다버튼2버튼2">HTML 삽입미리보기할 수 없는 소스     1-4.addEventListener 메소드DOM 요소에 이벤트, 해당 이벤트의 콜백함수를 지정한다.(this 는 이벤트 리스너에 바인딩된 요소를 나타낸다.)버튼3버튼3">HTML 삽입미리보기할 수 없는 소스     2...

1.웹폰트 사용1-1.CDNCDN 링크를 사용하여 웹폰트를 사용hello worldhello world" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스   1-2.서버 폰트로딩폰트 파일을 직접 서버에 업로드후 사용하는 방식

트랜스폼트랜지션, 애니메이션하고 함께사용요소의 움직임을 표현" data-ke-type="html">HTML 삽입미리보기할 수 없는 소스             🎈참고자료https://www.w3schools.com/css/css3_2dtransforms.asp

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 트리에..