HTML5(1) - 개요

1.웹 기반 프로그램의 특징
    1) 화면과 로직을 서버에서 모두 처리하므로 클라이언트가 특별히 수행할 작업이 없음.
    2) 모든 기능이 서버에서 처리하므로 보안 면에서도 월등히 우수함.

2. 정적(static) 웹 프로그래밍
    1) 웹서버(Apache)에 미리 보여줄 HTML 페이지, CSS, 이미지, JS 파일을 저장해 놓고
       브라우저에서 요청 할 경우 그대로 전달하는 방식.
    2) 사용자는 페이지가 변경되지 않는 한 고정된 웹 페이지를 보게함.
    3) 구성요소

        - 웹 서버 : 각 클라이언트에게 서비스를 제공하는 컴퓨터를 의미.   
        - 클라이언트 : 네트워크로 서버에 접속한후 서버로부터 서비스를 제공받는 컴퓨터를 의미.
        - HTTP (Hyper Text Transfer Protocol) 
            - www 서비스를 제공하는 통신 규약.
            - 웹서버와 클라이언트는 이 프로토콜을 이용해 정보를 주고 받음.

        - HTML  
            - Hyper Text Markup Language의 약자로, www 서비스를 제공하기 위한 표준 언어.
            - 페이지의 제목, 문단, 표, 이미지, 동영상 등 웹 구조를 담당.
                 
        - CSS 
            - Cascading Style Sheets의 약자로, 문서에서 폰트나 색상, 크기,정렬, 레이아웃 등 
                세부적인 HTML 페이지의 디자인 관련된 기능.
            - 실제 화면에 표시되는 방법을 지정해 콘텐츠를 꾸며주는 시각적인 표현(정적)을 담당.    
        - JavaScript 
            - HTML 웹 페이지의 여러가지 동적인 기능을 제공하는 스크립트 언어.        
            - 콘텐츠를 바꾸고 움직이는 등 페이지를 동작시키는 동적 처리를 담당.

3. 크로스 브라우징 (Cross Browsing)
    1) 조금은 다르게 구동되는 여러 브라우저에서, 동일한 사용자 경험(같은 화면, 같은 동작)을 
       줄수 있도록 제작하는 기술,방법.

4. 기본 용어
    1) 창(Window)       
    2) 주소창(Address bar)
    3) 뷰포트(Viewport)

5. 특수 문자 용어
    1) ` : 백틱(Backtick), 그레이브(Grave)
       ~ : 틸드(Tilde), 물결 표시 
       ! : 엑스클러메이션(Exclamation mark), 느낌표
       @ : 앳(At sign), 골뱅이 
       # : 샵(Sharp), 넘버(Number sign), 우물 정
       ^ : 캐럿(Caret)
       & : 엠퍼센드(Ampersand)
       * : 에스터리스크(Asterisk), 별표
       - : 하이픈(Hyphen), 대시(Dash), 마이너스 
       _ : 언더스코어(Underscore), 로대시(Low dash), 밑줄 
       " : 쿼테이션(Quotation mark), 큰 따옴표 
       ' : 아포스트로피(Apostrophe), 작은 따옴표
       :   콜론(Colon)
       ;   세미콜론(Semicolon)
       /   슬래시(Slash)
       |   버티컬 바(Vertical bar)
       \   백슬래시(Backslash), 역 슬래시
       ()  퍼렌서시스(Parenthesis), 소괄호, 괄호 
       {}  브레이스(Brace), 중괄호 
       []  브래킷(Bracket), 대괄호 
       <>  앵글 브래킷(Angle Bracket), 꺽쇠괄호 

6. HTML 기본 문법
    1) <h1>Hello world!</h1>       
       <태그>내용</태그>      :    요소(Element)
        -시작(열린) 태그 (Tag)
        -종료(닫힌) 태그 
        -요소의 내용(Contents)

       <태그 속성="값">내용</태그>  : 기능의 확장 
        -Attribute
        -Value

       <태그>
       <태그/> : 빈 태그(empty tag)

       <img src="./rose.jpg" alt="장미" />
            ---------------  ----------
            이미지 경로         이미지의 이름(대체 텍스트,Alternate Text)

7. HTML 요소의 관계

          자식요소 
         -------------------   
    <div><div>Contents</div></div>
    -----
    부모요소

8. 글자와 상자     
    1) 요소가 화면에 출력되는 특성, 크게 2가지로 구분.
        - 인라인(Inline) 요소 : 글자를 만들기 위한 요소들.
        - 블록(Block) 요소 : 상자(레이아웃)를 만들기 위한 요소들.
    2) <span></span>
        - 대표적인 인라인 요소.
        - 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 설정하는 용도.
        - 요소가 수평으로 쌓임.
        - 포함한 컨텐츠 크기만큼 자동으로 줄어듬
                     요소의 가로 너비를 지정하는 CSS 속성
                     -----
        <span style="width: 100px;">Hello</span>         ==> 반응없음!    
        <span style="height: 100px;">World</span>        ==> 반응없음!
                     ------
                     요소의 세로 너비를 지정하는 CSS 속성

                     요소의 외부 여백을 지정하는 CSS 속성
                     ------
        <span style="margin: 20px 20px;">Hello</span>
    <span style="padding: 20px 20px;">World</span>
                     -------
                     요소의 내부 여백을 지정하는 CSS 속성

        <span><div></div></span>         ==> 불가 (인라인 요소안에 블록 요소는 불가) 
        <span><a></a></span>             ==> 가능 (인라인 요소안에 인라인 요소는 가능)

    3) <div></div>    
        - 대표적인 블록 요소 
        - 본질적으로 아무것도 나타내지 않는 컨텐츠 영역을 설정하는 용도
        - 요소가 수직으로 쌓임
        - 가로 너비 : 부모 요소의 크기만큼 자동으로 늘어남    
          세로 너비 : 포함한 콘텐츠 크기만큼 자동으로 줄어듬!  
                        
          <div style="width: 100px;">Hello</div>        ==> 반응있음!
          <div style="height: 40px;">World</div>        ==> 반응있음!

      <div style="margin: 10px;">Hello</div>        ==> 반응있음!
      <div style="padding: 10px;">World</div>       ==> 반응있음!

      <div><div></div></div>           ==> 가능 (블록 요소안에 블록 요소 가능) 
      <div><span></span></div>         ==> 가능 (블록 요소안에 인라인 요소 가능)