HTML

フロントエンド開発を一度に完了するエントリーレベルのパッケージオンライン

[文字と箱]

要素が画面に出力される特性は、大きく2つに分けられます.
≪行内要素｜Line Elements｜oem_src≫:テキストを作成する要素.
ブロック(Block)要素:ボックス(レイアウト)を作成する要素.

<span>Hello</span>
<span>World</span>

Hello
World
要素は水平に積み重ねられた特性を持ち、改行はスペースに入ることができます.
代表的な内線要素.これは本質的に何も見えないコンテンツ領域を設定するための用途である.

<span>Hello</span><span>World</span>

上のように貼って使うと、
HelloWorld
上のように、スペースなしで入力できます.
インライン要素は1つの字と見なされるからです.
字には縦横寸法があってはいけない.
また、コンテンツのサイズを自動的に縮小します.

<span style=“margin: 20px 20px;”>Hello</span>
<span style=“padding: 20px 20px;”>World</span>

margin=要素の外部余白を指定するCSS属性
padding=要素の内部余白を指定するCSSプロパティです.
どちらもspanに適用される場合、左右のみで、上下の余白には適用されません.
†††span div†は使用できません
字の中に枠(ブロック要素)を入れてはいけないという意味です.

[箱]

<div>Hello</div>
<div>World</div>

Hello
World
代表的なブロック要素.これは本質的に何も見えないコンテンツ領域を設定するための用途である.
≪幅｜Width｜oem_src≫:親要素のサイズが自動的に増加します.
縦:コンテンツを含むサイズに自動的に縮小

<div style=“width: 100px;”>Hello</div>
<div style=“height: 40px;”>World</div>

width=要素の水平幅を指定するCSSプロパティです.
height=要素の垂直幅を指定するCSSプロパティです.
Helloは100 pxの横幅を持つ.
世界には40 pxの縦幅がある

<div style=“margin: 10px;”>Hello</div>
<div style=“padding: 10px;”>World</div>

エッジと塗りつぶしも可能です.
ブロック要素はサブ要素で、ブロックも行内要素も含まれます.

<div><div></div></div>
<div><span></span></div>

上記の例のように、両方とも可能です.

HTMLコアのクリーンアップ

ブロック要素

<div></div>

(division)特に意味のある区分要素はありません.

<h1></h1>

タイトルを表す要素.1～6まで待機します.数字が小さいほど、定義されたタイトルが重要になります(h 1大テーマ、h 2中間テーマ、h 3小テーマ...)

<p></p>

文の要素を表す.これは、単一の文字ではなく文字からなる文であるため、行内要素ではなくブロック要素であることを意味します.

<ul>
   <li> ... </li>
   <li> ... </li>
   <li> ... </li>
</ul>

順序を必要としないリストの集合を表します.
(List Item)リスト内の各項目

<ul>
	<li>사과</li>
	<li>배</li>
	<li>망고</li>
	<li>오렌지</li>
</ul>

りんご

倍

マンゴー

オレンジ

<img src=“img/weather.jpg” alt=“12호 태풍” />

画像の要素を挿入します.
src=挿入する画像のパス
alt=挿入する画像の名前
画像が出力されない場合、altの画像名が出力されます.
ex)

<a href=“https://www.naver.com”>NAVER</a>
<a href=“https://www.google.com” target=“_blank”>Google</a>

NAVER
Google
(Anchor)別のページ/同じページにジャンプするハイパーリンクを指定する要素.
href=リンクURL
target=リンクURLの表示(ブラウザタブ)位置
ex)target=「blank」の場合、新しいタブでクリックしたリンクが開きます.

<span>동해물</span>과 백두산이 마르고 닳도록

(span)特別な意味のない区別のための要素
< br >
(Break)改行要素.Enterみたい!

<label>
	<input type=“checkbox” /> Apple
</label>
<label>
	<input type=“checkbox” /> Banana
</label>

ラベル可能要素(input)のタイトル.
=checkboxユーザーの入力を受け入れる

<input type=“checkbox” checked />

チェックボックス入力要素が検出されました

<label>
	<input type=“radio” name=“fruits” /> Apple
</label>
<label>
	<input type=“radio” name=“fruits” /> Banana
</label>

チェックするかどうかは、グループから1人のユーザー入力のみを受信します.(選択1)
「フルーツ」というグループ

行(テキスト)要素とブロック(ボックス)要素

<input type=“text”/>

ユーザーがデータの要素を入力します.

<input type=“text” value=“HEROPY!” />

プリインプット値

<input type=“text” placeholder=“이름을 입력하세요!” />

ユーザーに入力を求める値(データ)

<input type=“text” disabled />

入力要素の無効化

表要素(table)

<table> … </table>

表要素、行および列の集合.

<tr> … </tr>

(Table Row)行の要素の指定

<td> … </td>

「(Table Data)列」(Column)の要素を指定

<tb colspan=“2”>

(Column Span)は、どのくらいの列を展開するかを示します.セルのマージとして表示

<!—Comment—>

変更または説明の作成(コメント)
ショートカットキー:Cmd+/

グローバル属性

<태그 class=“이름”></태그>

要素の重複可能な名前

<태그 id=“이름”></태그>

要素の一意の名前

<태그 data-이름=“데이터”></태그>

要素へのデータの割当て