good_da22

AJAX(Asynchronous Javascript And XML) Ajax(Asynchronous Javascript And XML)은 언어나 프레임 워크가 아닌 구현하는 방식을 의미 AJax는 웹(Web)에서 화면을 갱신하지 한고 데이터를 서버로부터 가져와 처리하는 방법을 의미 JavaScript의 XMLHttpRequest(XHR) 객체로 데이터를 전달하고 비동기 방식으로 결과를 조회 화면 갱신이 없으므로 사용자 입장에서는 편리하지만, 동적으로 DOM을 구성해야 하므로 구현이 복잡 일반 요청에 대한 응답 data를 입력 후 event 발생 Ajax를 적용하지 않은 요청은 서버에서 data를 이용하여 logic 처리 logic 처리에 대한 결과에 따라 응답 page를 생성하고 client에 전송(화면..

이벤트(Event) 웹 페이지에서 여러 종류의 상호작용이 있을 때 마다 이벤트가 발생 사용자가 마우스를 클릭했을 때, 키보드를 눌렀을 때 등, 다양한 종류의 이벤트가 존재 JavaScript를 사용하여 DOM에서 발생하는 이벤트를 감지하여 이벤트에 대응하는 여러 작업 수행 이벤트는 일반적으로 함수와 연결이 되고, 함수는 이벤트가 발생되기 전에는 실행되지 않다가 이벤트가 발생할 경우 실행 이벤트 핸들러(Event Handler) 또는 이벤트 리스너(Event Listener)라 하며 함수에 이벤트 발생시 실행해야 하는 코드 작성 이벤트 발생 종류 웹 페이지가 로딩되었을 때 페이지를 스크롤 했을 때 브라우저 창의 크기를 조절 했을 때 마우스를 클릭 했을 때 키보드로 키를 입력 했을 때 form이 submit..

Window 객체 window 객체는 웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체 window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 존재 JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함 (ex. Number 객체, setInterval() 함수 등) BOM(Browser Object Model)으로 불린다. window 객체 사용 alert, confirm, prompt window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 open alert() : 브라우저의 알림 창 confirm() : 브라우저의 확인/취소 선택 창 prompt() : 브라우저의 입력 창 navigator navigator 객체는 브라우저의 정보가 내장된 객체 navigat..

JavaScript 기본문법 객체(Object) 객체는 이름과 값으로 구성된 프로퍼티의 집합 문자열, 숫자, boolean, null, undefined를 제외한 모든 값은 객체 JavaScript의 객체는 키(Key)와 값(Value)으로 구성된 프로퍼티(Prooerty)들의 집합 전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 JavaScript의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용 가능 JavaScript 객체는 프로토타입(prototype)이라는 특별한 프로터피를 포함 객체 생성 객체 리터럴 가장 일반적인 방법 { } 를 사용하여 객체를 생성. { } 내에 1개 이상의 프로터피를 추가하여 객체를 생성 Obje..

JavaScript 기본문법 주석(comment) 주석은 JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않는다. JavaScript 주석은 한 줄 주석(Line Comment)과 블록 주석(Block Comment)이 있다. 한 줄 주석은 //code로 표기하고, 블록 주석은 /* code */ 로 표기한다. 가능하면 블록 주석보다 라인 주석을 사용한다. 변수(varidable) JavaScript는 변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언 JavaScript는 동적타입(Dynamic / Weak type) 언어. 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정 같은 변수에 여러 타입의 값을 할당 가능 변수의 이름은 함수..

JavaScript 웹 페이지 이벤트 담당(동작) JavaScript는 프로토타입 기반의 스크립트 프로그래밍 언어로 객체지향 개념을 지원한다. 웹 브라우저가 JavaScript를 HTML과 함께 다운로드하여 실행 웹 브라우저가 HTML 문서를 읽어 들이는 시점에 JavaScript Engine이 실행된다. 대부분의 JavaScript Engine은 ECMAScript 표준을 지원한다. JavaScript는 HTML, CSS와 함께 웹을 구성하는 요소 중 하나로 웹 브라우저에서 동작하는 유일한 프로그래밍 언어 JavaScript는 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 각 브라우저별 JavaScript 엔진(ex. Chrome의 V8 엔진...)은 인터프리터와 컴파일의 장점을 결합하여..

semantic semantic의 사전적 의미 : 의미론적인, 의미가 통하는 검색 로봇 또는 스크린 리더등의 기계가 쉽게 해석하고 분석할 수 있도록 만들어진 태그 HTML4에서는 와 id속성을 이용하여 화면을 구성 id의 이름을 정하는 규칙이 없기 때문에 문서의 구조를 이해하는데 한계, 웨어러블 장치나 스마트 기기를 이용하여 웹문서를 읽는 데 부적합 구조 HTML5에서는 웹문서 레이아웃을 표준화하는 semantic tag를 이용 사이트의 제목과 로고, 검책 창 등이 있는 헤더(header) 여러 내용이 있는 본문(contents : section + articles) 본문 외 내용을 나타내는 사이드바(aside) 저작권 정보와 제작자 정보를 표시하는 푸터(footer) 개발자가 의도한 요소의 의미를 명확..

CSS 테이블 & 테두리 속성 엘리먼트의 관련 속성은 테이블의 너비나 높이를 지정하고, Cell 내부 내용을 정렬 테두리 관련 속성은 테두리 모델을 설정하여, 테두리 스타일과 너비 등을 지정 table-layout : table layout을 설정 (2) width : table의 너비를 지정 (1) height : table의 높이를 지정 (1) text-align : cell 내부 내용을 수평 정렬 (1) vertical-align : cell 내부 내용을 수직 정렬 (1) border-collapse : 분리된 테두리 모델, 통합된 테두리 모델을 설정 (2) border-style : 테두리 스타일 설정 (1) border-width : 엘리먼트의 4개 테두리 너비를 설정 (1) border-col..

CSS font 속성 태그 관련 속성은 CSS property로 대체 가능하므로 추천하지 않는다. CSS Font 관련 속성은 text의 글꼴, 굵기, 크기, 스타일 등을 지정 font는 하나의 선언에서 여러 font 관련 속성을 지정 font-family : 글꼴 지정(font name) (1) font-size : 글자 크기 지정 (1) font-style : 글자 스타일 지정 (1) font-variant : 소문자를 작은 대문자(small-caps)로 변형 (1) font-weight : 글자 굵기 지정 (1) font : font에 관한 속성을 한번에 지정하는 단축형(short hand) 속성 (1) font-family font-family 속성 사용법은 element { font-family..

CSS 웹 페이지 디자인 담당(표현) Cascading Style Sheets의 약자 웹 문서의 내용과 상관 없이 디자인만 바꿀 수 있다. 다양한 기기에 맞게 탄력적으로 바뀌는 문서를 만들 수 있다. w3schools 웹 페이지를 표현하기 위한 스타일 규칙을 모아 놓은 문서 웹 브라우저 별 CSS3 지원 테스트 사이트 CSS 규칙은 선택자(selector)와 선언(declaration) 두 부분으로 구성 선택자는 규칙이 적용되는 엘리먼트 선언 부분에서는 선택자에 적용될 스타일을 작성 선언은 중괄호로 감싸며, 속성(property)과 값(value)로 이루어짐 속성(property)은 선택자에서 바꾸고 싶은 요소(color, font, width, height, border ...) 값(value)은 속성..