[WEB] 웹 기초 내용 정리

■■■ 웹 기초 내용 정리 ■■■

○ 웹 페이지 작성

   - 구조적 설계(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:20px; height:40px;">
        
   - 동작, 행동 및 기능 추가(Javascript)
     · 자바스크립트의 특징
        1. 인터프리트 언어
           컴파일 과정이 필요없이 브라우저가 읽고... 해석하고... 실행한다.
           (자바스크립트 엔진)
        2. 동적 데이터타입
           모든 변수를 『var』로 선언하면 끝이다.
           데이터타입을 별도로 지정할 필요가 없다.
        3. 객체 지향 언어
           단, 자바와 다른 점은 클래스 개념을 사용하지 않으며
           생성자 함수를 정의하는 형태로 객체를 사용하게 되며,
           프로토타입을 활용하게 된다.
     
     · 자바스크립트가 직접적으로 많이 사용되는 용도
        1. 이벤트에 반응하는 동작의 구현
        2. AJAX 를 통해 페이지 로딩 과정 없이 컨텐츠 연동이나 데이터 제출 가능
        3. HTML 엘리먼트 구조 / CSS 디자인 등을 동적으로 전환
        4. 사용자 입력 데이터에 대한 사전 검증(서버로 전송하기 전에...)            
    
     · 자바스크립트 객체
        1. 내장 객체, 사용자 정의 객체
           ※ 내장 객체는 생성자 함수가 미리 정의되어(작성되어) 있으며,
              사용자 정의 객체는 사용자가 이 생성자 함수를 정의하는 것이다.
              
        2. 사용자 정의 객체
           ① 객체와 연관된 데이터는 객체가 생성될 때 초기화 되어야 하는데...
              생성자라고 부르는 특별한 함수가 객체를 활성화 시키는 데 필요하다.
              
              var arr = new Array();
            
           ② 생성자로 객체를 생성하기 위해서는
              자바와 마찬가지로 『new』 연산자를 활용하게 된다.
              
           ③ 생성자(객체)의 이름은 첫 글자를 대문자로 표기한다.
           
           ④ 생성자 내부에 속성, 함수를 생성하기(정의하기) 위해
              『this』 키워드를 사용한다.
           
           ⑤ 객체의 멤버인 속성과 함수는 『.(dot)』 연산자로 접근한다.
           
           ⑥ 사용자 정의 객체를 만드는 기본 형식 및 구조
              (생성자를 구성하는 기본 형식 및 구조)
              
              function 생성자명(인자리스트) ← 생성자명의 첫 글자... 대문자
              {
               // 속성 정의
               this.멤버명 = 인자;
              
               // 메소드(함수) 정의
               this.멤버명 = function(인자리스트)
               {
               // 메소드(함수) 내부 코드
               return 리턴값;
               };
              }        

           ⑦ 프로토타입
              한 객체가 가지고 있는 속성과 메소드(함수)를
              다른 객체(혹은 여러 다른 객체)가 공유할 수 있도록 지원하는 개념
              
              ex) function Car(x, y)
                  {
                   this.x=x;
                   this.y=y;
                  
                   this.getDistance = functino()
                   {
                   return (this.x * this.x + this.y * this.y);
                   };
                  }                

  → 이 코드가 자동차(Car)를 나타내는 객체라고 가정한다.
     여기서 『getDistance()』는 원래 위치부터 이동 거리를 계산하는 함수라고 가정한다.
     여러 개의 자동차를 사용하는 경우...
     
     var c1 = new Car(10, 20);
     var c2 = new Car(10, 50);
      :
     var c100 = new Car(10,42);
     
     이와 같은 구문들을 활용하여 객체를 생성했다면...
     객체들마다 『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();