존재하지만 잘 쓰지 않는, 낯선 html 태그들을 개인 주관으로 추려서 정리한다.
- HTML5 미지원 태그는 정리 목록에서 제외한다.
- 크게는 ABC순으로 나열하고, 연관 있는 태그는 묶어서 정의한다.
<abbr>
"W3C", "ASAP" 등 단어의 축약형이나 머리글자로만 된 단어를 정의할 때 사용한다.
브라우저나 번역 시스템, 검색 엔진에게 유용한 정보 전달을 가능하게 한다.
<p>
<abbr title="As Soon As Possible">ASAP</abbr>
(As Soon As Possible)은 통용적으로 쓰이는 업무 용어 중 하나이다.
</p>
해당 태그를 사용하면 text-decoration: underline dotted; 가 기본으로 적용된다.
<bdo>
Bi-Directional Override. 텍스트의 쓰기 방향을 변경한다.
필수 속성 dir를 이용하여 방향을 지정합니다.
- dir="ltr" : left-to-right : 기본값
- dir="rtl" : right-to-left
ltr의 경우는 일반 적인 경우에 해당하기 때문에 오른쪽에서 작성하고 싶은 경우 해당 속성을 사용한다고 생각하면 된다.
<p>왼쪽에서 오른쪽으로 작성</p>
<p><bdo dir="rtl">오른쪽에서 왼쪽으로 작성</bdo></p>
<cite>
책이나 음악, 영화, 예술 작품 등과 같은 창작물(저작물) 제목을 정의할 때 사용한다.
<p>더 많은 정보는 <cite>MDN</cite>에서 확인 가능합니다.</p>
해당 태그를 사용하면 font-style: italic; 가 기본으로 적용된다.
이번 태그는 HTML5에서 지원은 하지만 CSS를 이용하여 스타일 수정을 권유한다는 공통점을 가진 태그들이다.
<code>
짧은 코드 조각을 나타낼 때 사용한다.
<p>태그 <code>code</code>는 짧은 코드 조각을 표현합니다.</p>
해당 태그를 사용하면 font-family: monospace; 가 기본으로 적용된다.
<kbd>
키보드 입력, 음성 입력 등 임의의 장치를 사용한 사용자의 입력을 나타낼 때 사용한다.
<p>
윈도우 환경에서 이모티콘을 입력하기 위해서는
<kbd>Win</kbd>키와 <kbd>.</kbd>키를 동시에 누르면 된다.
</p>
해당 태그를 사용하면 font-family: monospace; 가 기본으로 적용된다.
<samp>
컴퓨터 프로그램의 샘플 또는 인용 출력(output)을 나타내는데 사용합니다.
<p>컴퓨터를 부팅하려고 했더니 다음과 같은 메시지가 뜹니다.</p>
<p><samp>Keyboard not found!<br>Press F1 to continue...</samp></p>
해당 태그를 사용하면 font-family: monospace; 가 기본으로 적용된다.
<var>
수학 또는 프로그래밍에서 변수(variables)를 정의한다.
<code>(코드 요소), <kbd>(키보드 입력 요소), <samp>(출력 예시 요소) 세 태그와 함께 자주 사용된다.
<p>간단한 등식 : <var>x</var> = <var>y</var> + 2</p>
해당 태그를 사용하면 font-style: italic; 이 기본으로 적용된다.
<data>
주어진 콘텐츠에 기계가 읽을 수 있는 형태의 값을 나타낸다.
단, 해당 콘텐츠가 날짜와 관련된 데이터인 경우에는 제외한다. 대신에 <time> 태그를 사용한다.
<!-- 상품 번호 연결 예시 -->
<ol>
<li><data value="448">작은 마요네즈</data></li>
<li><data value="449">큰 마요네즈</data></li>
<li><data value="450">업소용 마요네즈</data></li>
</ol>
<del> <ins>
<del>은 취소선. 텍스트 한가운데 라인을 추가하여 제거된 텍스트를 표현할 때 사용한다.
해당 태그를 사용하면 text-decoration: line-through; 가 기본으로 적용된다.
<ins>는 <del>과 함께 사용하는데, 추가된(대체된) 텍스트를 표현할 때 사용한다.
해당 태그를 사용하면 text-decoration: underline; 이 기본으로 적용된다.
<p>이 쿠폰은 <del>8월 20일</del> <ins>8월 18일</ins>까지 다운로드 가능합니다.</p>
<s>
<del>와 유사하게 취소선을 표현한다.
텍스트 한가운데 라인을 추가하여 더 이상 정확하지 않거나 관련이 없는 텍스트를 표현할 때 사용한다.
단, 대체되거나 추가된 텍스트를 표현하는 용도가 아니기에 <ins>를 함께 사용하지 않는다.
<p><s>8월 20일까지 다운로드 가능</s></p>
<p>수량 소진</p>
해당 태그를 사용하면 text-decoration: line-through; 가 기본으로 적용된다.
<dfn>
용어의 정의를 나타낼 때 사용한다.
주로 해당 용어가 가장 처음 사용될 때 <dfn>을 이용해서 용어를 정의한다.
<p><dfn>W3C</dfn>는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다.</p>
해당 태그를 사용하면 font-style: italic; 이 기본으로 적용된다.
<embed>
외부 애플리케이션이나 대화형 콘텐츠를 포함시킬 수 있는 컨테이너(container)를 정의할 때 사용한다.
종료 태그가 없는 빈 태그임을 유의해서 사용해야 한다.
사용 가능한 속성으로 height, width, src, type 등이 있다.
<embed src="/examples/media/sample.pdf" width="500">
<object>
외부 리소스를 문서 내에서 정의할 때 사용한다.
다양한 멀티미디어(audio, video, form 등) 또는 웹 페이지 자체를 문서에 삽입한다.
시작 태그와 종료 태그 사이에는 <object>를 지원하지 않는 브라우저를 위한 텍스트를 포함할 수 있다.
<object data="https://www.tmon.co.kr/" height="180" width="600">
현재 사용 중인 브라우저는 object 요소를 지원하지 않습니다!
</object>
<object>가 다양한 멀티미디어를 삽입하는데에 사용할 수 있지만
HTML5에서 <video>, <audio>가 새롭게 추가된 이후로는 주로 다른 웹 문서를 삽입할 때에만 사용하고 있다.
즉, <object>와 <embed>는 거의 같은 역할을 하고 있다.
하지만 이 마저 아래에서 소개할 <iframe>보다 유용하지 않다는 평을 받고 있으니 사용 시 유의해야 한다. (근거 1 2)
<iframe>
HTML 문서에 다른 문서를 포함시킬 때 사용한다.
시작 태그와 종료 태그 사이에는 <iframe>을 지원하지 않는 브라우저를 위한 텍스트를 포함할 수 있다.
<iframe src="https://www.tmon.co.kr/">
<p>현재 사용 중인 브라우저는 iframe 요소를 지원하지 않습니다!</p>
</iframe>
<output>
계산의 결과를 보여주는 데 사용한다.
스크립트 등에 의해 수행된 결과나 사용자의 행동에 의한 결과를 나타낼 때 사용한다.
사용 속성
- for : 관계 있는 요소의 Id
- form : 연결할 <form> 요소
- name : 요소의 이름
아래와 같이 <input>과 함께 사용하기도 한다.
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
<pre>
미리 정의된 형식의 텍스트를 정의할 때 사용한다.
공백 및 특수기호에 구애받지 않고 HTML에 작성된 내용 그대로를 표현한다.
<pre>
*
***
*****
***
*
</pre>
<progress>
어느 작업의 완료 정도를 나타낸다.
주로 진행 표시줄의 형태를 띈다.
<label for="file">파일 진행도:</label>
<progress id="file" max="100" value="70"> 70% </progress>
<ruby> <rp> <rt>
루비 주석(ruby annotation)
글자 위에 장식, 설명, 발음 등을 글자 위에 표현한다. 대표적인 예시는 일본어의 후리가나가 있다.
<ruby>는 <rt>와 <rp>를 함께 사용한다.
<rt>는 글자 위에 표현되는 텍스트를 지정하는 용도로,
<rp>는 만일 루비 주석을 지원하지 않는 경우에 <rt>텍스트를 구분하는 괄호를 보여주기 위한 용도로 사용한다.
<p>"공부"를 의미하는 일본어는 <ruby>勉強<rp>(</rp><rt>べんきょう</rt><rp>)</rp></ruby>입니다.</p>
<small>
글자 크기가 작은 텍스트를 정의할 때 사용한다.
참고로 대조가 되는 <big>도 존재했지만 HTML5에서는 미지원한다.
<p>일반 크기의 텍스트입니다.</p>
<p><small>작은 크기의 텍스트입니다.</small></p>
해당 태그를 사용하면 font-size: smaller; 이 기본으로 적용된다.
<sub> <sup>
아래첨자 텍스트를 표현하기 위해 <sub>를 윗첨자 텍스트를 표현하기 위해 <sup>를 이용한다.
주로 화학식과 수학 공식을 표현하는 데에 이용된다.
<!-- 아래첨자 사용 예시 : 화학식 -->
<p>2H<sub>2</sub> + O<sub>2</sub> → 2H<sub>2</sub>O</p>
<!-- 윗첨자 사용 예시 : 수학 공식(제곱) -->
<p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
<template>
추가되거나 복사될 수 있는 HTML 요소들을 정의하는데 사용한다.
<template> 요소 내 콘텐츠는 페이지가 로드될 때 즉시 렌더링 되지 않는다.(= 사용자에게 보여지지 않는다.)
렌더링하기 위해서는 JavaScript를 이용하여 해당 콘텐츠를 복제하는 형식을 사용한다.
JavaScript를 사용하여 브라우저가 해당 HTML을 렌더링하지 않도록 신경써서 HTML 코드를 작성하는 작업을 대신하는 용도로 이해하면 된다.
<!-- 템플릿 -->
<template id="myTemplate">
<p>템플릿입니다!</p>
</template>
<!-- 일반 -->
<div id="normalContent">
<p>하단 버튼을 누르면 템플릿을 계속해서 불러올 수 있습니다</p>
</div>
<button onclick="useTemplate();">버튼을 눌러보세요</button>function useTemplate() {
const myTemplate = document.getElementById('myTemplate');
const normalContent = document.getElementById('normalContent');
const clonedTemplate = myTemplate.content.cloneNode(true);
normalContent.appendChild(clonedTemplate);
}
참고
'MARKUP' 카테고리의 다른 글
| [HTML] <textarea>의 줄 바꿈 적용에는 디테일이 필요하다 (feat. pre, 정규표현식) (0) | 2024.08.04 |
|---|---|
| [HTML][JAVASCRIPT] wai-aria를 이용해서 접근성 갖춘 탭 UI 만들기 (0) | 2024.01.15 |
