[코딩] Circle Square

 * cdn방식

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

 - $(document).ready(function(){
   ----------- -----
      선택자    이벤트 핸들러
       // jQuery 코드
   // 자바스크립트 문법
   });

 - $("#picframe").slideToggle();

 - $("#id명") : id 속성명 - 동일한 id로 정의된 요고사 여러개 있어도 첫 번째 요소에만 적용
 - $("*") : DOM객체의 모든 요소
 - $("태그명") : 해당 태그로 정의된 요소
 - $(".class명") : class속성으로 정의된 요소 - 동일한 class 속성으로 정의된 요소가 여러개 있으면 모두 적용
 - $(객체) : 선택자로 객체를 적용
 - $(this) : 현재 작업중인 객체
 - $("태그명1 태그명2") : 태그명 1 하위로 정의되어 있는 태그명 2를 요소로 적용
 - $("태그명.클래스명") : 선택자로 정의한 태그가 클래스명인 요소만 찾아서 적용
 - $("태그명:first") : 문서내 지정한 태그로 정의되어 있는 첫번째 요소를 찾아서 적용
 - $("태그명1 태그명2:first-child") : 모든 태그명1안에 정의되어 있는 첫 번째 태그명2가 선택.
                                  여러개가 정의되어 있으면 모두 선택됨.
 - $("[속성명]") : 선택자로 명시한 속성이 정의되어 있는 모든 요소를 선택
 - $("태그명[속성명=속성값]") : 정의된 태그속성에 특정 속성값으로 설정되어 있는 요소만 선택
 - $("태그명[속성명!=속성값]") : 정의된 태그속성에 특정 속성값과 다르게 설정되어 있는 요소만 선택
 - $(":input태그의 type") : 해당 type으로 정의된 form태그의 요소가 선택
       ex) $(":button"): <input type="button"> 으로 정의한 요소와 <button>인 요소가 모두 선택
 - $("태그명:even") : 태그의 짝수
 - $("태그명:odd") : 태그의 홀수

 - append() : 선택된 요소의 last child 노드로 추가.
 - prepend() :선택된 요소의 fisrt child 노드로 추가.
 - after() : 선택된 요소의 오른쪽 형제 노드로 추가.
 - before()  : 선택된 요소의 왼쪽 형제 노드로 추가.
 - remove()  : 선택된 요소의 자식노드와 선택된 요소를 모두 삭제
 - empty() : 선택된 요소의 자식요소만 삭제
 - children() : 지정된 노드의 모든 하위 노드를 가져온다.
 - last()    : lastChild
 - fisrt()    : firstChild

 - val() : 입력필드의 값을 반환
 - text() : 요소의 텍스트 반환
 - html() : 선택한 요소의 html태그가 포함된 컨텐츠 반환
 - attr() : 요소의 속성을 반환
 - position() : 요소의 위치 반환

 - $("<p>dom 액세스 테스트</p>"); // jquery 내부에서 사용되는 객체(하나의 노드로 관리)

 - css("background","yellow");

 - attr("style","background-color:yellow;");

 - css({"color":"blue","border":"solid 1px red"}) : json 포맷
 - hide() : css의 display속성을 none적용한것과 동일한 결과

onclick()           : 마우스 클릭할때
onload()           : 페이지가 로딩할때
onkeyup()         : 키보드 키가 눌렀다가 올라올때
onchage()         : 폼태그의 값이 변경되었을때
onmouseover()   : 마우스가 객체 위에 올라갔을때
onmouseout()     : 마우스가 객체 밖으로 옮겨졌을때
onSubmit()
onReset()
onAbort()          : 작업 끝내기
onFocus()
onBlur()             : 다른 곳으로 이동
onDbClick()
onDragDrop()
onError()
onKeyDown()
onkeypress()       : 누르고 있는 상태
onunload()
onmousedown()
onmousemove()
onmouseup()
oncontextmeue()
onResize()
onScroll()
onMove()
onSelect()

 * Data객체
 - String
var s = new String("문자열");

s="문자열";

s.constructor
s.length                           : 문자열 길이 리턴
s.prototype 
s.charAt(0)                        : index번째 문자 리턴 (0,1,..)
s.indexOf('a')                     : 왼쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1
s.lastIndexOf('a')                : 오른쪽부터 확인하여 문자와 일치하는 index 리턴, 없으면 -1 
s.substring(start, end)          : start ~ end-1 index를 추출
s.substr(start, len)               : start에서 len개 만큼 추출
concat(s,s1,..)                     : 문자열 합치기 s+s1+..
s.toUpperCase()                 : 대문자 변환
s.toLowerCase()                  : 소문자 변환
s.split(구분자, 구분자의 개수) : 구분자로 s를 분리 
s.replace(a,b)                     : s에서 a를 b로 변경

 - Number
var n = new Number();

n.MIN_VALUE
n.MAX_VALUE
n.NaN : Not a number
n.toFixed(자리수)  : 지정된 소수점 자리수 만큼 문자열로 리턴
n.toString() : number -> string
n.valueOf() : 기본형으로 값을 리턴

 - Date
var d = new Date();

d.getFullYear()         : 연도 리턴
d.getMonth()+1       : 월 리턴. 0-1월
d.getDate()             : 일 리턴

d.getHours()            : 시간
d.getMinutes()          : 분
d.getSeconds()         : 초
d.getDay()               : 요일 리턴. 0-일요일
d.setMonth(7)
d.setDate(1)

 - Array
var arr = new Array();
arr = [1,2,3];

push(value)
pop()
reverse()
indexOf('a')
slice(start,end)
splice(index, delCount)
sort()
join()

 - Boolean
var b = new Boolean(1);

b.toString() => "true" or "false"
b.valueOf() => 기본값으로 리턴

 - Math

Math.abs(-21)                  : 절대값

Math.round(3.7)               : 올림
Math.ceil(3.7)                  : 버림
Math.floor(2.6)                 : 반올림
Math.floor(3.789*10)/10     : 원하는 소숫점 까지 표시
Math.max(10,20,30)           : max값
Math.min(10,20,30)           : min값
Math.random()                 : 0~1까지 랜덤값

 - Object
 var o = new Object();
 - RegExp

 * BOM(Browser Object Model)
 - window

window.document.name명.id
1) property
document
name
history
location
navigation
screen
opener
parent
self
top
moveTo()
print()
focus()
blur()                              : 포커스 제거


2) 대화상자
alert("a")                         : 알림창
prompt("값을 입력하세요")  : 사용자 입력창
confirm()                         : 확인창

3) popup
open("새로 open할 창의 path", "팝업창의 이름", "width=500, height=300,top=100, toolbar=yes,state=yes")
close()                                                                   : 닫기

opener                                                                  : 부모 객체
 
4) 데이터 처리
 parseInt("문자열")                  :  string -> number
 parseFloat("문자열");              : string -> number
 isNaN(값)                            : 입력한 문자열이 숫자인지 문자인지 판단.
 eval(값)                               : 매개변수로 전달된 데이터를 실제로 실행.(보안에 취약) 계산실행.
 data.trim()                           : 공백제거

5) 자동실행
setTimeout(함수, timeout ms시간)      : 한번 실행
setInterval(함수, timeout ms 시간)       : 반복 실행
clearTimeout(해체할 작업의 id)           :  매개변수로 전달된 작업id에서 참조하는 작업을 종료 

clearInterval(해체할 작업의 id)

 - Location
host
href
hostname
origin
port
protocol
assign(URL)
reload(bool) : F - 캐시(default), T - server
replace(URL)
 
 - form
text
password
checkbox
radio
selectedIndex
 
 - History : URL history
length
back()
forward()
go(number|URL)
 
 - Screen
availHeight : taskbar 제외
availWidth
height
width

 - Navigation : 브라우저 정보
appName
appVersion
cookieEnabled
language
onLine
product : engine
userAgent

* DOM(Document Object Model)

 - 구성요소

document   : dom 객체의 가장 상위객체
element     : html문서를 구성하는 컨텐츠
text           : 태그와 태그 사이에 입력한 문자열, 공백도 문자열 객체로 인식
attribute     : 태그내부에 정의되어 있는 속성

- 속성

firstChild             : 첫번째 자식 노드
lastChild             : 마지막 자식 노드
childNodes          : 특정노드의 모든 자식노드들을 반환. (배열)
nodeName          : 노드이 이름(엘리먼트명과 동일 - 텍스트노드인 경우 #text로 출력)
nodeType            : 1-요소, 2-속성, 3-내용
nodeValue
ownerDocument   : 최상위 요소
parentNode
previousSibling
nextSibling

- 메소드

getElementById("Id명")                               : id로 정의된 객체를 반환, 단일객체에 동적 작업을 수행
getElementsByClassName("class명")               : class명으로 정의된 객체를 반환(배열)
getElementsByTagName("태그명")                 : 태그명으로 정의된 객체를 반환(배열)
document.getElementById("result").innerHTML : HTML 속성 조회

document.getElementById("result").innerText   : Text 속성 조회
getAttribute("속성명")                                : 속성에 정의된 값이 리턴
setAttribute("속성명","값")                           : 선택한 객체에 속성과 속성값을 정의할 수 있다. 

- 노드 추가

1) 삽일될 노드를 생성(createElement or createTextNode)
createTextNode("텍스트") : 텍스트(문자열) 노드를 생성
createElement("엘리먼트명") : 엘리먼트(태그)를 생성

2) 삽입될 위치 구하기
어떤 노드의 하위노드로 추가될 지 알아야 하므로 삽입될 부모노드의 위치를 구하기

3) 노드를 추가
appendChild("노드명") : 매개변수로 정의된 노드를 삽입.(부모노드의 lastChild로 삽입)

insertBefore("추가될 노드명", "target노드명") : target 노드 뒤에 추가

부모노드.removeChild("노드명") : 노드를 삭제

부모노드.lastElementChild        : 공백무시 get
부모노드.hasChildNodes()        : child노드가 있으면 true, 없으면 false 리턴
cloneNode(option)                 : 노드 복사
hasAtrributes()
setAttributeNode()
querySelector()
querySelectorAll()
createAttribute()

1. 인터프리터 언어

2. 데이터형

 number - 실수, 정수

 string - 문자, 문자열

 undefined 가능

3. 변수 사용

 var 변수명;         -> parsing시 undefined 값 할당. (지역 변수)

  => scope가 {} 단위가 아닌 function{} 단위.

 변수명 = literal;   -> run time 중 값 할당. (전역변수)

4. 데이터 타입의 전환이 자유로움. 변수에 할당되는 값에 따라 변수 타입 결정됨.

5. typeof (변수)  => 타입 반환

'string', 'number', 'object', 'undefined', 'function', 'boolean',

6. 데이터가 자동으로 형변환 됨.

7. 문자열과 다른 데이터형이 + 연산하면 문자열로 연결됨.

ex) '123'+45 => '12345'

8. 비교 연산자 ==, != 필요시 형변환 후 비교

9. identical 연산자 ===, !== 형 변환하지않고 비교

10. 논리연산자 &&, || 사용 시 자동 형 변환으로 return 값이 true, false가 아닌 결과 값도 리턴됨.

ex) "123" || 0  => "123"

     "123" && 0 => 0

어떤 함수가 인자를 받을 때 반드시 배열을 받아야 할 경우

이벤트 처리시 ie와 다른 브라우저 간 처리방법이 다른경우

11. 기타 연산자

,  => 계속해서 진행

instanceof => 객체가 지정된 클래스의 인스턴스인지 확인

12. 향상된 for문

for(i in array){

}

13. break label문

label:

for(i=0;i<9;i++){

    for(j=0;j<9;j++){

        break label;

    }

}

// 여기로 옴.

14. continue label문

label:

for(i=0;i<9;i++){ // 여기로 옴.

    for(j=0;j<9;j++){

        continue label;

    }

}

15. 함수 선언

함수명(); // 가능

function 함수명(매개변수, ...){

    return 값;

}

 => 함수가 생성되는 시점. parsing 단계

16. 함수 리터럴 (익명함수)

변수명(); // 불가능

var 변수명 = function(매개변수,..){

    return 값;

}

변수명(); // 가능

 => 함수가 생성되는 시점. runtime 단계

17. Function 생성자

var a = 변수명(인자1,..) // 불가능

var 변수명 = new Function("인자1", ...,"실행 문장");

var a = 변수명(인자1,..) // 가능

 => 함수가 생성되는 시점. runtime 단계

18. 함수 정의 매개변수 개수와 호출인자 개수가 달라도 가능

function test(a, b){

}

test(a); => 가능

test(a,b); => 가능

19. arguments 내장변수를 이용해 parameter 배열을 사용가능

    arguments.callee()는 현재 실행 함수 호출

function test(a, b){

    for(i=0; i<arguments.length; i++){

        arguments[i];

        arguments.callee(a); // 재귀함수 사용가능

    }

}

test(a);

test(a,b);

20. 중첩 함수를 이용하여 외부에서 호출 불가하도록 사용 가능

var a=function(){

    var b = function(){

    }

}

b(); // b함수 호출 불가

function a(){

    function b(){

    }

}

b(); // b함수 호출 불가

21. 콜백 함수 - 이벤트 처리시 많이 사용

var a = function(){  //  콜백 함수

    // 실행문

}

onclick(a); // onclick()이벤트로 a콜백 함수 호출

22. 내장함수

alert("a"); // 알림창

setTimeout(함수, timeout 시간); // 한번 실행

setInterval(함수, timeout 시간) // 반복 실행

parseInt("문자열"); // string -> number

parseFloat("문자열"); // string -> number

* 별도 정리

23. 내장객체

 * Data

 - String, Number, Date, Array, Boolean, Object, Math, RegExp

 * Browser

 - Window, Screen, Location, History, Navigation

 * DOM

* 별도 정리

24. 지역변수, 전역변수

1) function 밖에서 변수를 선언하는 경우 - 전역변수
2) function 내부에서 변수를 선언하는 경우 - 전역변수
    (반드시 변수가 선언된 function부터 실행되어야한다. )
3) var키워드를 이용해서 function내부에서 정의하는 변수 - 지역변수
4) var키워드를 이용해서 function 밖에서 정의하는 변수 - 전역변수

25. 함수 호이스팅

선언부(<head>)에 함수를 선언시 global영역으로 최우선으로 실행된다. 

이로 인해 문제가 발생하는데,

1) 선언부에 함수의 호출이 있는 경우 함수의 선언이 선행되지않아도 에러가 발생하지않는다.

2) Global 영역이 크면 respone시간이 오래 걸린다.

이로인해 표현식으로 사용 권고.(함수 리터럴)

var 변수명 = function 함수명(매개변수1,..){

           실행내용

}

1. <body>태그에서 정의하고 사용하는 방법

 <body>
	<script type="text/javascript">
		// 실행내용
	</script>
</body>

2. <head>태그안에 스크립트를 정의 <body>태그 내에서 호출해서 사용한다.

<head>
	<script type="text/javascript">
		// 함수정의
	</script>
</head>
<body>
	<script type="text/javascript">
		// 함수호출
	</script>
</body>

 3. 태그 내부에 inline으로 삽입 (event handler를 이용하여 함수를 호출한다)

<body>
	<input type="button" onclick="함수호출()"/>
    <a href="javascript:함수호출()">
</body>

 4) 외부문서를 참조하여 사용

<head>
	<script type="text/javascript" src=".js파일 경로"></script>
</head>

h1{

     * 폰트
     font-family : 글꼴;
     font-style : italic;
                : normal;
                : oblique;
     font-size : xx-small;
               : x-small;
               : small;
               : medium;
               : large;
               : x-large;
               : xx-large;
               : larger;
               : samller;
               : 12px;
               : 150%;
     font-weight : bolder;                 진하기
                 : normal;
                 : bold;
                 : bolder;
                 : lighter;
                 : 100;
                 
     * 텍스트
     color : #ffffff;
           : rgb(255,255,255);
           : rgba(255,255,255,0.5);        투명도 0-투명, 1-불투명
     text-align : center;
                : justify;                 오른쪽 여백 없앰
     text-decoration : none;               밑줄 설정
     text-transform : uppercase;           대문자
                    : lowercase;           소문자
                    : capitalize;          첫글자만 대문자
     text-indent: 50px;                    첫 라인 들여쓰기
     letter-spacing : -10px;               글자 간격
     line-height : 10px;                   라인 간격
     word-spacing : 10px;                  단어 간격 
     text-shadow: 5px 10px 5px gray;       x좌표, y좌표, 투명도, 색
		   
     * display
     display : none;                        안보이게
             : block;                       줄바꿈
             : inline;                  같은 줄(width, height, margin-top,margin-bottom 무시)
             : inline-block;            같은 줄(width, height, margin-top,margin-bottom 적용)
		   
     visibility : visible;
                : hidden;
                : collapse;                 테이블 안보이게
                
     * 투명도
     opacity : 0.5;                         투명도 0-투명, 1-불투명
		   
     * box model
     width : 10px;                           content의 가로
     height : 10px;                          content의 세로
     max-width : 10px;                       창이 작아지면 자동 조절
          
     padding : 10 20 30 40;                  상 우 하 좌
          
     border : solid 5px #ffffff;
     border-style : solid;
                  : none;
                  : dotted;
                  : dashed;
                  : solid;
                  : double;
                  : groove;
                  : ridge;
                  : inset;
                  : outset;
                  : hidden;
     
     border-width : thin;
     border-color : #ffffff;
     
     border-radius : 10px 10px 10px 10px / 10px 10px 10px 10px;
        (테두리 둥글게 top-letf-x, t-right-x, bottom-l-x, b-r-x / t-l-y, t-r-y, b-l-y, b-r-y)
     border-image : ;
     box-shadow : ;
     border-collapse:collapse;
     
     margin : 10 20 30 40;                            상 우 하 좌
     margin : auto;                                   가운데 정렬
                   
     box-sizing : content-box;            width와 height가 content의 길이를 나타냄.(default값)
                : border-box;                         width와 height가 border의 길이를 나타냄.
     
     * background
     background-color : #ffffff;                     색
     background-image : url('경로'),url('경로2');    배경 이미지
     background-repeat : repeat;                     반복
                       : no-repeat;
                       : inherit;
                       : round;
                       : space;
                       : repeat-y;
                       : repeat-x;
                       : no-repeat;
     background-attachment : fixed;                   붙이는 방식
     background-position : center;                    위치
     
     * potision
     potision : static;                           (default) top, bottom, left, right에 무관.
              : relative;                              normal position 기준. 부모에 적용.
              : absolute;                            가장 가까운 부모 기준.      자식에 적용.
              : fixed;                                 view port 기준
     z-index : -1;                                     큰 값이 위로 올라온다.
     overflow : visible;                               내부 요소가 부모의 범위를 벗어날 경우
              : hidden;                    
              : scroll;                    
              : auto;                                  필요할 때만 scroll 생성
     		                    
     * float                    
     float : left;                   자식 float 속성을 주면 부모는 overflow : hidden;을 준다.
           : right;
     clear : both;
     
     * cursor
     cursor : auto;
            : text;
            : crosshair;
            : default;
            : e-resize;
            : help;
            : move;
            : n-resize;
            : ne-resize;
            : nw-resize;
            : s-resize;
            : se-resize;
            : sw-resize;
            : w-resize;
            : pointer;
            : wait;
            : progress;
     
      * ext			
      list-style-image: url('이미지 경로');             리스트에 이미지 background
     
     }
     >
</head>

<head>
    <style>
        *{}                        전체 선택자(*)
        태그명{}                    태그 선택자(태그명)
        #id{}                      id 선택자(#아이디명)
        .class{}                    class 선택자 (.클래스명)
        부모선택자>자식선택자{}      부모선택자의 자식선택자들 선택 (>)
        부모선택자 자식선택자{}      부모선택자의 자식선택자들 선택 ( )
        형제A선택자+형제B선택자{}    형제A선택자 바로 뒤의 형제 선택자B 선택(+)
        형제A선택자~형제B선택자{}    형제A선택자 뒤의 모든 형제 선택자B 선택(~)
        [속성]{}                    속성을 가진 모든 태그 선택([속성명])
        [속성="값"]{}               특정 값을 가진 속성을 가진 모든 태그 선택([속성명="값"])
        선택자[속성~="값"]{}        값을 단어로 포함하면 선택. 값 앞뒤에 공백이 있다면 선택(~=)
        선택자[속성|="값"]{}        값과 동일하거나 동일한 값으로 시작할 경우 선택(|=)
        선택자[속성*="값"]{}        값을 하나라도 포함하면 선택(*=)
        선택자[속성^="값"]{}        값으로 시작하면 선택(^=)
        선택자[속성$="값"]{}        값으로 끝나면 선택($=)
        
        a:link{}                    방문 전 (선택자:link)
        a:visited{}                 방문 후 (선택자:visited)
        a:hover{}                   마우스 올리면 (선택자:hover)
        a:active{}                  클릭한 순간 (선택자:active)
        
        input:checked{}             선택되어 지면
        input:disabled{}            비활성화 되면
        input:enabled{}             활성화 되면
        input:focus{}               마우스 커서로 선택되면
        
        p:empty{}                   비어있을 경우
        p:fist-child{}              첫 자식(첫 자식이 다른 자식이면 선택안됨)
        p:last-child{}              마지막 자식
        p:only-child{}              자식이 하나인 경우
        p:fist-of-type{}            첫 자식(첫 자식이 다른 자식이더라도 선택안됨)
        p:nth-child(n){}            n번째 자식
        p:nth-child(odd){}          홀수 자식
        p:nth-child(even){}         짝수 자식
    </style>
</head>

<head>
    * internal
    <style>
    	HTML 파일 내 스타일 내용 기입
    </style>
    
    * exteral
    <link ref="stylesheet" type="text/css" href="css파일 경로" />
        별도 .css 파일 내 스타일 내용 기입
</head>

<body>
    * inline
    <div style="">
        태그 style 속성 내 스타일 내용 기입
    </div>
</body>

* head 태그
<!doctype html> web browser에 web page 정확하게 rendering하기 위한 정보
<head>
    <meta> 추가정보
    <meta charset="UTF-8"> 문자 인코딩 방식
    <title> 제목 </title>
    <script> java script </script>
    <link> 파일 연결 ex> css 파일 연결 </link>
    <style> css </style>
    <base> 기본정보 ex> 링크정보, blank 
</head>

* body 태그
<body>
    * 텍스트 꾸밈 태그
    <h1>큰 글씨</h1>
    <h2>       </h2>
    <h3>       </h3>
    <h4>       </h4>
    <h5>       </h5>
    <h6>작은 글씨</h6>
    <b> 굵은 글씨 </b>
    <strong> 글자 강조 </strong>
    <i> 기울어진 글씨 </i>
    <address> 기울어진 글씨 </address>
    <small> 작은 글씨 </small>
    <sub> 아래 붙는 작은 글씨 ex> O2 </sub>
    <sup> 위에 붙는 작은 글씨 ex> 2의 제곱 </sup>
    <ins> 밑줄 글씨 </ins>
    <del> 삭제선 글씨 </del>
    <font size="" face="글꼴" color=""> 폰트 </font>
    
    * 하이퍼링크 태그
    <a href="이동할 페이지의 경로"> 텍스트, 이미지에 하이퍼링크 </a>
    <a href="#이동할 하이퍼링크 id"> 여기를 누르면 </a>
    <a id="id"> 여기로 온다. </a>
    <a href="페이지가 다르면 페이지 경로 추가가능#이동할 하이퍼링크 id">
    	다른페이지의 id 하이퍼링크로 이동 </a>
    <a target="_self">이 창에 열기(default)</a>
    <a target="_blank">새 창에 열기</a>
    <a target="_parent">부모 프레임에 열기</a>
    <a target="_top">이 창에 전체화면으로 열기</a>
    
    * 테이블 태그
    <table> 테이블
    	<caption>설명 달기</caption>
        <thead> 테이블 머리 고정
    		<tr>행 태그
        		<th>제목 셀 내용1</th>
            	<th>제목 셀 내용2</th>
        	</tr>
        </thead>
        <tfoot> 테이블 발 고정
        	<tr>행 태그
        		<td>셀 내용1</td>
            	<td>셀 내용2</td>
        	</tr>
        </tfoot>
        <tbody> 테이블 몸 이동
        	<tr>행 태그
            	<td colspan="합칠 열의 수">셀 내용1</td>
        		<td rowspan="합칠 행의 수">셀 내용2</td>
        	</tr>
        </tbody>
    </table>
    
    * 리스트 태그
    <ol> 숫자 순서 있는 리스트
    	<li>리스트1</li>
        <li>리스트2</li>
    </ol>
    
    <ul> 순서 없는 리스트
    	<li>리스트1</li>
        <li>리스트2</li>
    </ul>
    
    * 문단 분리 태그
    <p> 문단분리 문단간 여백 존재 </p>
    <div> 문단분리 문단간 여백 없음 문장 내용에 개행이 있다면 적용됨 </div>
    <span> 문단분리 문단간 여백 없음 문장 내용에 개행이 있다면 적용안됨 </span>
    <pre>문장에 포함된 줄바꿈 여백 그대로 표현</pre>
    <hr/> 라인생성
    <br/> 다음 문단으로 이동
    
    * 이미지 태그
    <img src="이미지파일 경로" align="" alt="이미지가 없을 때 나올 텍스트" width="" height="">
    
    * 특수문자 태그
    < : &lt;
    > : &gt;
    & : &amp;
    " : &quot;
    space(공백) : &nbsp;
</body>

* form 태그

<form method="post"(http로 데이터전송) name="" action="데이터를 처리할 프로그래밍문서"
      method="get"(url로 데이터전송-보안취약, default)> 서버에 데이터 전송
	
    <input type="text" name="" value="" id="" size="" maxlength="" placeholder="안내문구"/> 텍스트 입력창
    <input type="number" name="" value=""/> 숫자 입력창
    <input type="password" name="" value=""/> 패스워드 입력창
    <textarea name="" id="" rows="행 수" cols="열 수">여러줄 텍스트 입력 창</textarea>
    
    <input type="radio" name="radio" value="" checked /> 라디오 선택 창
    <input type="radio" name="radio" value="" checked /> 단일 선택만 가능, name이 같으면 같은 그룹
    
    <input type="checkbox" name="checkbox" value="" checked /> 체크박스
    <input type="checkbox" name="checkbox" value="" checked /> 다중선택가능, name이 같으면 같은 그룹
    
    <select name="" id="" option="" size="" multiple="multiple">
    	<option value="">목록1</option>
        <option value="">목록2</option>
    </select>
    
    <input type="button" id=""/> 버튼
    <input type="submit" value="" /> 전송 버튼
    <input type="reset" value="" /> 취소 버튼
    <input type="date" name=""/> 날짜 선택창
    <input type="file" name="" /> 파일 load 버튼
    <input type="hidden" name="" id="" value="" />
    <fieldset> 묶음 상자
    	<legend></legend> 묶음 상자 제목
    </filedset>       
</form>