HTML없이는 웹을 상상할 수 없습니다.
웹 개발자가 되려면 가장 먼저 배워야 할 것입니다.
그러나 여전히 일부 사람들이 HTML의 힘을 과소평가하는 것을 봅니다.
다른 특별한 기능들을 알지 못하기 때문입니다.
1. Datalist
이 태그는 미리 정의된 옵션 목록을 지정하고 사용자가 옵션을 더 추가할 수 있도록 합니다.
autocomplete(자동 완성) 기능을 제공하기 때문에 자동완성 기능으로 원하는 옵션을 얻을 수도 있습니다.
<body>
<form action="" method="get">
<label for="fruit">Choose your fruit :</label>
<input list="fruits" name="fruit" id="fruit">
<datalist id="fruits">
<option value="Apple">
<option value="Orange">
<option value="Banana">
<option value="Mango">
<option value="Avacado">
</datalist>
<input type="submit">
</form>
</body>2. Details
Details 태그는 사용자에게 주문형 세부 정보를 제공합니다.
따라서 이 태그는 주문형 정보가있는 목차를 표시하려는 경우에 사용할 수 있습니다.
열리면 확장되어 내용이 표시됩니다.
Summary 태그는 표시되는 Details태그의 제목을 지정하는 데 사용됩니다.
<body>
<details>
<summary>Click to get the user details</summary>
<table>
<tr>
<th>Name</th>
<th>Date of birth</th>
<th>Job</th>
</tr>
<tr>
<td>John</td>
<td>March 19</td>
<td>Accountant</td>
</tr>
</table>
</details>
</body>여담으로 Notion에서 > 를 사용하여 확장하면 나오는 모양새와 비슷합니다.
3. Output
계산결과를 나타내는 태그입니다.
일반적으로 이 요소는 일부 계산의 텍스트 출력을 표시하는 데 사용되는 영역을 정의합니다.
<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
<input type="number" id="a" value="0">
* <input type="number" id="b" value="0">
= <output name="x" for="a b"></output>
</form>실시간으로 노출도 됩니다.
4. Content editable
contenteditable 속성을 true로 하면 어떠한 요소들도 편집할 수 있습니다.
<div>
<h1> Employees list </h1>
<ul class="content-editable" contenteditable="true">
<li> 1. Jhon </li>
<li> 2. Mehdi </li>
<li> 3. Brad </li>
</ul>
</div>
보시다시피 HTML은 개발자로서 혜택을받을 수있는 많은 유용한 기능을 가지고 있기 때문에 사용하기에 훌륭한 도구입니다.
HTML이 제공 할 수있는 다른 기능이 더 있으므로 HTML의 힘을 과소 평가하지 마세요.
출처 : medium.com/javascript-in-plain-english/4-useful-html5-features-you-probably-dont-know-a4be822378d0
'HTML' 카테고리의 다른 글
| Shadow Root와 상속에 대하여 (0) | 2021.09.21 |
|---|---|
| strong 태그와 em 태그의 차이 (0) | 2021.06.27 |
| Template 엘리먼트 사용 (0) | 2020.07.25 |
| 닫기 이벤트 버튼에 대하여.. button vs a (0) | 2020.05.31 |
| <blockquote>, <q>, <cite> 올바르게 사용하기 (0) | 2020.03.15 |
댓글