웹 표준 가이드 북 - 구조적 XHTML 사용 방법

[##_kaAmo_##]

1. 잘못 사용하고 있는 태그

• 무분별한 테이블 사용

• <table width="640" cellpadding="0" cellspacing="0" border="0"> <tr> <td height="25" valign="top"> <img src="title_01.gif"> </td> </tr> <tr> <td> 레이아웃에 table element 를 사용하는 이유는 아마도 쉽기 때문일 것이다. 쉽다는 것 보다는 "익숙해서" 가 더 큰 이유일지도 모른다. 대다수의 사람들은 처음부터 아주 당연하게 table 을 사용해 왔고 그렇게 되어 있는 사이트를 더 많이 봤을 것이다. </td> </tr> </table>

  이와 같은 데이터는 표가 아니기 때문에 <table> 태그를 사용해서는 안되고 의미에 맞는 <h1>이나 <p>와 같은 태그를 사용해 주어야 한다.

• 잘못된 위치, 태그, 스크립트 사용
•  

  <table cellpadding="0" cellspacing="0"> <form action="/search/" method="get"> <tr> <td> <select> <option>제목</option> <option>내용</option> <option>작성자</option> </select> </td> <td> <input type="text" size="10" class="type-text" /> </td> <td> <a href="javascript:search()"><img src="button_search.gif"></a> </td> </tr> </form> </table>

  <form>을 사용해 제작하다 보면 디자인상에서 나타나서는 안되는 공백이 생기는 것을 볼 수 있다. 이와 같은 현상을 피하기 위해 많은 사람들이 <form>태그를 <tr>태그 사이에 넣는다. 하지만 이와 같은 사용은 잘못된 문법 오류이다. <form>의 여백을 없애기 위해서는 스타일을 사용하면 아주 간단하게 문제를 해결할 수 있다. form{ margin:0; }

• 또한 많은 사람들이 <form>의 서밋을 javascript로 하는 것도 잘못된 xhtml의 사용이다.
• <form>의 서밋을 하기 위해서는 <input type="submit">을 사용하면 되고 일반적으로 이미지를 서밋버튼으로 사용하기 때문에 <input type="image">를 사용하게 된다.
• 상당수의 사람들이 이와 같은 방법을 사용하지 않고 <img>태그를 이용해서 이미지 버튼을 삽입하고 이것에 <a>태그와 javascript를 이용해서 서밋을 하는 방법을 사용한다.
• 이와 같은 방법은 javascript가 작동하지 않는 상황에서는 서밋이 일어날 수가 없기 때문에 접근성을 아주 떨어뜨리는 방법이다.
• "XHTML"을 작성함에 있어서 가장 중요하게 생각하고 있어야 하는 것은 "의미에 맞는 태그를 사용"하는 것이다.
• 그룹 요소 : div, span
• 각각의 의미를 갖고 있는 컨텐츠를 묶거나 표시하는 태그 : <div> , <span>
• <div>와 <span>둘다 그루핑에 사용되는 엘리먼트.
• <div>는 block, <span>은 inline 이라는 큰 차이점이 있음.
• <div>이용시 개행이 이루어지나 <span>은 개행이 이루어 지지 않음.
•  <div>, <form>, <ul>, <ol>, <li>, <dl>, <dt>, <dd> 등이 block 들이고 <a>, <img>, <select>, <input> 등이 대표적인 inline엘리먼트 들이다.
• 표제
• Heading 태그는 제목들을 표시할 때 사용.
• <h1> ~ <h6>까지 6단계의 heading 태그가 존재.
• 문단
• <p>태그는 문단을 나타낼 때에 사용.
• 문단은 <p>로 구분하고 간격을 CSS로 제어하게 되면 브라우져와 상관없이 일관된 디자인을 유지할 수 있다.
• 구문(em, strong, dfn, code, samp, kbd, var, cite, abbr, acronym)
• 강조(strong, em)
• <em>과 <strong>은 문장안에서 강조를 나타냄.
• <em>은 이탤릭, <strong>은 볼드체
• <em>과 <strong>은 중요도의 경우 사용.
• 일반 이탤릭, 볼드는 <i>,<b>를 사용.
• 정의
• <dfn>태그는 정의를 나타낼 때에 사용.
• 코드
• <code>는 컴퓨터 코드를 나타내는 태그
• <samp>는 코드의 결과 출력물을 나타낼 때에 사용
• 값의 표시
• <kbd>는 유저의 키보드 입력을 나타냄.
• <var>는 프로그램에서의 변수를 나타냄.
• 출처
• <cite>는 인용이나 출처를 밝힐 때에 사
• 축약
• <abbr>는 축약어를 나타냄.
• <acronym>은 두문자어를 나타냄.
• 인용(blockquote, q)
• 다른 인용문을 표시할 때에 사용.
• <blockquote>는 block요소의 인용문, <q>는 inline요소의 인용문.
• 첨자(sup, sub)
• 위첨자나 아래첨자를 나타내고자 할때 사용된다.
• x² + 4x + 4 = (x+2)²
• 형식을 가지고 있는 컨텐츠 (pre)
• 미리 형식을 가지고 있는 내용을 나타내고자 할 때에는 <pre>태그를 사용.
• 공란도 갯수에 맞게 다 나오고 글자폭이 일정한 폰트로 화면에 나오게 됨.
• 주로 소스 코드등을 나타낼 때에 많이 사용.
• 자동 줄바꿈이 되지 않기 때문에 너비가 제한적일 때에는 주의해서 사용해야 한다.
• 추가 및 삭제(ins, del)
• 문서에 추가된 내용, 삭제된 내용을 명시할 때 사용.
• 목록(ul, ol, dl)
• Unordered List
• <ul>은 하위로 <li>엘리멘트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 불렛이 나타남.
• Ordered List
• <ol>은 하위로 <li>엘리먼트를 갖게 되고 각 <li>엘리먼트의 앞부분에는 자동적으로 숫자가 나오게 됨.
• Definition List
• <dl>은 하위로 <dt>와 <dd>엘리먼트를 갖게 됨.
• <dt>는 term을, <dd>는 definition을

크리에이티브 커먼즈 라이센스

이 저작물은 크리에이티브 커먼즈 코리아 저작자표시-비영리-변경금지 2.0 대한민국 라이센스에 따라 이용하실 수 있습니다.