1. 문서 정보와 문자 코드 세트(meta)
1-1. 문자 코드 세트 지정하기
- 웹 브라우저에서 웹 페이지를 제작할 때 사용한 문자가 깨지지 않고 인코딩되도록 하려면
meta요소를 이용하여 문자 코드 세트를 지정해야 합니다.
- 이때 다국어 인코딩의 경우 utf-8을 지정할 수 있으며, 한글은 euc-kr을 선언합니다.
1-2. 키워드 지정하기
- 웹 페이지 홍보의 수단으로 meta 요소를 이용하여 검색 키워드를 지정할 수 있습니다.
- 검색 키워드를 웹 페이지에 지정하면 검색할 때 웹 사이트가 상위에 노출되는 효과를 얻을 수 있다.
- meta요소를 이용하여 검색 키워드를 지정할 때는 검색 키워드를 콤마(,)로 구분하여 선언합니다.
1-3. 다양한 문서 정보 저장하기
- 문자 코드 세트와 키워드 이외에도 subject를 이용하여 문서 제목 정보를 제공하고,
description값으로 웹 페이지의 요약 정보, 제작자 정보, 저작권 정보 및 검색 로봇 제어 여부 등의
문서 정보를 지정할 수 있습니다.
2. 문서의 제목(<title>)
- title 요소는 웹문서의 제목을 선언할 때 사용하는 요소로, 문서마다 유일한 내용으로
구성해야 합니다.
- 시각장애인의 경우에는 음성 브라우저를 이용하여 콘텐츠를 탐색하기 때문에 title 요소는
문서를 구별할 수 있는 첫 번째 관문이라고 할 수 있습니다.
- 또한 title 요소는 즐겨찾기 및 북마크에 해당 웹 문서를 추가할 경우에 사용되는 북마크 이름으로도
활용되므로 같은 title을 가진 웹 문서가 여러 개 있어서는 안됩니다.
- title의 선언 형식은 다음과 같습니다.
3. 제목 <h1> ~ <h6>
- 제목을 작성하고자 할 때는 <h1>과 같은 헤딩 요소를 이용합니다.
- 제목은 대제목, 중제목, 소제목 등의 계층 구조를 가지게 되는데 <h1> 다음에 바로 <h3>이 나오지
않게 주의해야만 논리적인 웹 문서를 제작할 수 있습니다.
- 헤딩의 선언 형식은 다음과 같습니다.
4. 문단 <p>
- p 요소는 텍스트를 문다으로 정의할 때 사용합니다.
- 문단 요소 안에는 <a>, <img> 등과 같은 인라인 요소와 텍스트만 포함할 수 있으며
블록 요소는 사용할 수 없습니다.
- 문단 안에서 강제로 줄바꿈해야 하는 경우가 있을 때는 <br/> 요소를 사용할 수 있지만
시각적 효과 등을 위해 함부로 사용하지 않아야합니다.
- p요소의 선언 형식은 다음과 같습니다.
5. 줄바꿈 <br>
- 문단에서 텍스트를 강제로 줄바꿈 할 때는 line break의 의미인 br 요소를 사용합니다.
- br 요소는 빈 요소로 사용 형식은 다음과 같습니다.
6. 주소 <address>
- address 요소를 이용하여 웹 문서의 아래쪽에 연락처 및 제작자, 저작권 정보 등을 표시할 수 있습니다.
- address 안에는 인라인 요소와 텍스트를 포함할 수 있지만, 블록 요소는 포함할 수 없습니다.
- address 요소의 사용 형식은 다음과 같습니다.
7. 구분선 <hr/>
- hr 요소는 수평선으로 표현되어 구분선 역활을 하고, 빈 요소이며,
<hr />로 종료 태그 없이 사용합니다.
- 논리적인 의미의 구분이라기보다는 콘텐츠의 전후의 내용을 구분할 수 있도록 선으로 나타내는 것입니다.
- hr 요소는 텍스트 브라우저나 CSS가 제공되지 않는 환경에서 콘텐츠의 구조적 구분을 표현할 수 있기 때문에
사용자에게 유용합니다.
- hr 요소는 빈 요소로 사용 형식은 다음과 같습니다.
8. 하이퍼링크 <a>
- a 요소는 텍스트나 이미지 콘텐츠에 링크를 설정할 때 사용합니다.
- 사용 가능한 속성에는 href 속성, target 속성,title 속성 등이 있으며,
Transitional DTD일 경우에만 target 속성을 지정할 수 있습니다.
- a 요소의 사용 형식은 다음과 같습니다.
9. 이미지 <img/>
- 웹 문서에 텍스트가 아닌 이미지 개체를 삽입할 때는 빈 요소인 img요소를 이용해야 하며
img 요소의 경우 scr 속성과 alt 속성은 필수 속성입니다.
- 특히 alt 속성은 이미지가 보이지 않는 환경에서 대체 텍스트를 제공하기 위한 목적으로 사용하며
이미지와 동등한 정보를 제공해야 합니다.
- 만약 alt 속성으로 대체 텍스트를 지정하기 어려운 경우에는 longdesc 속성을 이용하여 이미지에 대한
대체 정보로 연결할 수 있습니다.
- img 요소는 빈 요소로 사용 형식은 다음과 같습니다.
10. 비순서형 목록 <ul>
- ul 요소는 순서가 중요하지 않은 콘텐츠에 사용하기에 적절합니다.
- ul 요소의 사용 형식은 다음과 같습니다.
11. 순서형 목록 <ol>
- ol 요소는 순서가 중요한 콘텐츠에 사용하기에 적절합니다.
- ol 요소의 사용 형식은 다음과 같습니다.
12. 정의형 목록 <dl>
- dl 요소는 Definition List의 약자로, 용어 정의 리스트를 생성할 때 사용합니다.
- dl 요소의 경우 단순히 정의형 목록만이 아니라 주종 관계가 성립되는 콘텐츠에 광범위하게
사용할 수 있습니다.
- dl 요소의 사용 형식은 다음과 같습니다.
13. 강조 <strong> & <em>
- 문단의 내용 중에서 강조하려는 콘텐츠를 마크업할 때는 strong와 em을 사용할 수 있다.
- strong은 강한 강조를, em은 강조의 의미를 갖습니다.
- 일부 음성 브라우저의 경우 강조 관련 요소로 마크업한 콘텐츠는 좀 더 크게 읽어 주거나
두번 반복하여 읽어 주기도 합니다.
- 강조 관련 요소의 사용 형식은 다음과 같습니다.
14. 인용문 <blockquote> & <q>
- 블록 단위의 인용문이나 문장 형태의 짧은 인용문의 경우 blockquote와 q 요소를 이용할 수 있습니다.
- blockquote 요소는 블록 요소만 포함할 수 있고, q는 인라인 요소와 텍스트를 포함할 수 있습니다.
- 인용문의 경우 출처를 명시하려고 할 때 cite 속성으로 인용한 곳을 지정해야만 합니다.
15. 축약어 및 두문자어 <abbr> & <acronym>
- abbr과 acronym 요소는 축약어(abbreviation) 및 두문자어(initialetter)를 마크업할 때 사용하는 요소입니다.
- 두문자어인 acronym 요소는 축약어인 abbr 요소와 비슷하지만, 여러개의 단어들로 이루어진 문장 또는
복합 단어의 앞글자만 따서 줄여 사용하는 것을 말합니다.
- 축약어 및 두문자어 관련 요소의 사용 형식은 다음과 같습니다.
16. 추가글 및 삭제글 <ins> & <del>
- 추가글이나 삭제글의 변경된 콘텐츠를 마크업할 때 사용하는 요소로 ins요소와 del요소를 사용할 수 있습니다.
- ins와 del 요소를 사용할 수 있습니다.
- 추가글 및 삭제글 관련 요소의 사용 형식은 다음과 같습니다.
17. 첨자 <sup> & <sub>
- 윗첨자나 아랫첨자 형식으로 콘텐츠를 표현해야 할 경우 sup요소와 sub 요소를 사용할 수 있습니다.
- 첨자 관련 요소의 사용 형식은 다음과 같습니다.
18. 테이블 요소 <table>,<tr>,<th>,<td>
- 2차원의 격자 형태로 구성된 표를 생성할 때는 XHTML의 테이블 관력 요소를 이용할 수 있습니다.
- 테이블(table)은 크게 열(column)과 행(row), 그리고 셀(cell)로 구성되며, 기본적인 형식은 다음과 같습니다.
19. 셀병합 (colspan, rowspan 속성)
- 제목 셀(th)이나 내용 셀(td)은 colspan 속성이나 rowspan을 이용하여 원하는 방향으로 셀을
병합 할 수 있습니다.
- 열이 서로 다른 셀을 병합할 때는 colspan 속성을, 행이 서로 다른 셀을 병합할 때는 rowspan을 사용하며
형식은 다음과 같습니다.
20. 테이블 제목 및 요약문 <caption>요소와 summary속성
- 접근성 높은 테이블 데이터를 마크업할 때 테이블의 제목 및 테이블 데이터의 내용을 요약해서
알려줄 수 있는 caption요소와 summary 속성을 사용하는 것이 좋습니다.
- caption요소에는 테이블의 내용을 대표할 수 있는 제목을 삽입하고 summary속성에는 간단한 제목보다
테이블의 내용이 무엇인지를 설명해서 시각적으로 테이블 접근이 쉽지 않은 사용자가 summary의
내용을 듣고 해당 테이블의 콘텐츠를 파악한 후 건너뛸 것인지, 탐색할 것인지를 선택할 수 있도록 해야 합니다.
- cation 요소와 summary 속성의 사용 형식은 다음과 같습니다.
21. 제목 셀과 내용 셀의 연관성(scope, id, headers 속성)
- 시각장애가 있는 사용자나 음성 브라우저의 경우 테이블을 탐색할 때 왼쪽에서 오른쪽으로 셀의 내용만 듣고
판단하기 때문에 열과 행을 파악하고 내용 셀의 연관성을 유추하는 것이 쉽지 않습니다.
- 이러한 경우에는 테이블의 열과 행의 제목 셀에 해당하는 th요소에 scope 속성을 사용하는 것을 권장합니다.
- th 요소에 scope 속성을 지정하고 해당 값으로 col이나 row,rowgroup,colgroup를 할당하면 해당 셀이
열의 제목인지, 행의 제목인지 등을 알 수 있습니다.
- 좀 더 복잡하게 병합된 셀의 경우, th 요소는 id 속성으로 네이밍을 할당하고 해당 제목 셀과 연관성이 있는
내용 셀에 headers 속성과 id 값을 연결하여 제목 셀과 내용 셀의 관계를 지정할 수 있습니다.
-- scope 속성의 사용형식
-- id, headers 속성의 사용 형식
22. 열 그룹 요소 <colgroup>, <col>
- 테이블의 열끼리 논리적으로 그룹화하려면 colgroup, col 요소를 사용할 수 있습니다.
이때 그룹화하는 열이 하나 이상일 경우 span속성을 사용하여 그룹화하려는 열을 지정합니다.
- colgroup은 논리적인 그룹화를 위해 사용하는 요소이고, col은 스타일을 지정할 목적으로 사용한다는 점이
다릅니다.
- colgroup 및 col 요소의 사용 형식은 다음과 같습니다.
23. 행 그룹 요소 <thead>, <tfoot>, <tbody>
- 테이블의 행을 논리적으로 구성할 때 헤더 행은 thead 요소로부터, 행은 tfoot 요소로, 본문 행은 tbody를
사용할 수 있습니다.
- 행 그룹화 요소의 선언 순서는 thead, tfoot, tbody 순이고 thead요소와 tfoot요소는 테이블에서
한번만 사용할 수 있습니다.
- 제목 행으로 지정된 thead 요소에는 반드시 제목 셀(th 요소)을 이용해서 해당 영역이 테이블의 헤더 영역임을
지정해야만 합니다.
- thead, tfoot, tbody 요소의 사용 형식은 다음과 같습니다.
24. 폼 <form>
- 폼 요소는 웹 문서가 서로 상호작용을 할 수 있도록 하는 역활을 담당합니다.
- 사용자가 자료를 검색하기 위한 검색어 입력 상자나 여러 가지 항목에서 원하는 값을 선택할 수 있도록
제공하는 라디오 버튼 또는 체크박스, 목록 형태로 펼쳐지는 목록 상자(combo box), 서버로 자료를 전송하기
위한 전송 버튼 등이 이에 해당됩니다.
- form 요소의 사용 형식은 다음과 같습니다.
25. 폼 요소 그룹화 및 제목 <fieldset>, <legend>
- 여러 개의 폼 요소를 그룹화하여 좀 더 구조적으로 만들려면 fieldset요소를 사용해야 합니다.
- legend 요소로 fieldset의 컨트롤들이 어떠한 성격의 콘텐츠인지 제목 형식으로 알려줄 수 있으며,
fieldset 요소의 바로 뒤에 한 번만 작성할 수 있습니다.
- fieldset과 legend 요소의 사용 형식은 다음과 같습니다.
26. 레이블 <label>
- 폼을 구조화하고 접근성을 높일 수 있는 요소 중에는 label이 있습니다.
- label 요소는 각 폼 컨트롤의 연관 관계와 설명을 추가하는 역활을 담당합니다.
- 웹 표준을 지원하는 대부부의 최신 브라우저의 경우 label만 선택해도 폼 컨트롤을 선택할 수 있으며
음성 브라우저의 폼 컨트롤이 label과 인접하여 있지 않는 경우에도 인식할 수 있도록 지원합니다.
- 접근성을 높이기 위해 모든 폼 컨트롤 등에 label 요소를 사용하는 것이 좋습니다.
27. 명시적 레이블
28. 암묵적인 레이블
29. <input> 요소
- 폼 요소 안에 한 줄 글상자, 라디오 버튼, 체크 박스 등의 포 컨트롤을 생성할 때는 input 요소를 사용합니다.
- input 요소의 경우 type 속성값에 따라 폼의 종류가 결정되며, 컨트롤의 종류는 다음과 값습니다.
- type = "컨트롤값"
- type 속성에 사용할 수 있는 컨트롤 값은 text, password, radio, checkbox, file, image, submit, reset, button
hidden의 10가지 값이 있습니다.
- input 요소의 사용 형식은 다음과 같습니다.
30. 목록상자 <select>, <option>
- select와 option 요소를 이용하여 목록 상자를 생성할 수 있습니다.
- 목록 상자는 드룹다운 메뉴와 리스트 박스로 나눌 수 있고, size 속성으로 목록 상자의 형태를 정할 수 있습니다.
- select, option 요소의 사용 형식은 다음과 같습니다.
31. 여러 줄 글상자 <textarea>
- 여러 줄로 된 텍스트를 입력받을 때는 textarea 요소를 이용합니다.
- input 요소를 이용한 한 줄 글상자와 달리 textarea 요소 안에서 입력한 텍스트의 내용이 임이의 줄로
바뀝니다. 이때 입력받을 수 있는 텍스트 수는 제한이 없습니다.
- textarea 요소의 사용 형식은 다음과 같습니다.
32. 버튼 요소 <button>
- button 요소를 이용하여 생성할 수 있는 경우는 input 요소의 submit, reset, button 등의 type과 같지만
좀 더 유연한 디자인이 가능하다는 장점이 있습니다.
- button 요소의 사용 형식은 다음과 같습니다.
33. 인라인 프레임 <iframe>
- 인라인 프레임을 이용하여 콘텐츠를 삽입할 경우에는 iframe 요소를 사용합니다.
- 인라인 프레임은 인터넷 익스플로러의 독자적인 요소였으나 HTML4.0과 HTML 4.01 이후에 정식으로
지원하고 있습니다.
- 인라인 프레임은 XHTML 1.0 strict와 XHTML 1.1에서는 사용할 수 없으며, Transitional DTD에서만
사용할 수 있습니다.
- 인라인 프레임을 사용할 경우에는 접근성을 고려하여 iframe에 title 속성을 함께 제공하는 것이 바람직합니다.
- iframe 요소의 사용 형식은 다음과 같습니다.
34. 개체 삽입 <object>
- object 요소는 이미지를 포함한 플래시 개체나 동영상, 사운드 등의 플러그인 개체를 의미합니다.
- 이러한 형식의 개체를 웹 문서에 삽입할 때는 object 요소를 사용해야 하지만
인터넷 익스플로러와 비인터넷 익스플로러 계열의 웹 브라우저가 서로 개체를 참조하는 방식이 다르다는
문제가 있습니다.
- object 요소의 사용 형식은 다음과 같습니다.
35. 내부 스타일 적용 <style>
- XHTML 요소 중에서 style 요소는 css를 XHTML 문서에 적용할 때 사용하고 XHTML 요소 중 대부분은 구조를
정의하는 용도로 사용합니다.
- 각 요소마다 기본적인 스타일만 적용되어 있기 때문에 가독성이 높은 디자인을 위해서나 시각적으로 화려하게
표현하려면 CSS(Cascading Style Sheet)의 도움을 받아야만 합니다.
- style 요소의 사용 형식은 다음과 같습니다.
36. 스크립트 삽입 <script>
- 웹 문서에 스크립트를 삽입할 때는 script 요소를 사용하며 head 요소와 body 요소에 여러 개의 script를
삽입할 수 있습니다.
- 스크립트를 삽입할 때는 XHTML에서 script 요소의 내용 모델이 #PCDATA(Parsed CDATA)이기 때문에
"<",">","&"등의 기호를 문자 참조로 변화해야합니다.
- script 요소의 사용 형식은 다음과 같습니다.
37. <div> 요소
- div(division) 요소는 분할, 나누기의 의미를 가지며, 그룹핑(grouping)의 역활을 수행합니다.
- 주로 블록 요소를 그룹화하기 위해 사용하며, id와 class 속성으로 해당 그룹의 의미를 부여할 수 있습니다.
- div 요소는 레이아웃을 구현할 때도 사용할 수 있으며, 논리적인 구조를 고려하여 서로 연관성 있는
콘텐츠를 그룹핑하는 것이 좋습니다.
- div 요소의 사용 형식은 다음과 같습니다.
38. <span> 요소
- 블록 요소를 그룹화하기 위해 주로 div 요소를 사용한다면, 인라인 요소를 그룹화 할때는 span요소를 사용
- div 요소와 마찬가지로 id와 class 속성을 이용하여 그룹화한 요소에 적절한 네이밍을 통해 의미를 부여
- span요소는 인라인 요소이므로 p와 ul 요소와 같은 블록 요소를 포함할 수 없습니다.
- span요소의 사용 형식은 다음과 같습니다.
'프로그램 이론 > HTML' 카테고리의 다른 글
| [HTML]견고한 웹을 위한 구조설계(XHTML) - 2 (0) | 2018.05.09 |
|---|---|
| [HTML]견고한 웹을 위한 구조설계(XHTML) - 1 (0) | 2018.05.09 |
| [HTML]웹 접근성과 웹 표준 (0) | 2018.05.09 |
