웹 표준 코딩 방법

이번 포스팅페이지에서는 웹표준코딩 내의 body부분에 대해 간략히 설명 드리겠습니다.

[1]제목

- 제목(h1~h6)요소

h1~h6로 제목을 정하실때는 계층구조를 주의하셔서 작업하셔야 합니다. 예를 들어 <h1>...</h1>을 사용하셨으면 다음엔 반드시 <h2>...</h2>로 사용하셔야 합니다. 그리고 원칙적으로 h1요소는 한페이지에 한 번씩만 사용하시길 바랍니다.

블록레벨요소이지만 인라인 요소와 텍스트를 포함하지만 블록레벨 요소를 포함할 수는 없습니다.

[2]문단
- 문단(p) 요소
문단(paragraph)은 블록 레벨 요소이며, 인라인 요소와 텍스트를 포함하지만 블록 레벨 요소는 포함할 수 없습니다.<p>...</p>태그를 사용하여 문단내용을 줄바꿈을 하고자실 때는 <br>태그사용하시되 <br>태그는 빈요소 이기때문에 반드시 맨뒤에 /를 사용하셔야 합니다. <br />이런식으로 br태그 사용해주세요. 처음 코딩을 배우시는 분들도 습관이 될 수 있도록 무조건 <br />을 사용해주세요.

[3]작성자 정보(address 요소)

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

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

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

ex)
<blockquote>

<p>안녕하세요<br/>

블로그 방문을 환영합니다<br />

</p>

</blockquote>

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

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

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


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


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


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

[9] 표요소(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요소의 범위를 지정하는 점이 다릅니다.



[10] 링크 이미지
- 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'입니다


[11] 텍스트를 정의하기 위한 인라인 요소
- 강조(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;}


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


[13] 위첨자와 아래첨자(sup 요소, sub 요소)

[14] 정의어 (dfn 요소)

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


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




[16] 그룹와 요소, 주석 삽입, 문자참조
- 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) 두가지 방법이 있습니다.

웹표준교과서 참고

[출처] 웹표준 코딩 방법[body부분]|작성자 파란거북이