HTMLの基本概念を整理する

BoxとItem

HTMLのコンポーネントを拡大します.
ユーザーが見ることができないBoxと
ユーザーに表示されるItemに分けることができます.
Boxの要素には以下のマークがあります.

<Header>, <footer>, <section>, <article>, <nav>, <div>

Itemの要素には次のタグがあります.

<a>, <button>, <input>, <label>, <img>

HTML画面はBox単位で、タイトル、ナビゲーションバー、エッジバー、メイン(セッション-エンティティ)、ツイッターに分けられます.

Tagのコンポーネント

タグ要素の構成はOpentag<>と終了tagのペアで作成され、コンテンツの<>コンテンツが含まれます.

<div>Content</div>

Block級、Inline級

タグのタイプはBlockレベルタグとInlineレベルタグがあります.
以下の場合、ラベル内の内容が並べて表示されます.

<span>Hello</span> <span>world!</span>

👉 結果例:Helloworld!
上で使用したラベルはInlineレベルのラベルなので、内容は並べて表示できます.
逆に、次のタグを使用すると、タグの内容の長さにかかわらず、
並べて表現するのではなく、改行して表現します.

<div>Hello</div> <div>world!</div>

👉 結果例:Helloworld!
上で使用したラベルはblockレベルのラベルなので改行して表示します.

Tagのプロパティ

タグには、次のような属性があります.

<ol>
<li></li>
<li></li>
<li></li>
</ol>

他のアトリビュートを入力しない場合は、次のような順序のリストが作成されます.2. 3.の順番が自動的に並びます.
👉 結果の例:

<ol type="i">
<li>첫번째</li>
<li>두번쨰</li>
<li>세번쨰</li>
</ol>

属性をtype="i"と指定すると、次のようにローマ数字順にリストが作成されます.
👉 結果の例:

最初の

2 2 2番目の

第3の

------------------------------------------------------------------------------
学習記録の内容はDREAMコードサイトEllyカリキュラムに基づいて整理されている.
ソース-https://academy.dream-coding.com/