Doworld

플래시 플레이어에서는 회전시키기 위해 rotation 속성을 사용하지만

Starling 에서는 radian 값을 사용한다.

degree 를 사용하여 회전을 시키고 싶다면

starling.utils.deg2rad 함수를 사용하여 변환하면 된다.

sp.rotation = deg2rad( Math.random() * 360 );

모든 DisplayObject 는 pivotX 와 pibotY 속성을 갖고 있으며

이를 이용해서 런타임 때 중심점을 바꾸는 것도 가능.

sp.pibotX = sp.width / 2;
sp.pibotY = sp.height / 2;

Type 선택자

xhtml 요소명을 선택자로 사용하는 것을 “Type 선택자” 또는 “요소 선택자”, “태그 선택자” 라고 함.

요소명 { 속성 : 값; }  // ex) p { color:#ff0000; }

전체 선택자

선택자에 * 기호를 사용하면 모든 요소에 스타일을 지정할 수 있음.
이를 “전체 선택자” 또는 “유니버셜(universal) 선택자” 라고 함.

* { margin:0; padding:0; }

class 선택자와 id 선택자

xhtml 요소에 class나 id 속성을 부여한 경우에 해당 class나 id 이름으로 접근하여 선택할 수 있음.
class 이름은 여러 번 사용할 수 있으니 한꺼번에 스타일 지정할 때 사용하면 편함.
id 이름은 한번만 사용할 수 있기 때문에 특정 요소에 접근하여 스타일을 지정할 때 사용할 수 있음.

class 선택자 (요소명 생략 가능)
요소명.클래스명 { 속성 : 값; }

id 선택자 (요소명 생략 가능)
요소명#아이디명 { 속성 : 값; }

속성 선택자

xhtml 요소가 특정 속성명이나 속성값을 가진 경우 해당 속성명으로 접근하여 스타일을 적용하는 방법.
IE6 과 같은 구버전의 브라우저에서는 지원하지 않는게 함정.

a[target] { background-color:#ff0000; } // a 요소에 target 속성이 있는 경우
a[target=”_blank”] { background-color:#ff0000; } // a 요소에 target 속성의 값이 _blank인 경우
a[class~=”new”] { background-color:#ff0000; } // a 요소의 class 속성이 여러 개 있는 경우

가상 요소와 가상 클래스

사용자가 지정할 필요 없이 기본적으로 제공되는 요소와 클래스.

1. first-line, first-letter 가상 요소

first-line 선택자는 요소의 첫 번째 줄에 있는 컨텐츠만 선택하여 스타일을 지정할 때 사용. first-line 가상 요소 선택자.
고정된 영역이 아니라 웹 브라우저의 크기에 따라 유동적으로 스타일이 적용됨.

first-letter 선택자는 요소의 첫 글자만 선택하여 스타일을 지정할 때 사용. first-letter 가상 요소 선택자.

2. before, after 가상요소

특정 요소에서 내용의 앞이나 뒤에 가상 컨텐츠를 삽입할 때 :before 가상요소와 :after 가상요소를 선택자로 사용.
IE의 경우 8 이상 버전부터 지원 가능.

p:before { content:"문단시작 컨텐츠 삽입"; }
p:before { content:"문단종료 컨텐츠 삽입"; }

근데 이거 쓸 일이 있긴 있으려나 싶음.

3. first-child 가상 클래스

첫 번째 자식 요소에만 스타일을 적용할 수 있는 선택자.

4. 링크 가상 클래스

상황에 따라 링크 스타일을 적용하는 방식.

1. :link - 방문하지 않은 링크
2. :visited - 방문한 링크
3. :hover - 마우스를 올려놓았을 경우
4. :active - 활성화 되었을 경우
5. :focus - 포커스가 생긴 경우

위의 순서대로 선언해야 함.

선택자 조합

1. 하위 선택자

상위 요소가 포함하고 있는 모든 하위 요소에 스타일을 지정할 때 하위 선택자를 사용할 수 있음.
하위 선택자 방식으로 조합할 때는 선택자와 선택자를 공백으로 구분하여 선언.

선택자 선택자 { 속성 : 값; }

div 요소 안의 p 요소에만 color 속성이 적용.

2. 자식 선택자

자식 선택자는 부모 요소의 바로 다음에 있는 자식 요소에 스타일을 적용하는 방법.
선택자와 선택자를 왼쪽 부등호(>)로 구분하여 선언.
IE6 같은 구버전 웹브라우저에서는 지원하지 않음.

선택자 > 선택자 { 속성 : 값; }

child 클래스가 적용된 div 요소의 자식 요소인 p 요소에만 ("동해물과 백두산이 마르고 닳도록") 부분만 적용.
다른 p 요소("하느님이 보우하사 우리나라만세") 부분은 자식이 아닌 손자이기 때문에 적용되지 않음.

3. 인접 형제 선택자

계층 구조로 접근했을 때 먼저 나오는 요소를 형 요소, 뒤에 나오는 요소를 동생요소라고 봄.
동생 요소에 스타일을 적용할 때 사용.

선택자 + 선택자 { 속성 : 값; } // 플러스기호(+)로 구분.

같은 동생 요소라 하더라도 인접한 형 요소가 없으면 두 번째 나오는 동생요소는 스타일이 적용되지 않음.

선택자 그룹화

다수의 요소에 똑같은 선언을 지정할 경우 같은 선언문을 반복해서 작성해야 하기 때문에 코드가 길어짐.
그룹화 하여 같은 선언문을 사용할 수 있음.

선택자, 선택자, 선택자 { 속성 : 값; } // 콤마로 나열함.

CSS란?

Cascading Style Sheet 의 약자.
마크업 요소에 스타일을 적용하기 위해 W3C에서 고안한 언어.

테이블 방식의 레이아웃 때문에 마크업 코드가 복잡해지는 문제를 해결할 수 있고,
표현과 관련된 요소(font, b, i 등)의 사용을 제한하면서 CSS 속성으로 대체할 수 있음.

CSS 방식의 디자인은 웹 사이트의 성능 향상에 기여.
웹 접근성이나 웹 사용성을 높이는데도 효과적.

CSS 서식

1. Rule set

CSS 서식은 ‘선택자’와 ‘선언부’로 나눌 수 있음.
선택자는 스타일을 적용할 대상을 의미.
선언부는 선택자에 적용할 디자인 관련 속성과 값을 의미.

selector { property : value; } // 선택자 { 속성 : 값; }

2. CSS 적용하기

- External Style Sheet (외부 스타일시트)

CSS 파일을 독립적으로 생성하여 웹 문서에 삽입하는 방법.
@import 와 link 요소를 이용하는 두 가지 방법이 있음.
구 버전 웹 브라우저에서는 @import 를 해석하지 못하는 경우가 있으니 주의.

<link rel=”stylesheet” type"=”text/css” href=”연결하려는 css 파일 경로와 파일명” />

<style type=”text/css”>
    @import url(“연결하려는 css 파일 경로와 파일명”);
</style>

외부에서 css 파일을 지정할 경우 css 파일이 캐시에 저장되기 때문에
사용자가 웹 사이트에 다시 방문했을 때 로딩 속도를 빠르게 할 수 있음.

css를 외부에 분리하여 적용할 경우 문자 코드 세트를 첫 줄에 선언해야 함. (@charset “utf-8”;)

- Internal Style Sheet (내부 스타일시트)

html 문서 내의 style 요소에 css 코드를 포함하는 형식.
특정 웹 문서에만 적용할 경우 외부 문서로 선언하는 것보다 효율적일 수 있음.

<style type=”text/css”>
    css 선언
</style>

- Inline Style Sheet (인라인 스타일시트)

특정 요소에 직접 style 속성을 이용하여 적용하는 방법.
기존 font 요소를 이용하는 것과 차이가 별로 없으므로 권장하는 방법은 아님.

<p style=”css 선언”>텍스트</p>

폼 관련 요소

1. 폼이란?

웹 문서가 서로 상호작용을 할 수 있도록 함. (라디오 버튼, 체크박스, 콤보박스, 버튼 등등)

2. 폼 요소 <form>

폼의 범위를 정의할 때 form 요소를 사용.
속성으로는 폼의 내용을 처리하는 서버의 URI를 지정하기 위한 action과
폼의 내용을 처리하는 방법인 method 가 있음.

<form action=”서버 URI” method=”get 또는 post”>
    폼의 내용
</form>

* GET 과 POST 의 전송방식의 차이점
   GET : 속도가 빠르지만 정보가 노출되어 보안에 취약하고 정보의 크기가 1024바이트로 제한적.
   POST : URL 주소에 정보노출이 되지 않으니 보안성이 좋고 정보의 크기 제한이 없지만 GET방식보다 느리다.

3. 폼 요소 그룹화 및 제목 <fieldset>, <legend>

여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset 요소를 사용.
fieldset 요소를 이용하면 주위에 border가 생성되어 그룹 안에 있는 컨텐츠가 폼과 관련된 요소임이 쉽게 구별됨.

fieldset의 컨트롤들이 어떤 성격의 컨텐츠인지 legend 요소로 제목형식으로 알려줄 수 있음.
fieldset 요소의 바로 뒤에 한번만 작성할 수 있음.
웹 브라우저 스타일이 다르게 적용되어 있어 css 디자인 작업에는 곤란할 수 있음.

<form action=”서버 URI” method=”post”>
    <fieldset>
        <legend>폼 요소의 제목</legend>
        … 생략 …
    </fieldset>
</form>

4. 레이블 <label>

폼을 구조화하고 접근성을 높일 수 있는 요소 중 하나.
각 폼 컨트롤의 연관 관계와 설명을 추가하는 역할을 담당.
웹 접근성을 높이기 위해 모든 폼 컨트롤 등에 label 요소를 사용하도록 권장.
* 최신 웹 브라우저의 경우 레이블만 선택해도 폼 컨트롤을 선택.
* 음성 브라우저의 경우 폼 컨트롤이 레이블과 인접하지 않은 경우에도 인식.

명시적 label (id와 for 속성 연결시키기)

<form action=”member.asp” method=”post”>
    <fieldset>
        <legend>회윈가입 정보</legend>
        <p><label for=”userName”>이름</label>
        <input type=”text” id=”userName” name=”name” value=”value” /></p>
    </fieldset>
</form>

암묵적 label (label 요소에 폼 컨트롤 포함시키기)

5. 다양한 폼 컨트롤 <input>

폼 요소 안에 한 줄 글상자, 라디오 버튼, 체크 박스 등의 폼 컨트롤을 생성할 때는 input 요소를 사용.
type 속성값에 따라 폼의 종류가 결정. (type=”컨트롤값”)

- text : 한 줄 글상자. 이름, id 등의 컨트롤을 생성할 때 사용.
- password : 비밀번호 입력 상자. 입력값이 * 로 표시.
- radio : 여러 개의 라디오 버튼 중 하나만 선택 가능.
- checkbox : 다중 선택이 가능한 체크 박스.
- file : 파일을 첨부형태로 서버로 보낼 때 사용.
- image : 이미지 버튼으로 src 속성을 이용하여 이미지를 지정. alt 속성으로 대체 텍스트 지정 가능.
- submit : 전송 버튼.
- reset : 취소 버튼.
- button : 범용 버튼.
- hidden : 숨김 컨트롤. 화면에 표시되지 않고 데이터 송신 지정을 위한 컨트롤.

<input type=”컨트롤값” vlaue=”초기값” size=”크기” id=”식별자” name=”변수명” />

6. 목록 상자 <select>, <option>, <optgroup>

select와 option 요소를 이용.
드롭다운 메뉴와 리스트 박스.

<select name=”” id=””>
    <option value=”초기값”>항목</option>
</select>

7. 여러 줄 글상자 <textarea>

여러 줄로 된 텍스트를 입력받을 때는 textarea 요소를 이용.
textarea 요소 안에서 입력한 텍스트의 내용이 길어지면 임의의 줄로 바뀜.
텍스트 수의 제한은 없음.

cols, rows 속성을 이용하여 영역크기를 지정.

<textarea cols=”” rows=”” name=”” id=””>
    초기값이 되는 텍스트 작성
</textarea>

8. 버튼 요소 <button>

button 요소를 이용하는 경우는 input 요소의 submit, reset, button 등의 type값과 같음.
그러나 좀 더 유연한 디자인이 가능.

<button type=”버튼의 종류” name=”변수명” id=”식별자”>버튼명</button>

인라인 프레임과 개체 삽입

1. 인라인 프레임 <iframe>

인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe 요소를 사용.
IE의 독자적인 요소였으나 HTML 4.0과 HTML 4.01 dlgn wjdtlrdmfh wldnjs.
XHTML 1.0 Strict 와 XHTML 1.1 에서는 사용할 수 없음.
Transitional DTD 에서만 사용 가능.

<iframe src=”삽입할 문서” id=”식별자” name=”변수명” frameborder=”테두리 표현 여부” width=”가로 크기” height=”세로 크기” scrolling=”스크롤 여부” title=”삽입된 컨텐츠의 성격이나 내용을 대체할 수 있는 설명”>
    프레임이 지원되지 않는 환경 대체 컨텐츠
</iframe>

2. 개체 삽입 <object>

이미지를 포함한 플래시 개체나 동영상, 사운드 등의 플러그인 개체를 의미.
IE와 IE가 아닌 다른 브라우저가 개체를 참조하는 방식이 다른 문제가 있음.

object 요소의 계층화 기법을 이용.

스타일과 스크립트

1. 내부 스타일 적용 <style>

가독성을 높이거나 시각적으로 화려하게 표현하려면 CSS(Cascading Style Sheet)를 이용.
CSS를 HTML 문서에 적용할 때 사용.
style 요소는 <head></head> 사이에만 올 수 있음.

<style type=”text/css”>
    CSS 구문
</style>

<tag style=”css 구문”></tag>

* CSS 코드를 외부 문서로 삽입하는 경우.
<link rel="stylesheet" type="text/css" href=”CSS 파일 경로와 파일명”>

2. 스크립트 삽입 <script>

script 요소는 head 요소와 body 요소에 여러 번 삽입 가능.

<script type=”text/javascript>
    스크립트 코드
</script>

* 스크립트 코드를 외부 문서로 삽입하는 경우.
<script type=”text/javascript” src=”스크립트 파일 경로와 파일명”></script>

그룹화 요소

1. 블록 그룹화 요소 <div>

div 요소는 분할, 나누기의 의미를 가짐.
그룹핑의 역할을 수행.
주로 블록 요소를 그룹화하기 위해 사용.
id, class 속성으로 해당 그룹의 의미를 부여할 수 있음.
레이아웃을 구현할 때 사용할 수 있고 논리적인 구조를 고려하여 서로 연관성 있는 컨텐츠를 그룹핑 하는 것이 좋음.

<div id=”coffee”>
    <div class=”origin”>
        블록 요소
    </div>
    <div class=”blending”>
        블록 요소
    </div>
</div>

2. 인라인 그룹화 요소 <span>

블록 요소를 그룹화 할때에 div를 사용했지만 인라인 요소를 그룹화 할때엔 span.
id, class 속성을 이용하여 그룹화한 요소에 의미를 부여.
span 요소가 인라인 요소이므로 블록 요소(p, ul 등등)를 포함할 수 없음.

<span>
    인라인 요소
</span>

링크와 이미지

1. 하이퍼링크 <a>

a 요소는 텍스트나 이미지 컨텐츠에 링크를 설정할 때 사용.
href, target, title 속성 등을 사용할 수 있음.
Transitional DTD 일 경우에만 target 속성을 지정 가능.

<a href=”파일명 또는 url” target=”_blank” title=”대체 설명”>텍스트 또는 이미지</a>

2. 이미지 <img>

웹 문서에 텍스트가 아닌 이미지 개체를 삽입할 때에 빈 요소인 <img /> 요소를 이용.
src 속성과 alt 속성은 필수.
이미지의 크기 정보를 지정할 때에는 width / height 속성을 사용.
alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용.

<img src=”파일 경로” width=”넓이” height=”높이” alt=”대체 텍스트” />

3. 이미지 맵 <map>, <area>

이미지 맵은 이미지의 여러 곳에 링크를 설정할 때 사용할 수 있음.

* 클라이언트 사이드 이미지 맵 (client-side image map)
   사용자가 이미지의 특정 영역을 클릭할 경우
   브라우저에서 클릭한 곳의 좌표를 기준으로 링크 위치를 판단하는 형태.

* 서버 사이드 이미지 맵 (server-side image map)
   사용자가 이미지의 특정 영역을 클릭하면
   서버에 있는 CGI 등의 프로그램을 통해 클릭한 곳의 좌표가 서버로 전송.

<img src=”URI” alt=”대체 텍스트” usemap=”이미지 맵 ID” />
<map id=”맵 요소 이름”>
    <area shape=”default | rect | circle | poly” codes=”좌표” href=”URI” alt=”대체 텍스트” />
</map>

목록 관련 요소

1. 비순서형 목록 <ul>

순서가 중요하지 않은 컨텐츠에 적절.

2. 순서형 목록 <ol>

순서가 중요한 컨텐츠에 적절.

* 중첩 형식의 하위 목록을 마크업 할 경우 ul요소나 ol요소의 자식요소로는 li 요소만 올 수 있음.

3. 정의형 목록 <dl>

용어 정의 리스트를 생성할 때 사용.
단순히 정의형 목록(용어 제목, 용어 설명 등)만이 아니라 주종 관계가 성립되는 컨텐츠에 광범위하게 사용.

<dl>
    <dt>용어 제목</dt>
    <dd>용어 설명</dd>
</dl>

텍스트 관련 요소

1. 강조 <strong>, <em>

strong 요소는 강한 강조를, em 요소는 강조의 의미를 갖음.
일부 음성 브라우저의 경우 강조 관련 요소로 마크업한 컨텐츠는 좀 더 크게 읽어주거나 두 번 반복해서 읽어주기도 함.

<p>텍스트<em>강조할 텍스트</em>텍스트</p>
<p>텍스트<strong>강조할 텍스트</strong>텍스트</p>

2. 인용문 <blockquote>, <q>

블록 단위의 인용문이나 문장 형태의 짧은 인용문의 경우.
blockquote 요소는 블록 요소만 포함.
q 요소는 인라인 요소와 텍스트를 포함.

<blockquote cite=”출처”>
    <p>블록 인용구</p>
</blockquote>

<p>텍스트 <q site=”출처”>인라인 인용구</q> 텍스트</p>

3. 축약어 및 두문자어 <abbr>, <acronym>

abbr 요소는 WWW(World Wide Web)처럼 스펠링을 하나씩 발음하는 경우나
Apartmention을 Apt.라고 줄여서 단어의 자음이나 모음만 맞추는 등 긴 단어를 단순하게 줄여 사용하는 것을 말함.

<p><abbr title=”World Wide Web Consortium”>W3C</abbr></p>

acronym 요소는 얼핏 abbr 요소와 비슷하지만,
여러 개의 단어들로 이루어진 문장 또는 복합 단어의 앞글자만 따서 줄여 사용하는 것을 말함.
Random Access Memory를 RAM 이라고 발음하는 경우에 해당.

<p><acronym title=”Rich Internet Application”>RIA</acronym></p>

4. 추가글 및 삭제글 <ins>, <del>

이거 쓰긴 쓰나..? 패스.

5. 첨자 <sup>, <sub>

X²  와 같이 윗첨자를 표현할 때엔 sup 요소 사용
H₂O 와 같이 아랫첨자로 표현할 때엔 sub 요소 사용

테이블 관련 요소

1. 테이블 요소 <table>, <tr>, <th>, <td>

제목 셀(th)은 내용 셀(td)과 달리 기본적으로 셀의 가로 가운데 정렬, 굵은 텍스트(bold) 효과가 적용됨.

2. 셀 병합 (colspan속성, rowspan 속성)

제목 셀(th)이나 내용 셀(td)은 colspan 속성이나 rowspan 속성을 이용하여 원하는 방향으로 셀을 병합할 수 있음.
열이 다른 셀을 병합할 때엔 colspan.
행이 다른 셀을 병합할 때엔 rowspan.

3. 테이블 제목 및 요약문 <caption>, <summary>

접근성 높은 테이블 데이터를 마크업할 때엔 테이블의 제목과 데이터의 내용을 요약해서 알려줄 수 있는
caption 요소와 summary 속성을 사용하는 것이 좋음.
caption 에는 테이블의 내용을 대표할 수 있는 제목.
summary 에는 테이블의 내용을 설명하고,
시각적으로 테이블 접근이 쉽지 않은 사용자가 테이블의 컨텐츠를 파악한 후 건너뛸 것인지 탐색할 것인지
선택할 수 있도록 하는 것이 좋음.

<table border=”1” summary=”테이블 내의 데이터 요약”>
    <caption>테이블 제목</caption>
    … 생략 …
</table>

4. 열 그룹화 요소 <colgroup>, <col>

테이블의 열끼리 논리적으로 그룹화 할 때 사용.
그룹화하는 열이 하나 이상일 경우 span 속성을 사용하여 열을 지정.
colgroup 요소는 논리적인 그룹화를 위해 사용하고 col 요소는 스타일 지정을 목적으로 사용하는 점이 다름.

5. 행 그룹화 요소 <thead>, <tfoot>, <tbody>

테이블의 행을 논리적으로 구성할 때 헤더 행은 thead 요소, 행은 tfoot 요소, 본문 행은 tbody 요소를 사용.
thead와 tfoot 요소는 테이블에서 한번만 사용할 수 있음.
선언 순서는 thead, tfoot, tbody 순이고 colgroup 요소나 col 요소의 다음에 지정.
제목 행으로 지정된 thead 요소에는 반드시 제목 셀(th)을 이용해서 테이블의 헤더 영역임을 지정해야 함.

thead, tfoot 요소의 장점

테이블에 데이터가 많을 때에 인쇄할 때 여러 장에 걸쳐 출력되는 경우 테이블의 thead, tfoot 정보를 인쇄할 수 있음.
시각장애인의 경우 thead 요소 다음에 tfoot 요소의 정보가 위치하여
순차적으로 컨텐츠에 접근할 때에 통계 등의 테이블 종합정보를 모든 셀을 다 읽지 않아도 먼저 알 수 있음.

6. 제목 셀과 내용 셀의 연관성 (scope, id, headers 속성)

시각장애가 있거나 음성 브라우저를 사용하는 경우에는 왼쪽에서 오른쪽으로 셀의 내용만 듣고 판단하기 때문에
열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않음.
그래서 테이블의 열과 행의 제목 셀에 scope 속성을 지정하고 해당 값으로 col, row, rowgroup, colgroup을 할당하면
해당 셀이 열의 제목인지 행의 제목인지 알 수 있음.

scope 의 경우 주로 병합되지 않은 단순 형태의 테이블에 사용.
복잡한 테이블의 경우 th 요소는 id 속성으로 네이밍을 하고 연관성 있는 내용 셀에 headers 속성과 id값을 연결해줌.

* FireFox 브라우저의 부가기능 중 Juicy Studio Accessibility Toolbar 라는게 있는데
   쉽게 알아볼 수 있도록 제공해 줌.

https://addons.mozilla.org/ko/firefox/addon/juicy-studio-accessibility-too/

문서 정보 및 문서 제목

1. 문서 정보와 문자 코드 세트 (meta)

웹 브라우저에서 한글이나 영어와 같은 문자를 처리하기 위해 사용할 문자 코드 세트(인코딩) 선언 값과
저작자, 키워드, 요약문, 만기일 등에 관한 문서 정보의 경우 빈 요소인 meta 요소를 이용하여 지정할 수 있음.

* 문자 코드 세트 지정하기
   웹 페이지를 제작할 때 사용한 문자가 깨지지 않고 인코딩 되도록 하려면 meta 요소를 이용
   다국어 인코딩의 경우 utf-8 을 지정할 수 있고 한글은 euc-kr 을 지정
   요즘은 다들 utf-8 로 지정하는 듯

   <meta http-equive=”content-type” content=”text/html;charset=utf-8” />

* 키워드 지정하기
   meta 요소를 이용하면 검색 키워드를 지정할 수 있음
   검색 사이트에서 상위에 노출되는 효과를 얻을 수 있음

   <meta name=”keywords” content"=”웹 접근성, 웹 표준, xhtml 요소, 키워드 지정하기” />

* 다양한 문서 정보 지정하기
   화면에 보이진 않지만 웹페이지의 다양한 정보를 지정할 때에도 meta 요소를 사용할 수 있음
   웹페이지의 요약정보, 제작자 정보, 저작권 정보, 검색 로봇 제어 여부 등..

   <meta name=”subject” content=”문서 제목 정보” />
   <meta name=”description” content=”웹 페이지 요약 정보” />
   <meta name=”author” content=”제작자 정보” />
   <meta name=”robots” content=”검색 로봇 제어” />
   <meta name=”copyright” content=”저작권 정보” />

2. 문서 제목 (title)

웹 문서의 제목을 선언할 때 사용하는 요소.
문서마다 유일한 내용으로 구성해야 함.
title 요소는 즐겨찾기 및 북마크에 해당 웹 문서를 추가 할 경우 북마크 이름으로도 활용.

<title>문서 제목</title>

문단 관련 요소

1. 제목 <h1> ~ <h6>

제목 요소는 h1, h2, h3, h4, h5, h6의 여섯 가지를 사용할 수 있음.
잘 구성된 헤딩은 기기에서의 정보 인식성을 높일 수 있음.
헤딩을 이용하여 제목을 작성할 때는 h1 다음에 h2, h3 순으로 나와야 계층구조가 어긋나지 않음.

2. 단락 <p>

텍스트를 단락으로 정의할 때 사용.
단락 요소 안에는 a, img 등 인라인 요소와 텍스트만 포함할 수 있고 블록 요소는 사용할 수 없음.
단락 안에서 강제로 줄바꿈 해야 하는 경우에는 <br> 요소를 사용할 수 있지만 남용은 조심.

3. 줄 바꿈 <br>

단락에서 텍스트를 강제로 줄바꿈할 때에 “line break” 의미인 <br> 요소를 사용함.
<br> 요소는 빈 요소(empty element)로 <br /> 와 같이 사용함.

4. 주소 <address>

웹 문서의 아래쪽에 연락처(이메일 주소 포함) 및 제작자, 저작권(copyright) 정보 등을 표시할 수 있음.
단순한 집 주소의 의미가 아니라 웹 사이트 작성자 정보로써 문서의 공개일, 갱신일, 연락처(이메일 주소)의 정보를
사용자에게 제공하려고 할 때 사용하는 요소.
address 요소는 기울임꼴로 화면에 출력.

5. 구분선 <hr>

hr 요소는 수평선으로 표현되어 구분선 역할을 하고 빈 요소이며 <hr />로 종료 태그 없이 사용.
컨텐츠 전후의 내용을 구분할 수 있도록 선으로 나타내는 것.

1. 노드 프로퍼티

- nodeName
   nodeName 프로퍼티는 특정 노드의 이름을 포함한 문자열을 반환한다.

   name = node.nodeName

   특정 노드가 요소 노드이면 nodeName 프로퍼티는 그 요소의 이름을 반환한다.
   이 경우 tagName 프로퍼티와 같은 값을 가진다.
   텍스트 노드이면 nodeName 프로퍼티는 “#text” 라는 문자열을 반환한다.
   읽기 전용이고 값을 바꾸거나 변경할 수 없다.

- nodeType
   nodeType 프로퍼티는 특정 노드의 형식을 지정하는 정수 값을 반환한다.

   integer = node.nodeType

   경우에 따라 열 두가지의 값이 반환된다.
   각 숫자는 nodeType에 해당하는 노드의 종류를 알려준다.

1. ELEMENT_NODE
2. ATTRIBUTE_NODE
3. TEXT_NODE
4. CDATA_SECTION_NODE
5. ENTITY_REFERENCE_NODE
6. ENTITY_NODE
7. PROCESSING_INSTRUCTION_NODE
8. COMMENT_NODE
9. DOCUMENT_NODE
10. DOCUMENT_TYPE_NODE
11. DOCUMENT_FRAGMENT_NODE
12. NOTATION_NODE

   웹 문서 내에 요소들과 속성 그리고 텍스트 노드를 찾아내는 것이 가장 자주 사용하는 방법이기 때문에
   12가지 중에 처음 세 가지는 매우 중요하다.
   nodeType 프로퍼티도 읽기 전용.

- noteValue
   nodeValue 프로퍼티는 특정 노드의 값을 문자열로 반환한다.

   value = node.nodeValue

   만약 노드의 종류가 속성 노드이면 속성 값을,
   텍스트 노드이면 텍스트 내용을,
   요소 노드이면 빈(null) 값을 반환한다.

   nodeValue 프로퍼티는 읽고 쓰기가 가능하다.
   빈 값이면 값을 설정 할 수 없다.

   nodeValue 프로퍼티를 이용하는 것은 텍스트 노드 값을 설정하는데 가장 간단한 방법.

2. 노드 내부 구조 보기

- childNodes
   childNodes 프로퍼티는 특정 요소 노드의 자식 노드를 배열 값으로 반환.

   nodeList = node.childNodes

   nodeList에는 node의  자식 노드들이 배열로 저장되어 있는데, nodeList의 각 값들은 객체다.
   일반적으로 nodeType, nodeName, nodeValue 같은 노드 프로퍼티로 구성되어있다.
   텍스트 노드와 속성 노드는 자식 노드가 없다. 이런 경우 childNodes는  빈 값을 포함한 배열이 반환된다.
   노드 내에 자식 노드가 있는지 확인하려면 hasChildNodes 메소드를 사용하면 된다.

- firstChild
   firstChild 프로퍼티는 지정 요소 노드의 첫 번째 자식 노드를 반환한다. 읽기전용.

   reference = node.firstChild

- lastChild
   lastChild 프로퍼티는 지정 요소 노드의 마지막 자식 노드를 반환.

   reference = node.lastChild

- nextSibling
   nextSibling 프로퍼티는 지정 노드의 다음 노드를 반환한다. 읽기 전용.

   reference = node.nextSibling

   지정 노드 뒤에 따라오는 노드가 없으면 nextSibling 프로퍼티는 빈 값을 반환한다.

- parentNode
   parentNode 프로퍼티는 지정 노드의 부모 노드를 반환. 읽기 전용.

   reference = node.parentNode

   자식 노드를 가질 수 있는 노드는 요소 노드밖에 없기 때문에 반환되는 노드는 항상 요소 노드이다.
   예외적인 경우는 부모가 없는 최상위 노드인 document 밖에 없다.
   이 경우 parentNode 는 빈 값을 반환한다.

- previousSibling
   previousSibling 프로퍼티는 지정 노드의 앞의 노드를 반환.

   reference = node.previousSibling

   지정 노드 앞의 노드가 없다면 previousSibling 프로퍼티는 빈 값을 반환.
   역시 읽기 전용.

1. 노드 만들기

- createElement
   createElement 메소드는 특정 태그 내에 포함된 새로운 요소 노드를 만들 때 사용. 새로 만들어진 요소를 반환.

    reference = document.createElement( element )

    이 메소드는 만들려고 하는 태그 명을 인수로 가진다.

    var para = document.createElement( “p” );

    일단 createElement로 만들어진 요소는 바로 문서 내에 추가할 수 있는 것이 아니다.
    이것을 실제로 추가하려면 appendChild 나 insertBefore 메소드 혹은 replaceChild 등을 사용한다.

    var para = document.createElement( “p” );
    document.body.appendChild( para );

- createTextNode
   createTextNode 메소드는 특정 텍스트를 포함하는 새 텍스트 노드를 만든다. 새로 만들어진 텍스트 노드를 반환.

    reference = document.createTextNode( text )

    이 메소드는 만들어질 텍스트 문자열을 인수로 가진다.

    var msg = document.createTextNode( “Hello, JS World” );

    createTextNode 도 createElement 와 마찬가지로 바로 문서 내에 추가할 수 있는 것이 아니다.
    실제로 추가하려면 마찬가지의 방법을 사용한다.

2. 노드 복사

- cloneNode
   cloneNode 메소드는 특정 노드를 복사할 수 있다. 새로 복사된 노드를 반환해 준다.

   reference = node.cloneNode( deep )

   이 메소드는 참이냐 거짓이냐 하는 불린 값을 인수로 가진다.
   새로 만들어진 노드가 복사한 노드와 같은 형태를 띠고 있는지 여부를 확인하는 것이다.

   reference = node.cloneNode( true )
   reference = node.cloneNode( false )

   인수의 값이 참이면 새로 만든 노드는 복사한 노드와 같은 자식을 갖는 것이다.
   인수의 값이 거짓이면 자식 노드가 없다.
   노드가 요소 노드인 경우 원래 요소 내 모든 텍스트 노드가 복사되지 않았다는 것으로 속성만 복사된 것이다.

3. 노드 추가

- appendChild
   appendChild 메소드는 요소 노드에 새 자식 노드를 추가한다.

   reference = element.appendChild( newChild )

   새로운 자식 노드는 추가된 요소의 제일 마지막 자식 요소가 된다. 새로 추가된 노드를 반환하게 된다.

   var para = document.createElement( “p” );
   var msg = document.createTextNode( “Hello world” );
   para.appendChild( msg );

   새로 만든 요소를 작업하는 것처럼 appendChild는 문서 내에 있는 요소를 옮기는 데 사용할 수 있다.

- insertBefore
   insertBefore 메소드는 특정 요소의 자식 노드 앞에 새로운 노드를 추가하는 데 주로 사용한다.

   reference = element.insertBefore( newNode, targetNode )

   새 노드인 newNode를 targetNode라는 노드 앞에 추가하게 된다.
   targetNode는 요소의 자식 노드여야 한다.
   targetNode가 정의되어 있지 않으면 newNode는 요소의 자식 노드 끝에 추가된다.
   이 경우, appendChild와 똑같은 결과를 수행한다.

   insertBefore 메소드는 문서 구조에 새 노드를 추가하기 위해 createElement와 createTextNode와 자주 사용된다.
   추가하는 노드가 자식 노드를 가지고 있으면 이 자식 노드들도 targetNode의 앞에 함께 추가된다.

   insertBefore는 새로 만든 노드를 추가하는 기능뿐 아니라 기존 노드를 문서 내에서 이동하는 기능도 수행한다.

4. 노드 삭제

- removeChild
   removeChild는 특정 부모 노드에서 자식 노드를 제거하는 메소드.

   reference = element.removeChild( node )

   삭제한 노드를 반환해 준다.
   또한 removeChild 를 통해 제거하면 노드에 포함된 모든 자식 노드도 함께 제거된다.

5. 노드 바꾸기

- replaceChild
   replaceChild 메소드는 특정 부모 노드 아래 자식 노드를 다른 노드로 교체할 때 사용한다.
   이미 문서 구조 내에 있는 노드에만 동작한다.

   reference = element.replaceChild( newChild, oldchild )

   여기서 oldChild 노드는 요소의 자식 노드여야 한다.
   이 메소드는 변경된 노드를 반환해준다.

   새 노드가 자식 노드를 가지고 있으면 모두 함께 추가된다.

6. 노드 값 변경

- setAttribute
   setAttribute 메소드를 이용하면 특정 요소 노드의 기존 속성 값을 바꾸거나 새롭게 추가할 수 있다.

   element.setAttribute( attributeName, attributeValue )

   속성 이름과 속성 값은 문자열로 적으면 된다.
   기존 요소에 속성이 이미 존재하면 새로운 값으로 변경되고, 없으면 새로운 속성이 추가된다.

   문서 구조 안에 속해 있지 않은 요소에도 속성 노드를 추가할 수 있지만 요소 노드에만 사용할 수 있다.
   setAttribute 는 속성 값을 얻어오는 getAttribute 와 함께 쓰인다.

7. 노드 찾기

- getAttribute
   getAttribute 메소드는 지정 요소의 속성 노드의 이름에 해당하는 값을 찾아서 반환한다.

   attributeValue = element.getAttribute( attributeName )

   속성 이름은 문자열로 지정할 수 있고 속성 값 역시 문자열로 반환한다.
   지정한 이름에 해당하는 속성 노드가 없을 경우, 빈 문자열이 반환된다.

- getElementById
   getElementById 는 특정 id 속성을 가진 요소를 찾는데 사용하는 가장 일반적인 메소드.

   element = document.getElementById( ID )

   특정 id의 요소 노드를 반환한다.
   요소가 없으면 빈 값(null)을 반환한다.
   이미 만들어진 문서 객체만 사용할 수 있다.

   getElementById 를 통해 반환된 요소 노드는 객체이며,
   nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 모두 가지고 있다.

   문서 내에서 id는 여러 개가 중복되어 선언되면 안되고 오로지 한 개만 있어야 한다.
   만약 중복되는 여러 개의 id가 있으면 예측할 수 없는 방식으로 동작한다.  

- getElementsByTagName
   getElementsByTagName 메소드는 특정 태그 명에 해당하는 모든 요소들을 찾는다.

   elements = document.getElementsByTagName( tagName )

   이 메소드는 찾아낸 요소들을 목록 형태로 반환한다. 이 목록들을 배열로 사용할 수 있다.
   배열 내에 있는 각 요소들은 객체이고,
   nodeName, nodeType, parentNode, childNodes 같은 프로퍼티를 이용해 사용할 수 있다.

- hasChildNodes
   hasChildNodes 는 특정 요소에 자식 노드가 있는지 여부를 확인하는데 사용하는 메소드.

   booleanValue = element.hasChildNodes

   결과는 true 또는 false 로 전달된다.
   각 요소의 자식 노드가 있는지 여부만 확인해준다. 그 자체를 반환해주지는 않는다.

XHTML의 서식

xhtml은 html을 xml로 재정의한 언어이기 때문에 요소와 속성에는 차이가 없다.
하지만 xml 방식의 엄격한 규칙을 적용하기 때문에 문법상 html과 xhtml은 몇가지 차이점이 있다.

* 요소 사용 시 종료 태그 생략 불가능
   <p><img src=”image.jpg” alt=”그림”>
   <p><img src=”image.jpg” alt=”그림”></p>

* 요소명과 속성명에 소문자 사용
   <P><IMG SRC=”image.jpg” ALT=”그림”></P>
   <p><img src=”image.jpg” alt=”그림”></p>

* 빈 요소 사용시 <요소명 /> 형식으로 기술
   <p><img src=”image.jpg” alt=”그림” /></p>

* 속성에 속성값 생략 불가능
   <select selected> … </select>
   <select selected=”selected”> … </select>

* 잘못된 중첩 사용 불가능
   <p><span><em> … </span></em></p> // 순서 바뀜
   <p><span><em> … </em></span></p> // 올바른 순서

* 모든 속성값에 인용부호 사용
   <img src=image.jpg alt=그림 />
   <img src=”image.jpg” alt=”그림” />

* <, >, &을 &lt;, &gt;, &amp로 변환하여 사용
   <h1>웹 표준 & 웹 접근성</h1>
   <h1>웹 표준 &amp; 웹 접근성</h1>

* 주석을 바르게 사용하고 그 안에 --(더블대시) 사용불가
   <!-- 주석 삽입 -->
   <!---- -- 잘못된 사용 방법. 더블대시를 연결하여 사용하면 안됨. -- ---->
   <!-- ***** 유효한 사용 방법 ***** -->

XHTML 구성 요소

* 태그
   태그는 “<” 와 “>” 로 묶어서 표현하는 명령어.
   기본 형식은 <tag> ~ </tag> 이고 일부의 경우에는 <tag /> 형태로 사용함.

* 요소 (element)
   시작 태그부터 종료 태그까지 모든 명령어를 “요소(element)”라고 함.
   <h1> 웹 접근성과 XHTL </h1>
   시작태그      텍스트      종료 태그

* 속성 (attribute)
   시작 태그는 태그의 의미와 필요에 따라 개별적인 옵션을 가질 수 있는데 “속성(attribute)” 라고 함.

* 값 (value)
   각 속성이 가지는 값.
   <p id=”note” class=”box” title=”대체설명”>단락 내에 여러 개의 속성을 지정한 경우</p>

XHTML 문서의 기본 구조

* DTD 선언
   웹페이지를 제작할 때 선언하는 문서형 정의.
   - 엄격형 (Strict)
   - 호환형 (Transitional)
   - 프레임형 (Frameset)

* <html> ~ </html>
   웹 페이지의 시작과 종료를 의미.

* <head> ~ </head>
   html 문서는 머리부분과 본문 부분으로 나눌 수 있는데 머리영역을 나타내는 태그.
   문서의 일반적인 정보와 title 등의 제목을 선언.

* <body> ~ </body>
   html 문서의 본문 부분에 해당.
   화면에 나타나는 모든 부분은 <body> 태그와 </body> 태그 사이에 선언해야 함.

블록 요소와 인라인 요소

* 블록 요소 (block element)
   블록 요소는 제목(<h1>~<h6>), 문단(<p>), 작성자 정보(<address>) 등이 있음.
   대부분의 블록 요소는 인라인 요소와 텍스트를 포함 할 수 있고 일부는 다른 블록을 포함 할 수 있음.

* 인라인 요소 (inline element)
   링크(<a>), 이미지(<img>), 강조(<em><strong>) 등이 해당되는 요소.
   텍스트도 인라인 요소로 취급.
   인라인 요소 안에는 대부분 인라인 요소와 텍스트를 포함할 수 있지만 블록 요소는 포함할 수 없음.

문서형 정의 및 선언, 네임 스페이스, 휴먼 랭귀지

1. 문서형 정의 및 선언(DTD)
   마크업 문서를 작성하려면 문서의 첫머리에 문서형 정의(DTD: Document Type Definition)를 선언해야 함.
   문서형 정의의 종류에 따라 특정 요소의 사용이 제한되거나 규칙이 다르게 적용되고
   웹브라우저가 문서를 렌더링하는 기준이 됨.
   생략 할 경우 브라우저마다 다르게 보이는 원인이 될 수 있음.

  
2. 네임 스페이스
   xhtml은 html을 xml로 재정의한 언어이기 때문에
   xml이 가지는 확장성을 이용하여 xml 형식의 문서표준을 네임스페이스(xmlns)를 이용하여 지원할 수 있음.
   xhtml 은 <html xmlns=”http://www.w3.org/1999/xhtml”> 을 네임 스페이스 값으로 갖는다.
   예를 들어 MathML이라는 수학식 기호를 표현하기 위한 언어를 삽입하려면
   네임스페이스에 http://www.w3.org/TR/2000/REC-xhtml1-20000126 을 지정하면 됨.

3. 휴먼 랭귀지
   웹 브라우저나 음성 브라우저 같은 User Agents가 웹 문서에 쓰여진 언어를
   올바로 해석할 수 있도록 문서에 사용언어를 선언할 수 있는데
   대표적 방법에는 휴먼 랭귀지(human language) 명시와 meta 요소를 이용한 선언이 있다.
  
   <html xml:lang=”ko” lang=”ko”>
   <p>사과는 영어로 <span lang=”en”>apple</span>, 
   독일어로 <span lang=”de”>apfel</span>이라고 합니다.</p>

   영문 단어의 경우 영어나 프랑스어, 스페인어로 접근하면 읽는 방식이 달라지게 됨.
   스크린 리더가 어떤 언어로 읽을지 선택할 수 있도록 설정해 줌.

   언어를 설정하는 방식은
   html 에서는 lang 속성을 사용하고
   xhtml 1.0 에서는 text/html 의 경우에 lang 과 xml:lang 속성을 사용하고
   xhtml 1.1 에서는 xml:lang 속성만 사용함.