코드 그라데이션

트랜지션 스타일 속성이 바뀌는 것. 즉, 웹 요소의 스타일 속성이 시간에 따라 바뀌는 것. 트랜지션과 속성 1) 트랜지션의 대상을 지정하는 transition-property 속성 어떤 속성에 트랜지션을 적용할 것인지 대상을 지정해야 한다. transition의 속성값 2) 트랜지션의 진행 시간을 지정하는 transition-duration 속성 속성 지정 후 진행 시간을 지정해야 속성이 자연스레 바뀌는 애니메이션 효과를 만들 수 있다. 시간 단위는 초 또는 밀리초 대상 속성이 여러 개라면 진행 시간도 쉼표로 구분해서 여러 개를 지정할 수 있다. 기본값 transition-duration: 시간 예제 실행 결과(시간 흐름에 따라 계속 팽창) 3) 트랜지션의 속도 곡선을 지정하는 transition-tim..

transform과 변형 함수 2차원 변형과 3차원 변형 2차원 변형은 웹 요소를 평면에서 변형한다. x축은 오른쪽으로 갈수록 값이 커지고, y축은 아래로 내려갈수록 값이 커진다. 3차원 변형은 x축, y축에 원근감 주는 z축을 추가해서 변형한다. 3차원 변형에서 z축은 앞뒤로 이동하며, 보는 사람 쪽으로 다가올수록 값이 커지고, 뒤로 갈수록 값이 작아진다. 2차원 변형 함수 3차원 변형 함수 translate() 함수 : 웹 요소를 이동시킨다. translate( ) 함수는 x축이나 y축 또는 양쪽 방향으로 이동할 거리를 지정하면 해당 요소가 지정한 크기만큼 이동 예제 실행 결과 scale() 함수 : 요소를 확대/축소 괄호 안의 값 (sx, sy, sz)이 1보다 확대되고 1보다 작으면 축소된다. 예..

노드 리스트 노드 정보를 여러개 저장한 것. 배열과 비슷하게 저장함. 새 노드를 추가할 때는 웹 문서에 어떤 소스를 추가할지 먼저 고려하고, 그에 따라 요소 노드나 속성 노드 등을 만들어야 한다. 텍스트 노드를 사용하는 새로운 요소 추가하기 1. 요소 노드 만들기 - createElement() 메서드 document.createElement(노드명) 그런데 이 메서드는 새로운 노드를 만들 뿐 아직 웹 문서에 새로운 노드를 추가한 것은 아니다. 예를 들면 태그의 내용에 해당하는 텍스트 노드도 만들어야 한다. 2. 텍스트 노드 만들기 - createTextNode() 메서드 새로운 요소 노드를 만들었다면 그 다음은 내용을 담는 텍스트 노드를 자식 노드로 만들어 연결해야 한다. document.createT..

DOM에서 이벤트 처리하기 웹 문서에서 이벤트가 발생하면 이벤트 처리기를 연결해야 한다. HTML 태그에서 이벤트 처리기를 연결할 수 있지만, 태그와 스크립트 소스가 섞여 있어서 복잡한 프로그램에는 적합하지 않다. 이럴 때 DOM에서 이벤트 처리기를 연결하면 HTML 태그와 스크립트 소스 분리 가능 DOM 요소에 직접 함수 연결하기 이벤트 처리기 함수가 간단하다면 DOM 요소에 직접 연결할 수 있다. ex. 이미지를 클릭하면 알림 창 표시하기 실행 결과 함수 이름을 사용해 연결하기 이벤트가 발생했을 때 실행할 함수를 따로 정의해 두었다면 함수 이름을 사용해 연결할 수 있다. 이 경우 함수 이름 다음에 괄호를 추가하지 않는다. 예제 - 이미지를 cup 함수로 저장한 후 click 이벤트가 발생하면 chan..

문서 객체 모델의 개념 웹에서 자바스크립트를 사용하는 이유는 어떤 조건에 맞거나 사용자의 동작이 있을 때 웹 문서 전체 또는 일부분이 동적으로 반응하게 하는 것. 이렇게 반응하게 하려면 웹 문 서 의 모든 요소를 따로 제어할 수 있어야 한다. 이 때 필요한 개념인데 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법 DOM 트리 부모와 자식 구조로 표시하면 마치 나무 형태가 되므로 DOM 트리라고 한다. 노드(node) : 트리에서 가지가 갈라져 나간 항목 루트 노드 : DOM 트리 의 시작 부분인 html 노드를 나무 뿌리에 해당한다 해서 붙인 이름 루트 노드를 시작으로 웹 문서에서 사용한 요소는 계층 구조를 이룬다 따라서 각 노드 사이의 관계..

브라우저와 관련된 객체 웹 브라우저 창에 문서가 표시되는 순간 브라우저는 HTML 소스를 한줄씩 읽으면서 화면에 내용을 표시하고 관련된 객체를 만들어낸다. 이 객체들은 계층 구조로 이루어져있다. 아래 그림은 예시 자주 사용하는 브라우저 관련 내장 객체 window 객체의 프로퍼티 window 객체는 웹 브라우저의 상태를 제어, 자바스크립트의 최상위에 위치 자바스크립트의 모든 객체는 window 객체 안에 포함된다. 웹 브라우저 창의 정보를 가져오거나 값을 바꿀 때 사용한다. 프로퍼티를 사용하려면 window. 를 프로퍼티명 앞에 붙인다! 종류 window 객체의 메서드 window 객체의 메서드는 대화 창을 표시하거나 브라우저 창의 크기나 위치를 알아내고 지정하는 등 웹 브라우저 창 자체와 관련되어 있다..

객체 자바스크립트에서는 프로그램에서 인식할 수 있는 모든 대상을 가리킨다. 웹과 관련된 대상을 모두 객체로 인식 자바스크립트의 객체 문서 객체 모델(DOM)： 웹 문서 자체도 객체이고 그 안에 삽입되어 있는 이미지와 링크, 텍스트 필드 등도 모두 객체. 일반적으로 웹 문서에 삽입하는 요소는 document, image, link 객체 등이 있음. 브라우저 관련 객체: 웹 브라우저에서 사용하는 정보도 객체로 나타낼 수 있다. 사용하는 브라우 저 정보를 담고 있는 navigator 객체를 비롯해 history, location, screen 객체 등. 내장 객체: 웹 프로그래밍을 할 때 자주 사용하는 요소는 자바스크립트 안에 미리 객체로 정의되어 있다., 예를 들어 날짜, 시간과 관련된 프로그램을 개발하려면..

이벤트 웹 브라우저나 사용자가 행하는 어떤 동작 웹 브라우저 안에 서 이루어 지는 모든 동작이 이벤트는 아니다. 웹 페이지를 읽어 오거나 링크를 클릭하는 것처럼 웹 문서 영역 안에서 이루어지는 동작만을 말한다. 웹 문서 영역을 벗어나 클릭하는 행위는 이벤트가 아니다. => 주로 마우스나 키보드를 사용할 때, 웹 문서를 불러올 때, 폼에 내용을 입력할 때 발생한다. 이벤트의 종류 이벤트 처리기 웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러 라고 한다. 먼저 HTML태그 안에서 ‘on’다음에 ‘이벤트명’을 붙여서 속성 이름을 만들고, 그다음에 실행할 이벤트 처리기의 함수명을 작성하면 된다. # 예제 마우스로 클릭했을 때의 이벤트 이름은 click입니다. 태그 안에 oncli..