비전공 개발자의 일지

1. 문서 객체 모델 ( DOM ) - 웹 문서를 메모리로 읽어 들여 트리형태의 구조로 변환한 것이 DOM이다. - + 각 요소별 포함관계에 맞게 구조를 구성하게 된다. - 문서의 각종 요소는 요소 노드(태그)로, 텍스트는 텍스트 노드로 변환한다. - + 텍스트 노드는 title 태그나 h1태그 내에 작성하는 텍스트와 같은 것이 해당된다. - 변환된 트리 구조를 이용하면, 자바스크립트로 웹 문서를 조작할 수 있다. - + createElement()로 통해 요소 노드를, createTextNode()로 텍스트 노드를 생성할 수 있다. - + 문서객체의 속성값을 설정하는 방법 : 요소.setAttrbute(속성, 값); 2. 제이쿼리 - 2006년에 출시된 자바스크립트 라이브러리 - 오픈소스로 제공되어 무..

1. 사용자 정의 객체를 만드는 방법 - 1 ) 객체 리터럴 방식 - + 객체 속성 접근 방법 : 객체명.속성명 또는 객체명[‘속성명’] - + 주로 객체명.속성명을 사용한다. ( ex. car.speed ) - 2 ) 전역 자바스크립트 객체 ( 생성자 함수 : Object() 생성자 함수 이용 ) - + 사용 방법 : var car = new Object(); - + 사용 방법 : car.name = 'Sonata' ( 속성 정의 ) - 3 ) 직접 생성자 함수를 정의 (**) - + 사용 방법 : function car (name, color, speed){ this.name = name; .... } - + 3번의 방식은 필요할 때마다, 동일한 객체를 생성할 수 있다. - + 1, 2번의 방식으로 ..

1. 배열 객체 생성 확인 방법 - 타입 확인 연산자 : typeof 배열명 - 배열 객체의 메소드인 isArray 사용 : Array.isArray(배열명) - Array 생성자의 연산자인 instanceof 사용 : 배열명 instanceof Array 2. 배열의 메소드 - 1 ) join 메소드 : 배열에 저장된 모든 요소를 문자열로 변환한 후 연결하여 출력 - 2 ) concat 메소드 : 지정된 배열에서 2개 이상의 데이터나 배열을 결합하여 출력 - 3 ) reverse 메소드 : 배열의 원소의 순서를 반대로 정렬 - 4 ) sort 메소드 : 배열 원소를 정렬 - + 숫자 데이터의 경우 사전식으로 정렬하기에 함수를 지정해야 한다. - 5 ) slice 메소드 : 배열의 특정 범위에 속하는 원..

1. 함수 - Function 함수명 ( 매개변수1, 매개변수2, … ) { 실행문장; return 반환값; }; - 이때 매개변수1, 매개변수2 …로 지정된 변수는 지역변수로 지정된다. - 호출할 때에는 함수명( 인자1, 인자2, … );으로 호출할 수 있다. - 이때 인자는 함수를 호출할 때 전달하는 입력 값을 의미한다. - 매개변수는 함수 호출문에서 전달한 이러한 인자 값을 받기 위해 선언된 변수로, 매개변수의 수와 인자의 수는 동일해야 한다. - 무명 함수 / 익명 함수로 작성할 때에는 변수에 함수 표현식으로 작성하게 되며, 함수를 호출할 때에도 변수명을 통해서 호출하게 된다. - 익명 함수 선언 : Var 변수명 = function ( 매개변수1, 매개변수2, … ) { 실행문장; } - 익명 ..

1. 자바 스크립트 – 연산자 - 1 ) 문자열 연산자 : + ( 문자열 연결 ) - 2 ) 산술 연산자 : ++ / -- ( 증감 연산자 ), * / + / - / % / / ( 사칙 연산자 ) - 3 ) 비교 연산자 : == ( 값이 같다 ), === ( 속성과 값이 같다 ), >, =, !=, !== - 4 ) 논리 연산자 : & ( AND ), | ( OR ), && ( 논리 AND ), || ( 논리 OR ) - + 자바에서 &&는 두 피연산자 중 첫번째 피연산자가 false이면 false를 출력하지만, - + &는 앞의 피연산자가 false여도 뒤의 피연산자도 확인한다. ( & 권장 ) - + 자바 스크립트에서는 &&를 더 자주 사용한다. - 5 ) 조건 연산자 : (조건문) ? true : ..

1. 자바 스크립트 - 자바 스크립트는 웹 문서를 동적으로 제어하기 위해 고안된 프로그래밍 언어이다. - HTML5은 모델 담당, CSS3는 뷰 담당 그리고 자바 스크립트는 제어담당을 한다. - 자바 스크립트는 표준화되기 전의 이름으로, 현재는 ECMA스크립트라고도 불린다. - Interpreter 언어라고도 부른다. ( 컴파일 과정이 없고, 1줄 읽고 바로 실행한다. ) 2. 자바 스크립트의 역할 - 1 ) 요소의 추가 및 삭제 - 2 ) CSS 및 HTML 요소의 스타일 변경 ( 하지 않는 것이 좋다. ) - 3 ) 사용자와의 상호작용 - 4 ) 폼의 유효성 검증 - 5 ) 마우스와 키보드 이벤트에 대한 스크립트 실행 (*) - 6 ) 웹 브라우저 제어 및 쿠키 등의 설정과 조회 - 7 ) AJAX ..

1. 변이(변화) 효과 ( transition ) - 효과가 적용되는 과정을 좀 더 부드럽게 보여주거나, 그 과정을 시간적으로 조정할 수 있게 해주는 속성 - 변이 속성의 종류 : - 1 ) transition-property : 변화 효과를 적용할 속성들을 나열 - 2 ) transition-duration : 변화가 지속되는 시간을 지정 - 3 ) transition-timing-function : 변화하는 속도 / 타이밍을 지정 - + transition-timing-function의 속성값 : ease, linear, ease-in, ease-out, ease-in-out - + 속성값에 따라서 변화하는 속도가 시간에 따라서 달라진다. - 4 ) transition-delay : 변화 효과가 지연..

1. 레이아웃 – position 속성 (***) - 텍스트, 이미지, 표 등의 요소를 웹 문서에 배치할 때 사용하는 속성이다. - Position에 사용되는 속성값의 종류 : - 1 ) position : static; ( 정적 위치 설정 ) - : 각종 요소를 웹 문서의 흐름에 따라 배치한다. ( 기본값 ) - : 블록 요소는 위에서 아래로 생성되며, 인라인 요소는 같은 행에서 순서대로 배치 - : static은 left나 bottom과 같은 위치 속성이 적용되지 않는다. - 2 ) position : relative; ( 상대 위치 설정 ) - : 웹 문서의 정상적인 위치에서 상대적으로 얼마나 떨어져 있는지를 지정하여 배치하는 방법이다. - : 각종 요소가 웹 문서의 정적 위치값에서 상대적으로 얼마..

1. 조합 선택자 (****) - 기존의 여러 선택자를 복합적으로 조합하는 방법을 제공한다. - 1 ) 후속 선택자 ( 선택자A 선택자B ) - : 선택자B가 선택자A에 반드시 포함되어 있을 경우에 선택한다. - : 직계가 아니더라도 후손이라면, 전부 찾게 된다. - 2 ) 자식 선택자 ( 선택자A>선택자B ) - : 부모 선택자A의 바로 아래 직계 자손인 선택자B를 선택한다. - 3 ) 인접 형제 선택자 ( 선택자A + 선택자B ) - : 형제 관계에서 선택자A의 바로 옆에 위치한 선택자B를 선택한다. - 4 ) 일반 형제 선택자 ( 선택자A ~ 선택자B ) - : 형제 관계에서 선택자A 뒤에 나타나는 모든 선택자B를 선택한다. - : 앞에 나온 선택자A를 기준으로 앞에서 나온 태그의 경우 형제 관계일..

1. CSS3의 구성 - CSS3란 스타일 시트의 표준안으로, 웹 문서에 글꼴, 색상, 정렬과 각 요소의 배치 방법 등과 같은 디자인 요소를 적용하는데 사용한다. - CSS3는 선택자, 속성, 속성값으로 구성된다. - 1 ) 선택자 : 스타일 시트를 적용할 대상을 지정한다. Ex ( h1 , p , #employee , .ai ) - 2 ) 속성 : 어떤 속성을 적용할지 선택한다. ( ex. color: , font-size: ) - 3 ) 속성값 : 속성에 어떤 값을 반영할지 선택한다. ( ex. blue; , 15px; ) 2. CSS의 우선순위 - CSS는 사용하는 위치에 따라서 인라인 / 내부 / 외부 스타일 시트로 구분된다. - CSS의 적용 우선 순위는 인라인 - > 내부 - > 외부 - > ..