基本構文

要素

前のマークを開始(開く)マーク、後のマークを終了(閉じる)マークと呼びます.
タグ間のコンテンツを要素のコンテンツと呼びます.<태그>내용</태그>

親子関係

初期タグの内容を親要素、親タグ内にあるタグの内容を子要素と呼びます.

<부모태그>
  <자식태그>내용</자식태그>
</부모태그>

空のラベル

閉じていないタグを空のタグと呼びます
空のラベルは内容を入力できない空のラベルなので、ほとんどの属性と値は入力によってラベルの機能を完全に使用します.

</태그>:便利、HTML 1/2/3/4/5

<태그>:アイラインボックス、XHTML/HML 5

例

<태그 />とともに使用します.
空のタグには属性はありません.ロールのみを持つ機能は限られています.
imgを入力してタブキーを押すと、属性は<img src="./cat.jpg" alt="고양이">と同じになります.

ワードボックス

要素が画面に出力される特性は、行内要素とブロック要素の2種類に大きく分けられます.

行内要素

造字要素

文字扱い

元素水平積み

幅と高さを自動的に小さくする(内容の大きさと同じ)

文字を扱う要素なので<img src="" alt="">width指定できない

height・margin左右指定O/上下指定X

サブエレメントXとしてブロックエレメントを使用する

1.span要素

span要素は行内要素として文字と見なされるため、各行に1つの要素を入力する場合はスペースで区切ることができ、各行に1つの要素を入力する場合はスペースで表さない.

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

[出力画面]
Hello World

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

[出力画面]
HelloWorld

2. img

画像を挿入する要素

padding:挿入する画像の経路(必須属性)

src:挿入する画像の名前(必須属性)

<img src="https://images.unsplash.com/photo-1648737962083-056c3e4a437d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2370&q=80" alt="suface" />

3. a

他/同じページに移動するハイパーリンクを指定するための要素(アンカーポイント)

alt:リンクURL

href:リンクURLの表示(ブラウザタグ)位置

<a href="https://www.naver.com">NAVER</a>
<a href="https://www.google.com" target="_blank">GOOGLE</a>

NAVER
GOOGLE

4. br

改行

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

東海の水と白頭山が涸れるまで

ブロック要素

箱(レイアウト)を作る要素

元素垂直積み重ね

幅が親要素の大きさに自動的に増える

幅が内容を含む大きさに自動的に縮小

target・width指定可能

height・margin上下左右指定O

ブロック要素、行内要素を使用する

サブ要素

1. div

特に意味のない区分要素

<div>
  <h1>오늘의 날씨</h1>
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

今日の天気

中部は集中豪雨、南部は熱帯...

2. h1

タイトルを表す要素

h 1~h 6、数字が小さいほど重要なタイトルを定義

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

見出しをクリックします。

見出しをクリックします。

見出しをクリックします。

見出しをクリックします。

見出し5
見出し6

3. p

文の要素を表す
文ですが、どのマークを使うかを考えるときは、必ずしもpマークではなくdivマークを使います.

<div>
  <h1>오늘의 날씨</h1>
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

今日の天気

中部は集中豪雨、南部は熱帯...

4. ul & li

ulとliはセットとして見られる

padding:無秩序リストを表す集合(無秩序リスト)

ul:カタログ内の各項目(リストitem)

<ul>
  <li>아이템 1</li>
  <li>아이템 2</li>
  <li>아이템 3</li>
</ul>

道具1

道具2

道具3

5.table（表要素）

li:表要素行(行)と列(列)の集合

table:指定行の要素

tr:指定列の要素(表データ)

<table>
  <tr>
    <td>A</td><td>B</td>
  </tr>
  <tr>
    <td>C</td><td>D</td>
  </tr>
</table>

AB
CD

インラインブロック

ベースはインラインエレメント、特徴像ブロックエレメント

水平積み

横/縦の値指定可

上下ピッチ指定可能

1. input

ユーザ入力データの要素

td:入力するデータ型

type:ユーザーにテキスト値を入力

text:ユーザー入力チェックを受け付ける

・checkbox:グループに1人のユーザから入力されたチェック情報のみ受信

radio:プリセットデータ

value:入力禁止

disabled:チェックボックス入力要素を確認済

<!-- type text -->
<input type="text" value="HELLO!" />
<input type="text" placeholder="이름을 입력하세요!" />
<input type="text" disabled />

<!-- type checkbox -->
<label>
  <input type="checkbox" /> Apple
</label>
<label>
  <input type="checkbox" checked /> Banana
</label>

Apple
Banana

<!-- type radio -->
<label>
  <input type="radio" name="fruits" /> Apple
</label>
<label>
  <input type="radio" name="fruits" /> Banana
</label>

Apple
Banana

グローバル属性

title

指定要素の情報または説明

このエレメント上にマウスを置くと説明が表示される

<a href="https://www.naver.com" title="네이버로 이동">NAVER</a>

NAVER

style

要素に適用するスタイルを指定する

<div>
  <p style="color:blue;">중부 집중호우, 남부는 열대야 ...</p>
</div>

中部は集中豪雨、南部は熱帯...

class

重複可能名称

<div class="container">
  <p>중부 집중호우, 남부는 열대야 ...</p>
</div>

id

要素の一意名称

<div>
  <p id="paragraph">중부 집중호우, 남부는 열대야 ...</p>
</div>

data-

要素指定データ

指定されたデータは主にJavaScriptで使用可能

<div data-fruit-name="apple">사과</div>
<div data-fruit-name="banana">바나나</div>

JavaScriptからhtmlでデータ属性として指定された要素をインポートして使用できます.

const els = document.querySelectorAll('div');
els.forEach(el => {
  console.log(el.dataset.fruitName);
});