8 실제로 매우 유용한 알려지지 않은 HTML 태그

중요한 것으로 간주되는 HTML 태그는 일반적으로 사용되는 태그이지만 대부분의 사람들이 사용하지 않고 동등한 CSS를 작성하는 데 시간을 낭비하는 중요한 HTML 태그가 있는 경우는 아닙니다.


시작하자

1.<s> 태그<s> 태그는 더 이상 올바르지 않거나 정확하지 않거나 관련이 없는 텍스트를 지정합니다. 텍스트가 표시될 것입니다.
S는 취소선을 의미합니다.
일반적으로 전자 상거래 웹 사이트에서 가격 하락을 나타내는 데 사용됩니다.

<h4>Price
    <s>£15</s>
    <span>£9</span>
</h4>

사람들은 종종 span 태그를 사용한 다음 CSS에 텍스트 장식 속성을 추가하는 것을 선호하지만 이것은 매우 편리합니다.

2. <ruby> , <rt> 및 <rp> 태그
<ruby> HTML 요소는 일반적으로 동아시아 문자의 발음을 표시하는 데 사용되는 기본 텍스트 위, 아래 또는 옆에 렌더링되는 작은 주석을 나타냅니다. 다른 종류의 텍스트에 주석을 다는 데에도 사용할 수 있습니다. 따분한 CSS 작성을 방지합니다.

 <ruby>帶翅膀<rt>Carmine</rt></ruby>
 <ruby>的老鼠<rt>Falcone</rt></ruby>

3.<details> 태그
<details> 태그는 사용자가 요청 시 열고 닫을 수 있는 추가 세부 정보를 지정합니다.
태그는 종종 사용자가 열고 닫을 수 있는 대화형 위젯을 만드는 데 사용됩니다. 기본적으로 위젯은 닫혀 있습니다. 열리면 확장되고 내용물이 표시됩니다.

<details>

  <summary>Click me to see the Answer</summary>
  <p>
      The Ability to speak doesn’t make you intelligent
.</p>
</details> 

4.<optgroup> 태그
<optgroup> 태그는 <select> 요소(드롭다운 목록)에서 관련 옵션을 그룹화하는 데 사용됩니다.
이것은 실제로 매우 유용한 것입니다. 우리의 스타일을 추가합니다.
태그를 선택하고 조금 더 매력적이고 체계적으로 만듭니다.
옵션 목록이 길면 사용자가 관련 옵션 그룹을 더 쉽게 처리할 수 있습니다.

<form >
  <label for="swords">Choose a Sword:</label>
  <select name="swords" id="swords">
    <optgroup label="Valyrian Steel">
      <option value="Oathkeeper">Oathkeeper</option>
      <option value="Widows Wail">Widows Wail</option>
    </optgroup>
    <optgroup label="Knifes">
      <option value="mercedes">Needle</option>

    </optgroup>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

5.<meter> 태그<meter> 태그는 알려진 범위 또는 분수 값 내에서 스칼라 측정을 정의합니다. 이것은 게이지라고도 합니다.
예를 들어 33(즉, 낮은 값)보다 작은 값을 주면 미터의 색상이 높음 및 최적의 경우 유사하게 빨간색으로 변할 경우 미터의 색상이 변경되어야 하는 퍼센트/값을 정의할 수 있기 때문에 매우 기능적입니다. ,
CSS를 사용하는 경향이 있는 것처럼 긴 CSS 시트를 작성하게 될 수 있으므로 이것은 매우 유용한 HTML 태그입니다.<meter> 태그를 사용하면 많은 시간과 노력을 절약할 수 있습니다.
예: 디스크 사용량, 쿼리 결과의 관련성 등

   <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="20">
    at 50/100
</meter> 5L</p>

    <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</meter> 5L</p>
    <p> 0L <meter id="fuel"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="80">
    at 50/100
</meter> 5L</p>

6.<progress> 태그<progress> HTML 요소는 일반적으로 진행률 표시줄로 표시되는 작업 완료 진행률을 나타내는 표시기를 표시합니다.
보통 저는 많은 사람들이 진행률 표시줄을 만들기 위해 CSS를 작성하는 것을 보았습니다. 일부는 별도의 구성 요소를 만들기도 했습니다.
반응하다

<label for="file">File progress:</label>

<progress id="file" max="100" value="70"> 70% </progress>

7.kbd 태그<kbd> 태그는 키보드 입력을 정의하는 데 사용됩니다. 내부 콘텐츠는 브라우저의 기본 모노스페이스 글꼴로 표시됩니다.
대부분의 사람들이 대신 스팬 스타일을 선택하기 때문에 이것이 더 이상 사용되지 않는다는 것을 알았을 때 놀랐습니다.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

8.bdo 태그
BDO는 Bi-Directional Override의 약자입니다.<bdo> 태그는 현재 텍스트 방향을 재정의하는 데 사용됩니다.
게임이나 애니메이션을 만드는 데 사용할 수 있습니다. 이것은 드문 HTML 태그 중 하나이며 아마도 가장 적게 사용됩니다.

<p><bdo dir="rtl">May the force be with you
.</bdo></p>

이 글을 읽어주셔서 감사합니다 좋은 하루 되세요