/////////////////////// HTML / Javascript ////////////////////////
1. 용어 정리
(1) HTML (Hypertext Markup Language)
웹페이지를 표시하는 기본언어
최신의 HTML 표준은 4.01이지만 HTML을 XML과 결합한
XHTML(eXtensible Hypertext Markup Language)이 권고안으로 나와있다.
(2) CSS(Cascading Style Sheets)
CSS 는 사용자 정의의 디자인 속성, 즉 글꼴, 크기, 색상, 이벤트 등을 지정할 수 있으며
CSS 를 사용한 모든 페이지는 기존 버전과의 호환성 되게 어떤 브라우저에서도 내용을 열
람할 수 있다. CSS 를 이용하여 설계자는 서로 다른 화면 해상도와 브라우저 상에서, 테이
블 없이도 동일하게 보여질 수 있는 페이지를 생성할 수 있다.
(3) XML(eXtensible Markup Language)
XML(eXtensible Markup Language)은 HTML이나 CSS로서 표현되지 못하는 영역을
DTD를 이용하여 정의하여 사용자 정의의 태그를 생성하여 제작할 수 있는 메타 마크업
언어이다.
(4) DOM(Document Object Model)
DOM(Document Object Model)은 웹페이지에 표현되는 모든 속성에 대해 객체화 하여
이를 자유 자재로 사용할 수 있도록 만든 것이다.
(5) ECMAScript (Javascript)
자바 스크립트는 W3C 표준으로 제정된 것은 아니다. 자바 스크립트는 주석 코드를
사용하여 비 호환성의 웹 브라우저로부터 숨겨져야 한다. 자바 스크립트는
HTML 문서의 Head 내에 위치해야 제대로 동작한다 따라서 문서의 Body 내에 자바 스
크립트를 위치시키는 것은 피해야 한다.
2. 웹 표준 검사
http://validation.w3.org
3. XHTML 사용해야 하는 이유
(1) 호환성 및 확장 가능성이 좋다.
(2) 유지비용 감소 및 재생산성 확대
(3) 경량의 로딩속도
4. DOCTYPE 문서형식
(1) HTML 2.0 표준문서 형식
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">
(2) HTML 3.2 표준 문서 형식
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
(3) HTML 4.01 표준 문서 형식
<!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 HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
(4) XHTML 1.0 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
(5) XHTML 1.1 표준 문서 형식
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
5. 일반 형식(Transitional)과 엄격한 형식(Strict)
HTML 4.01 Transitional은 예전에 있었거나 없어진 태그도 지원하며,
<font>에 지정된 스타일도 제대로 표현하여 준다.
HTML 4.01 Strict은 HTML을 엄격하게 적용한다.
<font> 태그에 적용된 스타일 보다는 CSS파일에서 지정된 스타일을 지켜 표현 해야 한다.
가장 최상의 브라우저 호환성을 제공해 주는 문서 형식은 XHTML 1.0 Transitional을 사용하는 것이다.
6. XHTML 일반 문법 준수
(1) 정확한 문서 구조 준수
문서의 루트 요소는 html이 되어야 하며, 이 html 요소는 XHTML 네임스페이스를 지정해야 한다.
<html xmlns="http://www.w3.org/1999/xhtml">
표준 문서에는 head, title 및 body 구조 요소가 포함되어야 한다. 프레임 세트 문서에는
head, title 및 frameset 구조 요소가 포함되어야 한다
(2) 모든 요소는 완벽하게 중첩되어야 한다.
<p>This is a <i>bad example.</p></i>
<p>This is a <i>good example.</i></p>
(3) 모든 속성 값은 인용 부호(“나 ‘)로 묶어야 한다.
<a href=http://sample.com>틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
(4) 모든 요소와 속성은 소문자여야 한다.
<A HREF="http://sample.com">틀린 경우</A>
<a href="http://sample.com">맞는 경우</a>
(5) 모든 요소는 닫아야 한다.
XML을 사용할 수 없는 이전 브라우저와의 호환성을 위해 /> 앞에 공백이 있어야 한다
(예: <br/>가 아니라 <br />)
(6) 모든 속성값은 속성이 함께 선언되어야 한다.
<option value="wrong" selected>틀린 경우</option>
<option value="right" selected="selected">맞는 경우</option>
(7) 모든 script 및 style 요소에는 type 속성이 포함되어야 한다.
<script type="text/javascript” language="javscript"></script>
<style type="text/css"></style>
(8) 모든 img 및 area 요소에는 alt 속성이 포함되어야 한다.
(9) 모든 SCRIPT내의 태그는 Escape 시켜야 한다.
<script type="text/javascript">
<!--
// 틀린 표현!
document.write("</P>");
// -->
</script>
<script type="text/javascript">
<!--
// 맞는 표현!
document.write("<\/P>");
// -->
</script>
<script type="text/javascript">
<![CDATA[
... <h1>데이터</h1> ...
]]>
</script>
(10) 모든 문서 내 URL에서 &를 쓰면 안 된다.
<!.에러! --> <a href="foo.cgi?chapter=1§ion=2">...</a>
<!.적합! --> <a href="foo.cgi?chapter=1&section=2">...</a>
보너스
테이블 구성시 <table><form></form></table> 식으로 form의 여백을 일부러
없애는 경우가 있는데 이것은 css로 바로 해결 가능.
form { margin: 0; }
7. CSS
http://csszengarden.com
http://phonophunk.com/
(1) CSS의 선언
<1> Selector 와 선언부 (p.text : Selector, {} : 선언부)
p.text {
margin: 0;
}
<2> Selector는 ,로 구분할 수 있다.
p.text,
span.name {
color: #666;
}
<3> 일반 선택자
- 공용 선택자 * : 모든 태그 지정
div.search * {
vertical-align: middle
} --> div.search 안의 모든 엘리먼트가 다 적용
- 타입 선택자 A : 태그 A 지정
- 클래스 선택자 .A : 클래스가 A인 태그를 지정
- ID 선택자 #A : 아이디가 A인 태그를 지정
<4> 복합 선택자
- 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정
<ul id="list">
<li><a href="list.html?id=34&type=blah">item 34</a></li>
<li><a href="list.html?id=35&type=blah">item 35</a></li>
...
...
<li><a href="list.html?id=99&type=blah">item 99</a></li>
</ul>
--> a 태그에 속성 지정시
ul#list a:link,
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}
--> 한방에 해결
- 자식 선택자 A > B : 태그 A로 감싸져 있는 바로 하위단계 B만 지정
<ul class="depth1">
<li>
<a href="about.html">Company</a>
<ul class="depth2">
<li>
<a href="overview.html">Overview</a>
</li>
<li>
<a href="ceo.html">Ceo.html</a>
</li>
</ul>
</li>
</ul>
ul.depth1 li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
ul.depth1>li {
background: #f9f9f9;
border-bottom: 1px solid #ddd;
}
- 인접 선택자 A + B : 태그 A와 B가 연속으로 나와 있는 것을 지정
<h2>브라우져 워</h2>
<p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
있습니다.</p>
<h2>어쩌고 저쩌고</h2>
<p>또다시 어쩌고 저쩌고</p>
--> 제목 뒤 첫글자만 크게 하고 싶다면??
h2+p:first-letter {
float: left;
font-size: 2.2em;
}
<5> 가상 클래스 선택자
- :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
- 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
- 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
- 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정
<6> 동적 선택자
- :first-line선택자 A:first-line : 태그 A의 문단중 첫번째 줄 지정
- :first-letter선택자 A:first-letter : 태그 A의 문단중 첫번째 글자 지정
- :before선택자 A:before : 태그 A의 문단 앞을 지정
- :after선택자 A:after : 태그 A의 문단 뒤를 지정
(2) CSS 선언 방법
<1> 외부 선언 (external css) - 우선순위가 낮다.
<link rel="stylesheet" type="text/css" href="myCss.css" />
<2> 엘리먼트에 직접 선언 (inline css)
<div style="padding: 10px; border: 1px solid #eee;">
<p>contents</p>
</div>
<3> 사용자 정의 스타일 (user defined css)
가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이
용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
(3) CSS 적용의 체크 포인트 4가지
<1> XHTML이 표준 문법이어야 한다.
<2> XHTML 문서가 의미와 구조적으로 구성되어야 한다.
<3> CSS가 표준 문법이어야 한다.
<4> CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.
(4) CSS Editor Firefox plugin
<1> Web Developer 확장 기능
<2> HTML Tidy
8. DOM / Script
문서 객체 모델(DOM; Document Object Model)은 HTML내에 들어 있는 요소를 구조화
객체 모델로 표현하는 형식이다. DOM은 플랫폼/언어 중립적으로 구조화된 문서를
표현하는 W3C 표준 모델이 기반이 된다.
(1) 객체 접근방법
<1> document.getElementById(aId)
<2> document.getElementByTagName(aTagName)
<3> 기존방식 밖에 지원안하는 IE 지원
function getObject(objectId) {
if(document.getElementById && document.getElementById(objectId) {
return document.getElementById(objectId); // check W3C DOM
}
else if (document.all && document.all(objectID) {
return document.all(objectID); // IE4
}
else if (document.layers && document.layers[objectID] {
return document.layer[objectID]; // NN4
}
else {
return false;
}
}
(2) 객체 사용 방법
구성요소의 내용을 바꾸거나 수정하는 innerText, innerHTML, outerText, outerHTML을
사용하는 것은 원래 잘못된 것이다. 왜냐하면 이는 W3C DOM 표준이 아니고 MS DOM 이기 때문이다.
firefox에서는 innerHTML만이 지원된다. 나머지는 지원불가!
속성 사용
1. x.id 나 x.style 같은 방법으로 먼저 속성을 찾는다.
2. 값이 나오지 않으면 x.getAttribute(“align”)나 x.getAttributeNode(“align”).value 로 찾는다.
3. 그래도 나오지 않으면 다른 속성 인터페이스를 시도하되, attributes[]는 절대 사용하지 않는다.
'HTML/JS/CSS' 카테고리의 다른 글
| [Javascript] parentNode, ParentElement (0) | 2008.11.14 |
|---|---|
| [javascript] innerHTML 을 이용한 테이블 row 추가, 삭제. (0) | 2008.06.24 |
| [Tip] select option 에 다수의 value 값을 넘긴 것과 같은 효과 내기. (0) | 2008.06.04 |