태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

  1.xml 선언
    xhtml은 xml 어플리케이션의 한 종류이기 때문에 문서의 처음 부분에 xml선언을 기술한다.

<?xml version="1.0" encoding="UTF-8" ?>

    + 버전 속성
     버전 속성은 필수 속성이며, xml의 버전을 지정한다. 버전 값은 xhtml의 버전이 아니라 xml버전이며, xhtml1.0이건 xhtml1.1이건 '1.0'으로 지정한다.

    + 인코딩 속성
    xhtml의 기본 문ㅈ코드세트는 'UTF-8' 또는 'UTF-16'으로 인식된다. 한국어에 대해서는 UTF-8과 UTF-16이외에 EUC-KR, ISO-2022-KR 이 일반적으로 사용된다.
  UTF-8 : 8비트 가변 멀티바이트로 문자를 표현
  UTF-16 : 16비트 가변 멀티바이트로 문자를 표현
  EUC-KR : 유닉스 서버와 워크스테이션 표준의 문자코드세트
  ISO-2022-KR : 한국공업규격이 지정한 문자코드세트. 메일 인코딩으로 1990년대 말까지 사용되었다.

UTF-16은 일부 브라우저가 지원하지 않는 문제가 있어서, UTF-8과 EUC-KR로 지정하는 것이 일반적이다

xml encoding 이 잘먹히지는 않는다. 그래서 meta tag를 쓰고 있다.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />



  2. 문서형 선언
    XHTML의 문서형 선언은 XML선언 바로 뒤에 기술한다

XHTML 1.0 Stict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">


  3. 네임 스페이스와 언어코드
html 요소에 지정한다.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

xhtml1.0에서는 하위호환성을 고려하여 lang 속성에 xml:lang 속성 같은 값을 지정해 둔다. xhtml1.1에서는 lang속성을 인정하지 않기 떄문에 xml:lang 속성만으로 문자코드를 지정한다



4. 마임 타입
xhtml 문서의 마임(mime)타입과 문자코드 세트는 head 요소안에, meta요소에 http-equiv속성과 content 속성을 붙이고 xhtml문서 안에 한글 등의 비ASCII 문자가 나오는 부분보다 앞부분(일반적으로 title 요소의 바로 앞부분)에 지정한다.

xhtml문서에 지정하는 마임 타입은 'application/xhtml+xml'이 일반적이다.

 마임타입 HTML4
XHTML1.0
(Compatible)
XHTML1.0
(other) 
XHTML Basic/1.1
XHTML + MathML
 Text/html 추천
가능
비추천
비추천
비추천
 Applicatiln/xhtml+xml  금지  추천  추천  추천  추천
 Application/xml  금지  가능  가능  가능  가능
 Text/xml  금지  가능  가능  가능  가능
현 상황에서는 하위 호환성을 고려해 xhtml문서에도 html 문서같이 마임타입을 'text/html'로 적는 것이 일반적이지만 올바른 표현은 'application/xhtml+xml'이다


5. 네이게이션 링크
네비게이션 링크를 지정하면 사이트에서 이동이 편리해지고, 사용성이 향상된다. WCAG1.0에서 '우선도2'로 내비게이션 링크를 지정하게 규정하고 있다.

ex) <link rel="start contents" href="/index.html" title="차례" />
 rel 속성값
내용
 start  시작 페이지
 next  다음 페이지
 prev  이전 페이지
 contents  차례
 index  찾아보기
 glossary  용어집
 copyright  저작권 정보
 chapter  장
 section  절
 subsection  항
appendix  부록
 help  도움말
 bookmark  즐겨찾기

link 요소로 대체문서를 지정
<link rel="alternate" />에 hreflang속성을 지정하여 그 문서의 다른 언어버전을 표시한다듣지  media속성을 지정하면 다른 미디어에 적용할 버전을 표시할 수 있다.

link요소로 외부 스타일 시트와 작성자를 지정할수도 있다.
<link rel="stylesheet" type="text/css" media="screen" href="/css/default.css" />
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

<link rev="made" href="mailto:webmaster@url.com" />


6. 제목, 문단, 작성자 정보, 구분선
  인라인 요소와 텍스트는 반드시 블록레벨 요소에 포함시켜 나타내어야 한다. 즉 body 요소의 바로 하위에는 블록 레벨 요소만이 자식 요소로 올 수 있고 인라인 요소를 body요소의 직접적인 하위 내용으로 하는 것은 옳지 않다.

- 제목(h1~h6)요소
  블록레벨요소이지만 인라인 요소와 텍스트를 포함하지만 블록레벨 요소를 포함할 수는 없다.

- 문단(p) 요소
  문단(paragraph)은 블록 레벨 요소이며, 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소는 포함할 수 없다.


7. 작성자 정보(address 요소)
인라인 요소와 텍스트를 포함하지만 블록 레벨 요소는 포함할 수 없다.
ISO-HTML에서는 address는 body 요소, blockquote요소, div요소, form요소, fieldset요소, object요소의 자식 요소로서만 존재할 수 있고 address요소에는 img 요소, object요소, map요소 등의 인라인 요소를 포함해서는 안된다고 규정하고 있다.


8. 구분선(hr요소)
블록레벨이지만 빈 요소이므로<hr />형식으로 기술한다.
hr요소는 xhtml1.1에서 프리젠테이션 모듈로 분류되어 있지만 xhtml basic에서는 정의되지 않는 것을 보면 구조가 아니라 표현만을 지정하는 요소로 취급된다고 해도 좋다.



9. 인용문(blockquote요소)
blockquote요소는 블록레벨요소이지만 직접 인라인 요소와 텍스트를 포함하는 것이 불가능하고, p요소등 다른 블록 레벨 요소를 포함해야 한다.

ex)
<blockquote>
<p>asdf</p>
</blockquote>

blockquote 요소에는 cite 속성을 인용한 곳의 uri를 명시하는 것이 좋다.
웹에 근거 페이지가 존재하지 않는 경우에 근거 자원이 서적이라면 ISBN(International Standard Book Number)을 지정하면 좋다.
인용문이 외국어이면 "xml:lang" 속성으로 언어코드를 지정하면 좋다.
title로 인용한곳의 타이틀이나 책 제목, 그 밖의 보충 정보지정이 가능한데, 브라우저에서 툴팁으로 표시된다.

비교적 짧은 문장에 인라인으로 인용하는 때에는 q (short inline quotation'의 의미) 요소를 사용한다.

blockquote는 많은 브라우저에서 들여쓰기로 표시가 되어 다른 텍스트와 혼동할 가능성이 낮지만 q요소는 브라우저마다 표시 방식이 다르다. q요소가 적용될때 인용부호가 자동적으로 부여되는지는 브라우저에 따라 다르므로 현 상황에서는 html 소스에 인용부호를 적지않고 css background-color속성으로 배경색을 지정하여 구분해주는것이 좋다.


10. 정형화된 텍스트(pre 요소)
  정형화된 텍스트는 소스 안에서의 행바꿈과 스페이스가 그대로 브라우저에 표시되는 텍스트이다. pre요소는 블록 레벨 요소이며 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소를 포함할 수는 없다. img, big, small, sub, sup, ins, del, label, input, select, textarea, botton, noscript 등 텍스트를 장식하기 위한 요소, 폼과 스크립트 관련 요소를 포함할 수 없다,


11. ul, ol, li
ul 요소, ol 요소 모두 블록레벨이지만 li 요소 이외의 요소를 포함 시킬 수 없다.
li 요소는 블록 레벨 요소이며, 인라인 요소, 텍스트, 블록 레벨 요소 다 포함할 수 있다.


12. 정의형 목록(dl, dt, dd)
  정의형 목록(definition list)는 dl로 정의를 하고, 용어(definition term)를 나타내는 dt요소와 그 설명(definition description)인 dd 요소를 포함한다. 
  dl 요소는 블록레벨 요소이지만 dt와 dd만 포함한다.
  dt요소는 인라인 요소이며, 인라인 요소와 텍스트를 포함할 수 있다.
  dd요소는 블록레벨 요소이며, 인라인 요소와 텍스트, 블록 레벨 요소를 포함할수 있다.


13. 표요소(table, tr, th, td)
WCAG1.0에서는 table 요소에 summary 속성으로 요약문을, th 요소에는 abbr 속성으로 약어를 지정할 것을 '우선도3'으로 규정하고 있다.

제목(타이틀)을 달 때는 caption 요소를 사용한다. caption 요소는 table요소의 시작태그 바로 뒤에 기술한다.

- 행 그룹화를 위한 thead, tfoot, fbody요소
  caption, col, colgroup 요소의 다음에 thead, tfoot, tbody 순서로 지정한다. thead 요소로 헤더행, tfoot 요소로 푸터행을 정의하고, 그 뒤에 tbody요소로 표 본체의 행을 정의한다.

- 열 그룹화를 위한 colgroup, col
  이들은 table요소 또는 caption 요소의 바로 뒤(thead, tfoot, tbody 요소바다 앞) 에 지정한다. colgroup 요소가 열의 구조적인 그룹화를 위해서 사용되고, col요소는 속성값과 스타일의 공유목적으로 열을 그룹화하기 위해 사용하는 차이가 있다.  colgroup 요소로 열을 그룹화하고 각열의 스타일을  col요소에 자세하게 지정해서 사용할 수 있다.

- 좀더 높은 레벨의 셀 관련 짓기
  th요소, td요소에 headers속성과 scope속성을 지정하면 좀더 높은 레벨로 셀을 관련 지을 수 있다. headers 속성에는 td요소의 제목 정보를 제공하는 th요소의 id를 지정한다. 복수의 id를 지정할 때는 공백문자로 구분하여 열거한다.
  scope 속성에는 th 요소로 제목ㅈ어보를 제공하는 td요소의 범위를 지정한다. 값에는 'row'(그 행의 td요소에 제목정보 제공), 'col'(그열의 td요소에 제목정보 제공), 'rowgroup'(그 행그룹의 td요소에 제목정보 제공), 'colgroup'(그 열 그룹의 td요소에 제목정보 제공)을 지정할 수 있다.
  headers속성은 td요소에서 th요소의 id참조에 비해 scope속성은 th요소에 td요소의 범위를 지정하는 점이 다르다.



14. 링크 이미지
  - id 속성에 지정할수 있는 프래그먼트 식별자에는 HTML과 XHTML에서 다음과 같은 차이가 있다
    html : 반드시 알파벳(a~z)으로 시작하고 알파벳(a~z), 숫자(0~9), 하이픈(-), 마침표(.), 밑줄(_), 콜론(:)으로 구성해야 한다. 알파벳의 대,소문자를 구별한다.
    xhmlt : 반드시 알파벳(a~z) 또는 밑줄(_)로 시작하고 알파벳(a~z), 숫자(0~9), 하이픈(-), 마침표(.), 밑줄(_)로 구성해야 한다. 알파벳의 대문자, 소문자를 구별한다. 또 대문자, 소문자에 관계없이 'xml'로시작할수 없다.

name 속성값은 HTML4.01의 DTD에서는 'cdata'로 되어 있으므로 임의 텍스트 지정이 가능하다. 다만 URI로 지정 가능한 것은 ASCII문자로 한정되어 있기 때문에 한국어 드으이 텍스트는 지정할 수 없고  실질적으로는 id 속성에 지정 가능한 값으로 한정된다.  또 xhtml1.0의 DTD에서는 'NMTOKEN'으로 되어 있으므로 반드시 알파벳(a~z)으로 시작하지 않아도 좋지만 역시 실질적으로는 id속성에 지정 가능한 값에 한정한다.



  - a요소는 a 요소를 포함할 수 없다


  - tabindex속성과 accesskey속성으로 키조장에 의한 포커스 이동 방식제공
    tabindex 속성 : 키보드 'TAB키'를 눌렀을 때의 포커스 이동 순서를 지정하낟. 0에서 32767까지의 값이 지정가능하다. 작은 값에서 큰 값으로 포커스가 이동하지만 '0'을 지정한 경우에는 tabindex 속성을 지정하지 않은 다른 요소와 같이 정수가 지정된 요소의 뒤에 출현하는 순서대로 포커스 된다.
    accesskey 속성 : 액세스키(키보드 단축키)를 눌렀을 때의 포커스를 지정한다. 알파벳(a~z)과 숫자(0~9)등 임의의 키값을 지정하지만 대문자/소문자를 구별하지 않는다. 또 단축키는 windows에서는 'alt키'와 '임의로 지정한 키' 메킨토시에서는 'cmd키'와 '임의 지정키'를 눌러 작동시킨다.

또 accesskey 속성값에 알파값을 지정할 때 브라우저의 기본 설정 키보드 단축키와 충돌하기도 한다(충돌할 때 어느쪽이 우선되는지는 브라우저에 따라 다르다) 따라서 값은 숫자를 지정하는 것이 무난하지만 '0~9'까지의 값은 한정되어 있고 'references'라는 링크텍스트에 'r'가 아니라 '2'를 지정하면 사용자가 직감적으로 조작하기 힘든 결점이 있다.

- title 속성에 링크의 보충정보 표시
  a 요소에 title 속성을 지정하여 링크의 보충정보를 표시할 수 있다. 많은 브라우저에서 title 속성에 지정한 값이 툴팁을 표시된다.



- img
  alt속성을 이용해 대체텍스트를 제공해야하나 길경우 title 속성을 이용해 자세한 설명을 적는다. 또 그 이미지가 특별한 의미를 지니지 않거나 대체 텍스트 지정이 부적절한 때에는 alt=""라고 값을 비워두면 된다. 이것으로 텍스트 브라우저나 음성브라우저가 그 이미지들 읽지않고 사용자에게 불필요한 정보를 전달하지 않는다.

img 요소에는 longdesc속성으로 그 이미지에 대한 자세한 설명이 있는 페이지의 uri를 지정하여 alt 속성을 보완한다. alt속성과 title속성으로 길게 설명문을 지정하는 것은 현실적이지 않기 때문에 longdesc속성으로 자세한 설명이 있는 페이지의 URI를 표시한다.

object로 대체가 가능하다.
<object data="image.gif" type="image/gif">오브젝틀 들어간 이미지</object>
object속성에서는 data속성으로 이미지파일의 uri를, type속성으로 마임 타입을 지정하고 GIF의 마임타입은 'image/gif', JPEG는 'image/jpeg', PNG는 'image/png'이다


10. 텍스트를 정의하기 위한 인라인 요소
  - 강조(em요소, strong 요소)
특정텍스트 강조는 em요소 또는 strong요소로 지정한다. em요소는 통상의 강조이지만 strong 요소는 더욱 강한 강조의 의미하는 차이가 있다.

  - 생략어와 두문자어(abbr 요소, acronym 요소)
 일부의 텍스트를 생략어(abbreviated form)로 정의하는 데는 abbr요소를, 두문자어(acronym)로 정의하는 데는 acronym요소를 사용한다. abbr요소는 'www', 'uri', 'html', 'it'등 한 문자씩 발음하는 단어를, acronym요소는 'NATO', 'UNESCO', 'SOHO'등 한단어로 발음한느 단어를 정의하는 점이 다르다. 양쪽 모두 인라인 요소이며, 인라인요소와 텍스트를 포함한다.
  abbr 요소, acronym 요소 모두 title 속성으로 전체 철자 지정이 HTML4.0에서 요구되며 WCAG1.0에서 '우선도3'으로 지정되어 있다.
  그 단어가 생량어에 해당하는지 두문자어에 해당하는지 판단할 수 없을 때는 ABBR요소로 정의해두자. acronym요소로 정의하면 음성 브라우저에서 한 개의 단어로 인식하여 발음하므로 굉장히 일반적 두문자어가 아닌 경우 사용자가 이해하기 힘들 가능성이 있기 때문이다.

- abbr 요소와 acronym요소의 읽는 방법 지정
  html과 xhtml에는 존재하지 않지만 css2의 '음성 스타일스트(Aural Cascading Style Sheet:ACSS)의 한종류인 SPEAK 속성으로 지정할수 있다. abbr요소를 한 문자씩, acronym요소를 한 개의 단어로 발음하게 지시하려면 다음과 같이 지정한다
abbr {speak:speel-out;}
acronym{spaek:normal;}


11. 추가글과 삭제글(ins요소, del요소)
   ins요소와 del요소는 상황에 따라 블록 레벨 요소도 인라인 요소도 될 수 있는 특수 요소이다. ins요소와 del요소에는 datetime속성으로 추가, 삭제한 날짜와 시간을 나타낼 수 있다. cite 속성으로 추가, 삭제의 근거가 된 자원을 표시할 수 있다. 값에는 URI를 지정한다. 서적이라면 ISBN을 지정한다.


12. 위첨자와 아래첨자(sup 요소, sub 요소)

13. 정의어 (dfn 요소)

ex) <p>가 가이드라인은 문서작성자에서 융통성 있는 <dfn>편집화면</dfn>, 내비게이션 보조기능, 디스플레이 속성에서의 접속기능 등의 웹접근성을 높인 설계에 대해 고려해야 한다고 강조한다.</p>
.
.
.
<dl>
  <dt>편집화면</dt>
  <dd>저작도구(authoring tool)가 제공하는 편집 중인 화면을 말한다.</dd>
</dl>


14. 컴퓨터 특유의 텍스트(code요소, var요소, samp 요소, kbd 요소)
code - 프로그램이나 스크립트의 소스코드 표시
var - 프로그램이나 스크립트의 변수와 인수 표시
samp - 프로그램이나 스크립트의 출력예 표시
kbd - 사용자가 입려하는 텍스트 표시




15. 그룹와 요소, 주석 삽입, 문자참조
  - div 요소는 블록 레벨 요소의 그룹화를 위한 요소이므로, 인라인 요소나 텍스트를 값에 포함하는 것은 바람직하지 않다.

  - 주석은 SGML의 서식에 따라 '<!--' 와 '-->'으로 둘러싼다. 또 '<!--' 와 '-->'의 사이에는 '--'(이중 하이픈)사용이 금지된 점에 주의하자.

- style 요소와 script 요소의 내용 주석처리
  HTML에는 낡은 브라우저에서 CSS나 JavaScript의 내용이 그대로 페이지에 표시되지 않게 주석화하는 것이 일반적이다. 다만 HTML에서  style요소나 script요소의 내용모델은 '#CDATA'(Character DATA,통상의 문자 데잍터)이지만 XHTML에서는 내용 모델이 '#PCDATA'(Parsed CDATA, 해석 처리되는 문자 데이터)FH QUSRUDEHLDJ, >,<,& 등의 기호는 문자참조로 기술해야 한다. 통상의 문자데이터로 인식시키려면 <!--, -->로 둘러싸는 게 아니라, <![CDATA]와 ]]> 로 둘러싸서 CDATA섹션으로 정의하여 내용을 #CDATA로 인식시켜야 한다.

- 문자참조에는 문자실체 참조(character entity references)와 수치문자 참조(numerical character reference) 두가지 방법이 있다.
신고

'Book > 웹표준교과서' 카테고리의 다른 글

제2장 문서구조 - XHTML 웹페이지구축 시작  (1) 2010.08.11
제1장 소개-웹표준은 무엇인가  (0) 2010.08.06
웹표준교과서  (0) 2010.08.06
Posted by 고시랑
이전버튼 1 2 3 이전버튼

티스토리 툴바