-
당신이 모르는 유용한 HTML5 기능 4 가지HTML 2021. 1. 30. 17:58
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