-
- DTD(Document Type Definition)
유효성 검사
표준 모드(Standards Mode)
c.f. 쿼크 모드(Quirks mode, 쿽스 모드)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
DOCTYPE 선언이 존재하지 않거나 잘못 적혀있을 경우, 웹 브라우저는 문서를 쿼크 모드로 해석한다.
인터넷 익스플로러의 경우, DOCTYPE 선언 윗쪽에 주석이나 다른 문자가 들어갔을때에 문서를 쿼크 모드로 해석한다.
*
브라우저 객체 모델(BOM, Browser Object Model)
window // Window
.screen // Screen
.location //Location
.document // Document
.defaultStatus
.status
.opener
.closed
.alert()
.confirm()
.prompt()
.open()
e.g. var w = window.open("smallwin.html", "smallwin", "width=400,height=350,status=yes,resizable=yes");
.close()
.moveTo()
.moveBy()
.resizeTo()
.resizeBy()
.focus()
.blur()
.scroll()
.scrollTo()
.scrollBy()
마크업/CSS/자바스크립트
* 문서 객체 모델(DOM, Document Object Model)
- 레벨 0 DOM
넷스케이프 3
Document
.color
.bgColor
.images[] // Image; c.f. document.getElementsByTagName('img')
.forms[] // Form
.open()
.close()
.write()
.writeln()
Image
onload
.src
.width
.height
Form
onsubmit
onreset
.name
.elements[]
document.forms["myformname"].elements["myinput"].value // Square Bracket Notation
Button, Checkbox, FileUpload, Hidden, Option, Password, Radio, Reset, Select, Submit, Text, TextArea
.action
.encoding
.method
.target
.submit()
.reset()
폼 필드
.type
{text|hidden|textarea|checkbox|radio|select-one|select-multiple|file|submit|reset}
c.f. .setAttribute('type', 'checkbox')
.name
.form
Text, Hidden, TextArea, FileUpload, Submit, Reset
.value
c.f. .setAttribute("value", "..")
.defaultValue
<img />
이미지 형식: .gif, .jpeg, .jpg, .png
<BUTTON />, <INPUT />, <OPTGROUP />, <OPTION />, <SELECT />, <TEXTAREA />
.disabled
{true|false}
e.g. <input disabled="disabled" />
c.f. The disabled attribute will not work with <input type="hidden">
<INPUT type=text />, <INPUT type=password />, <TEXTAREA />
.readonly
{true|false}
e.g. <input readonly="readonly" />
.read-only?
Checkbox
.value?
.checked
{true|false}
Radio
e.g. var radios = document.forms[0].elements['..'];
for (var i=0; i<radios.length; i++) {
if (radios[i].checked) { .. }
}
Button
Reset
Submit
Select // select-one
.value?
.selectedIndex
.options[] // Option
.length
e.g. var newOpt = new Option('text', 'value');
x.options[1] = newOpt;
Option
.value
.text
- W3C 레벨 1 DOM
마크업
요소(element) 노드
텍스트(text) 노드
속성(attribute) 노드
주석 노드
element
.parentNode
.firstChild
.lastChild
.previousSibling
.nextSibling
.childNodes[]
속성 노드 제외
.length
(.id)
.className
.title
.nodeName
대문자?
.nodeValue
.nodeType
{1|2|3|8|9}
1: 요소 노드
2: 속성 노드
3: 텍스트 노드
.tagName
.innerHTML
.style
요소의 인라인 스타일
c.f. .getAttribute(), .setAttribute()
.margin
.marginLeft
.color
.fontSize
.onclick
c.f. .getAttribute(), .setAttribute()
c.f. <a />
.onkeydown
c.f. .getAttribute(), .setAttribute()
.onkeypress
.onkeyup
.getElementsByTagName() // 노드 리스트
e.g. var paras = document.getElementsByTagName("p");
for (var i=0; i<paras.length; i++) {
paras[i].onclick = function() { .. }
}
.cloneNode()
.getAttribute()
.getAttributeNode()
.setAttribute()
.appendChild()
추가하려는 노드가 이미 문서 안에 있다면 노드는 원래 위치에서 제거된다.
.insertBefore()
e.g. function insertAfter(newElement,targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
.removeChild()
.replaceChild()
<strong />
<em />
<b />
<i />
<abbr />
<acronym />
<q />
.cite
<cite />
<code />
<samp />
<var />
<kbd />
<blockquote />
.cite
<img />
.src
<a />
.href
<button />, <input />, <select />, <textarea />
.disabled
input[type=text], input[type=password], textarea
.read-only
<input />
.size
.type
{text|password|hidden|checkbox|radio|submit|reset|button|image|file}
input[type=text]
.maxlength
<textarea />
.rows
.cols
HTML5: IE 10
.maxlength
<label />
<button />
<fieldset />
c.f. <div />
<legend />
HTMLTableElement
.rows[]
.insertRow()
.deleteRow()
HTMLTableRowElement
.cells[]
.insertCell()
Document
.documentElement // <html />
.body
.getElementById()
.createElement()
요소 노드를 만든다
c.f. {select}.options[]
.createTextNode()
텍스트 노드를 만든다
c.f. {element}.innerHTML
window
.onload
.onunload
커스텀 속성
* 캐스케이딩 스타일 시트(Cascading Style Sheets)
노드 트리 안에 있는 요소들은 그들 부모의 스타일 속성을 그대로 전달받는다
클래스(class)와 아이디(id) 속성
*
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset={utf-8|euc-kr}" />
<title>..</title>
</head>
<body>
</body>
</html>
*
비동기 서버사이드 프로그래밍
c.f. 모든 페이지를 동기적으로 처리
참조 사이트:
https://en.wikipedia.org/wiki/Quirks_mode
http://jjjryu.tistory.com/entry/HTML-1