- 잘못 사용하고 있는 태그
무분별한 테이블 사용
<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<sup>2</sup> + 4x + 4 = (x+2)<sup>2</sup>
형식을 가지고 있는 컨텐츠 (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을
