GUI/사양

(X)HTML

jjryu 2013. 4. 13. 18:03

- 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