22/04/18 HTMLの概要と重要な概念

📚HTMLの概要

📖 基本構文構造と関係

要素の2つの構造
1.<開始タグ属性=値>内容
2.<空のラベル属性="値"/>요소(element)はHTMLを構成する基本単位である.
基本的には<시작태그>と</끝태그>の対からなり、間には内容が含まれている.属性で表現できるラベルは<빈태그 />と呼ばれています.
ラベル機能を拡張するために、속성(attribute)および값(value)が使用される.속성は必須属性と選択属性に分けられ、この要素を用いて記入しなければならない属性は필수 속성、必要に応じて記入する属性は선택 속성である.

<태그1>  				# 부모 요소 / 상위(조상) 요소
	<태그2>				# 자식 요소
		<태그3></태그3>	# 하위(후손) 요소
	</태그2>
</태그1>

<ラベル1>を基準として、<ラベル2>をサブエレメント、<ラベル3>をサブ(子孫)エレメントとします.
<ラベル2>を基準として、<ラベル1>を親、<ラベル3>を子とします.
<ラベル3>を基準として、<ラベル1>を親(親)要素、<ラベル2>を親要素とします.

📖 inlineとblock要素の特徴(文字vsボックス)

テキスト>インライン要素(inline):テキストを作成する要素
ボックス>ブロック要素(block):ボックス(レイアウト)を作成する要素
※CSS設定と密接な関係があるので、慎重に対応してください.
画面上の要素の出力特性に応じて、글자と상자に分けることができる.
[文字]行内の要素の特徴
1.要素は左から右へ수평으로 쌓인다である.
2.コンテンツのサイズによって、高さと幅が自動的に変化します.したがってheight와 width를 지정할 수 없다.
3.여백(margin, padding)을 설정할 때上下、좌우만 적용は適用されません.
4.行内の要素はブロック要素のサブ要素として使用できません.
5.常に文字数に合わせてコンパクトにしたい.
ボックスブロック要素のフィーチャー
1.元素は上から下へ수직으로 쌓인다.
2.コンテンツの크기(heigth, width)를 지정할 수 있다.
3.여백(margin, padding)을 상하좌우 다 설정であってもよい.
4.ブロック要素は、ブロック要素/行内要素のサブ要素として使用できます.
5.左右の大きさの特徴は、親の要素の大きさをできるだけ増やすことです.上下の大きさの特徴は、内容の大きさに合わせて縮小したいことです.
ライン内ブロックのプロパティ
1.エレメントが垂直に積み上げられます.(インライン機能)
2.heightとwidthを指定できます.(ブロックの特徴)
3.余白と余白は上下左右に指定できます.(ブロックの特徴)
※インクライン-ブロックは文字要素ですが、箱要素のいくつかの特性の要素があります

📖 HTML要素のクリーンアップ

ブロック要素<div></div>:区別する要素<h1~6></h1~6>:タイトル(Heading)は、数字が小さいほど大きくなります.<p></p>:文書(Paragraph)<ul></ul>:シーケンスリストのないセット<ol></ol>:整列リストの集合<hr />:水平線(horizon)
行内要素<span></span>:区別する要素<img/>:画像を挿入するには、srcとaltが必要です.<a></a>:別のページ/同じページに移動するハイパーリンク(Anchor)を指定します.hrefは必須属性です.<label>:inputのタイトル<br />:改行(中断)
場合によっては、変化(inline、block)は要素です.input:データを入力するための要素で、タイプは必須属性です.

📖 グローバル属性

title="설명" 	: 요소의 정보나 설명을 지정할 때 사용
style="스타일"	: 요소에 적용할 스타일을 지정할 때 사용
class="이름"		: 요소를 지칭하는 중복 가능한 이름
id="이름" 		: 요소를 지정하는 중복 불가능한(=고유한) 이름
data-이름="데이터값"	: 요소에 데이터를 넣어줄 때 사용 (JS에서 주로 사용)

各要素には使用可能な属性があります.これとは異なり、どの要素でも使用できる属性をグローバル属性と呼びます.
※data-이름の使い方を以下に簡単に示します.

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

// JS 영역
const els = document.querySelectorAll("div");
els.forEach(el => {
	// fruit-name을 fruitName으로 사용하고 있다.
	console.log(el.dataset.fruitName); 
});