(HTML&DOM) 기타 HTML 태그

강좌7 - HTML&DOM - 7년 전 등록

기타 HTML 태그

안녕하세요. 이번 시간은 HTML 마지막 시간으로 지금까지 다루지 않았던 태그들에 대해 간단하게 알아보고 넘어가겠습니다.

u, s

서식 태그 중 빠뜨렸던 태그입니다. u는 ins와 같습니다. 단, ins는 u에 반해 추가되었다는 뜻의 시맨틱 의미가 있습니다. s는 del과 같습니다. 단, del은 s에 반해 삭제되었다는 뜻의 시맨틱 의미가 있습니다.

map, area

이미지맵을 정의하는 부분으로 이미지의 특정 부분을 선택할 수 있게 됩니다. img 태그에서는 usemap 속성에 map 태그의 id를 입력하여 연결시켜주고, map 태그에서는 내부에 area 태그를 입력하여 선택할 부분을 정해줍니다. area 태그의 속성은 href, shape, coords 등이 있는데, href는 클릭 시 이동할 주소를, shape와 coords는 각각 area의 모양과 좌표를 설정합니다.

<img src="https://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" alt="ZeroCho" usemap="#zero" />
<map name="zero" id="zero">
  <area href="./home" alt="홈" shape="rect" coords="15,15,17,17">
  <area href="./profile" alt="프로필" shape="circle" coords="16,16,5">
</map>

bdo, bdi

텍스트의 방향을 설정하는 태그입니다. 아랍어같은 오른쪽에서 왼쪽으로 가는 텍스트를 입력할 때 필요합니다. bdi는 브라우저가 알아서 판단하고, bdo는 dir 속성으로 직접 정해줘야합니다. ltr는 왼쪽에서 오른쪽, rtl은 오른쪽에서 왼쪽입니다.

dl, dt, dd

용어를 정의하는 태그입니다. dl로 감싸고, dt로는 용어를, dd로는 용어에 대한 설명을 입력합니다.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dd>웹사이트의 구조를 담당하는 언어</dd>
</dl>

figure, figcaption

figure 태그는 일러스트, 다이어그램, 사진, 코드등에 주석을 다는 용도로 사용됩니다. figcaption에 실제 주석을 넣어줍니다.

<figure>
  <img src="https://www.gravatar.com/avatar/edc1de56da658ae0b919a2d2ee28e26c?s=32&d=retro" alt="ZeroCho" />
  <figcaption>ZeroCho Logo</figcaption>
</figure>

fieldset, legend

폼에서 빠뜨린 태그로 fieldset은 여러 인풋을 그룹으로 묶을 때 사용합니다. legend는 그룹에 대한 설명을 적는 태그입니다.

<form>
  <fieldset>
    <legend>폼 그룹</legend>
    <input type="text" /><br />
    <input type="checkbox" />
  </fieldset>
</form>

optgroup, datalist

optgroup 태그는 select 태그의 option들을 그룹화하는 태그고, datalist 태그는 input 태그의 보기같은 역할을 합니다.

<select name="category">
  <optgroup label="javascript">
    <option value="jQuery" selected="selected">jQuery</option>
    <option value="ES2015">ES2015</option>
    <option value="React">React</option>
  </optgroup>
  <optgroup label="etc">
    <option value="HTML">HTML</option>
    <option value="CSS">CSS</option>
    <option value="Git">Git</option>
  </optgroup>
</select>

<input type="text" list="search">
<datalist id="search">
  <option value="jQuery">jQuery</option>
  <option value="ES2015">ES2015</option>
  <option value="React">React</option>
</datalist>

meter, progress

수치를 가로막대로 표현합니다. 단순한 수치는 meter로 표현하고, 진행 정도는 progress로 표현하면 됩니다.

<meter value="2" min="0" max="10">2/10</meter> 
<progress value="15" max="100"></progress>

keygen

사실 한 번도 써본 적이 없는 태그입니다. 폼 안에서 전송시 공개 키는 서버로, 비밀 키는 로컬에 저장해준다고 하네요.

<form>
  <keygen name="key" />
</form>

사실 이것보다 더 많은 태그가 있습니다. 일부는 사라졌고, 일부는 CSS 시간이나 HTML5 시간을 위해 소개하지 않았습니다. 천천히 알아보도록 하죠. 다음 시간에는 HTML의 특수 기호인 HTML 엔티티에 대해 알아보겠습니다!

조회수:

ZeroCho Blog

게시글