Westudy | Week 1

What You Will Learn

1.HTMLとCSSの役割を説明できます。

HTML:Web構造の作成に使用します.ブラウザにどのようなフォーマットで情報を表示すべきかを伝えます.
CSS:Webページの形状を作成します.

2.HTMLでよく使われるラベルの種類と機能を熟知している。

Top10 HTML tag
head:メタデータ
body:ブラウザに表示されるコンテンツ
html:Webページの開始と終了
タイトル:ドキュメントタイトル
meta:文字コードとドキュメントキーワード、要約

<meta charset="utf-8">

div:組織内容
a:リンク
script:コードの挿入または参照(JavaScript)
link:外部ファイルへの接続(CSS)
img:画像

3.CSSの各種スタイル属性を熟知しており、HTML要素に直接適用できる。

Top10 CSS property
font-size:文字数
色:文字の色
margine-top:上部枠線の外側距離
余白-左:左側の外枠
幅はば:幅はば
マージン-下部:下部枠線の外側
friend-right:右枠線の外側
padding-left:左側border内側余白
padding-top:上部border内側余白
Height:高さ

4. .htmlファイルと。cssファイルに接続できます。

htmlファイル内部metaラベル内

<link rel="stylesheet" href="(파일경로)" />

5.学んだ概念を用いて、自己紹介ページを作成することができます。

完了(https://hyeonze.github.io/Westudy/week0/)

Study Keyword

-HTML、CSSって何?なんで?

HTML:Web構造を作成する言語.ブラウザにどのようなフォーマットで情報を表示すべきかを伝えます.
CSS:Webページの外観を作成する言語.ドキュメントの構造とスタイルは別々に管理できます.

-HTML、CSSとJavaScriptの関係

HTML:構造を作成します.
CSS:スタイル.
JavaScript:移動します.

-scriptタグの位置の違い

ブラウザ動作:HTML読み込み-HTMLパケット-DOMツリーの作成-Renderツリーの作成-ブラウザの表示
上の配置:HTMLの分割中にスクリプトをロードし、HTMLを分割します.
headのレイアウト:ドキュメントの初期化(長いブラウザの分割と遅延レンダリング)などの簡単なスクリプト.
bodyに配置:再スクリプト(スライスとレンダリング後にスクリプトを実行)を挿入するのに適しています.
HTML上部:マーケティングツールにソースをインストールします.サイト全体がロードされる前に、アクセス者情報を収集できます.
async&defer(スクリプトプロパティ):HTMLパーティションをロードしながらスクリプトをロード
async:HTMLパケットが完了していなくても、スクリプトのロードが完了したらすぐにスクリプトを実行します.

<script async src="index.js"></script>

defer:すべてのHTMLパーティションが完了した後にスクリプトを実行

<script defer src="index.js"></script>

参考資料

-Webページで発生する可能性のあるイベントのタイプ

Javascriptイベントタイプ
ぶんかつ
≪イベント｜Events｜ldap≫
説明:
マウスイベント
onclick
クリック時
ondbclick
ダブルクリック時
onmouseup
マウスボタンを離すと
onmousedown
マウスボタンを押すと
onmouseover
要素上にマウスポインタを置いた時点
onmouseout
マウスポインタが要素から離れた時点
onmousemove
マウス移動時
キーボードイベント
onkeydown
キーボードキーを押した時点
onkeyup
キーボードのキー
onkeypress
キーボードのキーを押して文字を接続するポイント
フォーカスイベント
onfocus
エレメントがフォーカスを取得した時点
onblur
エレメントがフォーカスを失った時点
ブラウザなどのオブジェクトに関連するイベント
onload
ターゲットのオープン開始時
onupload
目標を達成する.
onmove
ウィンドウを移動するとき
onresize
ウィンドウサイズの変更
フォームイベント(入力フォームに関連)
onchange
input要素の値変更時
onselect
入力フォームのフィールドを選択します.
onsubmit
ボタンをクリックしてフォーム値をコミットします.
onreset
リセットボタンをクリックすると
onabort
ターゲットのロード中に途中で終了します.
onerror
エラーが発生した場合

-イベントとJavaScript関数の関係

イベントが発生すると、ブラウザはイベントハンドラ(リスナー)関数を呼び出します.イベントハンドラを登録する方法は3つあります.
1.イベントハンドラツリー

<button onclick="(함수명)">버튼<button>

2.アクティブハンドルProperty(ドームのプロパティを指定した場合:賛主に感謝)

$btn.onclick = fucntion(){}
//단점 : 재사용시 재할당된 코드만 실행

3.addEventListener

$btn.addEventListener('click', fucntion(){});
//첫 매개변수는 이벤트 타입으로, on을 소거하고 입력함
//둘째 매개변수는 이벤트 핸들러

参考資料
詳細については、ブラウザ構造、仮想DOM