(5) HTML 태그 - d

<data> : 특정 콘텐츠에 기계가 읽을 수 있는 (machine-readable) 형태의 값(value)을 덧붙여 나타낼 때 사용함.

<data> 요소는 데이터 처리를 위해 기계가 읽을 수 있는 형태의 값과 브라우저에 표시되어 사람이 읽을 수 있는 형태의 값을 모두 제공합니다.

단, 해당 콘텐츠가 시간이나 날짜와 관련된 데이터라면 <data> 요소 대신 <time> 요소를 사용해야 합니다.

<ol>
    <li><data value="448">작은 마요네즈</data></li>
    <li><data value="449">큰 마요네즈</data></li>
    <li><data value="450">업소용 마요네즈</data></li>
</ol>

 

 

<datelist> : <input> 요소에서 사용하기 위한 옵션들의 리스트를 미리 정의할 때 사용함.

<datalist> 요소는 사용자가 <input> 요소에 데이터를 입력할 때 미리 정의된 옵션을 드롭다운 리스트로 보여줌으로써 자동완성 기능을 제공합니다.

<input> 요소의 list 속성값으로 <datalist> 요소의 id 속성값을 명시하면, 해당 <datalist> 요소에서 미리 정의한 옵션들을 <input> 요소에서 사용할 수 있습니다.

<form action="/examples/media/action_target.php" method="get">
    학과 : <input type="text" name="st_department" list="depList"><br>
    이름 : <input type="text" name="st_name"><br><br>
    <datalist id="depList">
        <option value="컴퓨터공학과"></option>
        <option value="영어영문과"></option>
        <option value="경영학과"></option>
        <option value="사회체육과"></option>
    </datalist>
    <button type="submit">제출하기</button>
</form>

 

 

<dd> : 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 설명(description) 부분을 정의할 때 사용함.

<dl> 요소는 용어(term)나 이름(name)을 나타내는 <dt> 요소와 해당 용어에 대한 설명을 나타내는 <dd> 요소로 구성됩니다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

 

 

<del> : 텍스트 한가운데 라인(line)을 추가하여 문서에서 삭제된 텍스트를 표현할 때 사용함.

또한, <ins> 요소는 텍스트 아래쪽에 라인을 추가하여 문서에서 추가된 텍스트를 표현합니다.

이와 같이 <del>요소와 <ins> 요소는 문서에 대한 업데이트나 수정을 표현할 때 사용하며, 브라우저는 이를 일반 텍스트에 추가하는 것으로 표현할 것입니다.

<p>이 벽화가 그려진 시기는 <del>청동기</del> <ins>구석기</ins> 시대이다.</p>

 

 

<details> : 사용자가 직접 조작하여 보거나 숨길 수 있는 부가적인 세부사항(additional details)를 명시할 때 사용함.

<details> 요소는 보통 사용자가 직접 접거나 펼 수 있는 대화형 위젯(interactive widget)을 정의할 때 사용되며, 그 안에는 어떠한 종류의 콘텐츠도 포함될 수 있습니다.

이러한 <details> 요소의 콘텐츠는 open 속성이 설정되기 전까지는 화면에 보이지 않습니다.

 

<summary> 요소는 <details> 요소에서 화면에 보일 제목(visible heading)을 명시할 때 사용합니다.

이 제목을 마우스로 클릭함으로써 <details> 요소를 보이도록 할 수도 있고 숨길 수도 있습니다.

<details>
    <summary>오늘의 환율</summary>
    <ul>
        <li>달러($) : 1,135.90</li>
        <li>유로(€) : 1,284.08</li>
        <li>엔(￥) : 1,014.88</li>
    </ul>
</details>

 

 

<dfn> :  HTML에서 용어(term)의 정의를 나타낼 때 사용함.

HTML 문서에서 해당 용어가 가장 처음 사용될 때 흔히 <dfn> 요소를 사용하여 용어를 정의하게 됩니다.

이때 <dfn> 요소의 부모 요소에는 해당 용어에 대한 정의나 설명이 반드시 포함되어 있어야만 합니다.

<p><dfn>W3C</dfn>는 월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다.</p>

<p><dfn title="World Wide Web Consortium">W3C</dfn>는 
    월드 와이드 웹(WWW)을 위한 표준을 제정하고 관리하는 중립적인 기관입니다.</p>

 

 

<dialog> : 대화 상자(dialog box)나 대화 윈도우(dialog window)를 정의할 때 사용함.

<dialog> 요소는 웹 페이지에서 손쉽게 팝업 대화 상자를 만들 수 있도록 해줍니다.

<dialog open>
    <h2>돼지 저금통</h2>
    <label for="money">지갑에 동전을 얼마 넣을까요?</label>
    <div><input name="amount" id="money" type="number" min="0" step="100" value="100"></div>
    <div><input name="round" type="checkbox">1,000원 단위로 넣기</div>
    <button type="submit" value="saving">동전 넣기</button>
</dialog>

 

 

<dir> : HTML 리스트(list)를 정의할 때 사용함.

HTML5에서는 <dir> 태그를 더 이상 지원하지 않으며, 대신 <ul> 요소나 CSS를 사용해야 합니다.

<dir>
    <li>HTML</li>
    <li>CSS</li>
    <li>자바스크립트</li>
</dir>

<ul>
    <li>파이썬</li>
    <li>자바</li>
    <li>C++</li>
</ul>

 

 

<div> : HTML 문서에서 특정 영역(division)이나 구획(section)을 정의할 때 사용함.

<div> 요소는 여러 HTML 요소들을 하나로 묶어주어 CSS로 스타일을 변경하거나 자바스크립트로 특정 작업을 수행하기 위한 일종의 컨테이너(container)로 자주 사용됩니다. 또한, CSS와 함께 웹 페이지의 레이아웃(layout)을 설정하는데도 종종 사용됩니다.

<style>
    div {
        background-color: orange;
        font-style: italic;
    }
</style>

<p>HTML의 모든 요소는 해당 요소가 웹 브라우저에 어떻게 보이는가를 결정짓는 display 속성을 가집니다.</p>
<div><p>div 요소는 다른 HTML 요소들을 하나로 묶는 데 자주 사용되는 대표적인 블록(block) 요소입니다.</p></div>
<p>span 요소는 텍스트(text)의 특정 부분을 묶는 데 자주 사용되는 인라인(inline) 요소입니다.</p>

 

 

<dl> : 용어(term)와 그에 대한 설명(description)을 리스트 형식으로 정의할 때 사용함.

<dl> 요소는 용어(term)나 이름(name)을 나타내는 <dt> 요소와 해당 용어에 대한 설명을 나타내는 <dd> 요소로 구성됩니다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

 

 

<dt> : 용어와 그에 대한 설명을 리스트 형식으로 보여주는 <dl> 요소에서 용어(term) 부분을 정의할 때 사용함.

<dl> 요소는 용어(term)나 이름(name)을 나타내는 <dt> 요소와 해당 용어에 대한 설명을 나타내는 <dd> 요소로 구성됩니다.

<dl>
    <dt>호박</dt>
    <dd>- 박과의 한해살이 덩굴성 채소</dd>
    <dt>상추</dt>
    <dd>- 국화과의 한해살이 또는 두해살이풀</dd>
</dl>

 

 

 

 

공부를 목적으로 정리한 게시글입니다.

출처 - http://www.tcpschool.com/html-tags/intro