<!--
■■■ 웹 기초 내용 정리 ■■■
○ 웹 페이지 작성
- 구조적 설계 (HTML)
·컨텐츠에 대한 레이아웃 구성(부모 자식 관계 설정)
·... 태그 공부 (인라인 / 블럭)
·http://www.w3schools.com/
·http://koxo.com/
- 표현 / 프리젠테이션 추가 (CSS)
·선택자 구성 및 설정
1. 『*』 (공용 선택자, 공통 선택자)
모든 엘리먼트를 선택한다.
2. 『E』 (엘리먼트 선택자, 태그 선택자, 타입 선택자)
E 엘리먼트를 선택한다.
3. 『.』 (클래스 선택자)
HTML 에서만 사용할 수 있으며,
예를 들어 『tr.even』은 『even』이라는 클래스를 갖고있는
tr 엘리먼트를 선택하게 된다.
class 는 하나의 페이지에서 동일한 class 를 여러번 사용할 수 있기 때문에
반복적으로 여러번 나오는 스타일의 경우 지정하여 사용할 수 있다.
4. 『#』 (아이디 선택자)
예를 들어 『#user』는 아이디가 『user』인 엘리먼트를 선택하게 된다.
5. 『E F』 (하위 선택자, 자손 선택자)
E 엘리먼트의 하위에 있는 F 엘리먼트를 선택하게 된다.
이 경우, F 는 E 의 바로 직접적인 자식엘리먼트가 아니어도 무방하다.
6. 『E>F』 (자식 선택자)
E 엘리먼트의 자식 엘리먼트인 F 엘리먼트를 선택하게 된다.
7. 『E+F』 (인접 선택자, 형제 자매 선택자)
E 와 F 가 계층 구조상 서로 형제 자매 관계인 경우 선택하게 된다.
8. 『E:HOVER, E:ACTIVE, E:FOCUS, ...』 (동적 선택자, 가상 선택자)
사용자 액션이 선택자로 구성한 상태에 해당하는 (만족하는)
E 엘리먼트를 선택하게 된다.
·CSS 의 선언 및 적용 방법
1. 외부 선언
<link rel="stylesheet" type="text/css" href="css/myStyle.css">
2. 문서 안에 포함하여 선언
<style type="text/css">
div {...}
</style>
3. 엘리먼트(태그)에 직접 선언
<input type="text" style="width: 200px; height: 400px;">
4. @import 적용 방식
<style type="text/css">
@import url("css/myStyle.css");
</style>
- 동작, 행동 및 기능 추가 (Javascript)
·자바스크립트의 특징
1. 인터프리트 언어
컴파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다.
2. 동적 데이터타입
모든 변수를 『var』로 선언하면 끝이다.
데이터타입을 별도로 지정해 줄 필요가 없다
3. 객체 지향 언어
단, 자바와 다른 점은 클래스 개념이 없고, 프로토타입을 활용하게 된다.
·직접적으로 많이 사용되는 용도
1. 이벤트에 반응하는 동작의 구현
2. AJAX 를 통해 페이지 로딩 과정 없이
컨텐츠 연동이나 데이터 제출 가능
3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환
4. 사용자 입력 데이터에 대한 검증
·자바스크립트 객체
1. 내장 객체, 사용자 정의 객체
※ 내장 객체는 생성자 함수가 미리 작성되어 있으며,
사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.
2. 사용자 정의 객체
① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데...
생성자라고 부르는 특별한 함수가 객체를 활성화시키는데 필요하다.
var arr = new Array();
② 생성자로 객체를 생성하기 위해서는
자바와 마찬가지로 『new』 연산자를 활용하게 된다.
③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.
④ 생성자 내부에서 속성, 함수를 생성하기 위해
『this』 키워드를 사용한다.
⑤ 객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.
⑥ 사용자 정의 객체를 만드는 기본 형식 및 구조
(생성자를 구성하는 기본 형식 및 구조)
function 생성자명(인자리스트) ← 생성자명의 첫 글자... 대문자
{
// 속성 구성 1)case 함수
this.멤버명 = 인자; //값이 대입되는 것.
// 함수(메소드) 정의 2)case 함수
this.멤버명 = function(인자리스트) //특정한 멤버의 기능이 대입되는것 function뒤에 이름이 안옴
{ //익명의 함수가 생성자 안에서 쓰이는 경우
//함수(메소드) 내부 코드 ->즉 1,2 2개다 같은 함수지만 선언 방식이 다르다 .
return 리턴값;
};
}
3. 프로토 타입
한 객체가 가지고 있는 속성과 메소드(함수)를
다른 객체(혹은 여러 객체)가 공유할 수 있도록 지원하는 개념
ex) function Car(x, y)
{
this.x=x;
this.y=y;
this.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
};
}
→ 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.
여기서 『getDistance()』는 원래 위치부터 거리를 계산하는
함수로 본다.
이 때, 여러 대의 자동차를 사용하는 경우...
var c1 = new Car(10, 20);
var c2 = new Car(10, 40);
:
이와 같은 구문들을 활용하여 객체를 생성했다면...
객체들마다 『getDistance()』 메소드(함수)를 가지게 되면서
메모리를 낭비하게 된다.
이 때... 객체들마다 메소드(함수)를 가지는 것이 아니라
하나의 메소드(함수)를 만들어 공유하기 위해
프로토타입을 정의하게 된다.
※ 모든 객체는 프로토타입이라는 숨겨진 객체를 포함하고 있다.
『Car』 객체의 프로토타입은 『Car.prototype』이라는
숨겨진 객체를 갖고 있다는 것이다.
function Car(x, y)
{
this.x=x;
this.y=y;
}
Car.prototype.getDistance = function()
{
return (this.x * this.x + this.y * this.y);
};
var c3 = new Car(10, 80);
c3.getDistance();
-->