[Htmlベース]Html要素-2の構造と表

🧱 Html構造

Semantic Web 👽 ?

コンテナを上に分けると言うと、

    <div>
      헤더에요
    </div>
    <div>
      메뉴에요
    </div>
    <div>
      본문이에요
    </div>
    <div>
      사이드바에요
    </div>
    <div>
      하단이에요
    </div>

divを使用してコンテナを区切ることができます.しかし、正しい名前がなければ、ヘッダーなのかsidebarなのか分からない.分かりやすいのは仮想ネットワークです.

   <header>
      헤더부분
    </header>
    <nav>메뉴 네비게이터</nav>
    <main>
      <article>본문 부분</article>
      <aside>사이드바</aside>
    </main>
    <footer>하단부분</footer>

textがなくても、どの部分なのか一目でわかります.
dirはブロックタイプの純粋な容器であることを覚えておいてください.これはstyleの組み合わせのためだけです.
spanはdirと同様にコンテナを区切る役割を果たすが,これはインライン形式である.

一つの文章には二つの部分がある.
articleは単独で使用できます.
非articleはsubで区切られています.

   <main>
     <article>
       <h1>Article Heading</h1>
       여긴 아티클의 본문이에요
       샬라
       블라
       <section>
         <h2>Subsection1</h2>
         여긴 서브 섹션1 부분이에요
         샬라
         블라
       </section>
       <section>
         <h2>Subsection2</h2>
         여긴 서브 섹션2 부분이에요
         샬라
         블라
       </section>
     </article>
     <aside>사이드바</aside>
   </main>

細部の装飾はcssでできます.

📜 リストの作成

順序付きリストの場合は、数値を追加することなく自動的に生成されます.
タイプの変更(default=数値)

<ol type=1>
<ol type=a>
<ol type=A>
<ol type=I> // 로마자

    <ol type=1>순서가 있는 목록 - 라면끓이기
      <li>물부터 넣기</li>
      <li>스프 넣기</li>
      <li value=10>면 넣기</li>
      <li>후레이크</li>
    </ol>

valueでは、中央で数値を強制的に変更できます.
追加の用語はこのように説明することができる.

    <dl>목록입니다</dl>
      <dt>이름</dt>
      <dd>설명 샬라~</dd>

🛋️ 表の作成

外線は視覚効果のために増加した.もともとありませんでした.

      <table>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>거주지</th>  
        </tr>
        <tr>
          <td>김구라</td>
          <td>모름</td>
          <td>몰라요</td>
        </tr>
      </table>

:テーブルrow→行を追加します.
＜th＞:デスクトップ
:テーブルデータ
二つを重ねたいなら図のタイトルのように表にタイトルを追加できます.

      <table>
        <caption>학생 표</caption>
        <tr>
          <th>이름</th>
          <th>나이</th>
          <th>거주지</th>  
        </tr>
        <tr>
          <td colspan="2">김구라</td>
          <td>모름</td>
        </tr>
      </table>

tableラベルの下
->タイトルの位置を変更することはcssで可能です.

<thead>
<tbody>
<tfoot>

表も区切ることができます!