링크와 이미지
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>
X2 와 같이 윗첨자를 표현할 때엔 sup 요소 사용
H2O 와 같이 아랫첨자로 표현할 때엔 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/
