TIL 2022-03-23 HTML 요소

좀 마이너한 요소들을 공부해보려고함

 

fieldset

 

<form>
  <fieldset>
    <legend>Choose your favorite monster</legend>

    <input type="radio" id="kraken" name="monster">
    <label for="kraken">Kraken</label><br/>

    <input type="radio" id="sasquatch" name="monster">
    <label for="sasquatch">Sasquatch</label><br/>

    <input type="radio" id="mothman" name="monster">
    <label for="mothman">Mothman</label>
  </fieldset>
</form>

이렇게 label과 여러 컨트롤을 묶을때 쓴다.

 

label과 컨트롤이 있다는 것은 form에 있을 가능성도 높음!

 

legend를 통해 이 그룹의 설명을 할수도 있음

 

기본적으로 2px 여백과 내부여백, block 단위를 가짐

 

 

 

aside

 

말 그대로 주제와 직접적으로 연관이 없고 간접적으로 연관이 있을떄 쓴다.

 

<article>
  <p>
    디즈니 만화영화 <em>인어 공주</em>는
    1989년 처음 개봉했습니다.
  </p>
  <aside>
    인어 공주는 첫 개봉 당시 8700만불의 흥행을 기록했습니다.
  </aside>
  <p>
    영화에 대한 정보...
  </p>
</article>

 

caption

 

table의 설명, 혹은 제목을 뜻함.

 

<table>
    <caption>He-Man and Skeletor facts</caption>
    <tr>
        <td> </td>
        <th scope="col" class="heman">He-Man</th>
        <th scope="col" class="skeletor">Skeletor</th>
    </tr>
    <tr>
        <th scope="row">Role</th>
        <td>Hero</td>
        <td>Villain</td>
    </tr>
    <tr>
        <th scope="row">Weapon</th>
        <td>Power Sword</td>
        <td>Havoc Staff</td>
    </tr>
    <tr>
        <th scope="row">Dark secret</th>
        <td>Expert florist</td>
        <td>Cries at romcoms</td>
    </tr>
</table>

caption은 table의 첫번쨰 자식이여야함!

 

datalist

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

option 요소들을 담음!

 

추천하거나 고를만한거를 담는데에 씀

 

menu, menuitem

 

말그대로 메뉴와 이를 구성하는 메뉴 아이템임

<menu type="context" id="dropdown-menu">
  <menuitem label="Action">
  <menuitem label="Another action">
  <hr>
  <menuitem label="Separated action">
</menu>

type으로는 list와 context가 있는데, menu를 nested하는 경우에는 context가 기본 관측값임.

 

<menu>
  <li>
    <button type="menu" value="File" menu="file-menu">
    <menu type="context" id="file-menu">
      <menuitem label="New..." onclick="newFile()">
      <menuitem label="Save..." onclick="saveFile()">
    </menu>
  </li>
  <li>
    <button type="menu" value="Edit" menu="edit-menu">
    <menu type="context" id="edit-menu">
      <menuitem label="Cut..." onclick="cutEdit()">
      <menuitem label="Copy..." onclick="copyEdit()">
      <menuitem label="Paste..." onclick="pasteEdit()">
    </menu>
  </li>
</menu>

 

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/menuitem#browser_compatibility

<menuitem> - HTML: HyperText Markup Language | MDN

 

근데 menuitem은 웹표준에 뒤쳐진듯 deprecated?

 

main

 

main는 body의 주요 콘텐츠를 의미함