Web Development (2)

Web Development (2)

1.HTMLベース

!DOCTYPE htmlドキュメントのページhtmlバージョンの指定
*public ~ : XHTMLhtmlドキュメントの全範囲/htmlドキュメントがどこから始まり、どこから終わるかを示すロールです.headドキュメント内の情報の範囲(非表示の情報)を表します.
ex)Webブラウザで説明する必要があるタイトル、説明、使用するファイルの場所、スタイルなどのWebページに表示されない情報.bodyドキュメント構造の範囲を表す
ex)ユーザ画面に表示されるフラグ、タイトル、ツイッター、ナビゲーション、メニュー、ボタン、画像などのWebページの表示構造の範囲を作成します.

2.パス

상대경로…/周囲…/親フォルダ

ex)
cssファイル条件
../images/image.png=/image/png(ポート5500の絶対パス、前省略)

절대경로http(s) =/

ex)
リモート・ロード
https ://heropy.blog/images/heropy.png

*VS右下ポート5500=ローカル環境

3.HEADベース

CSS&JSへの接続
1)リンクタブ(CSS)

<link rel="stylesheet" href="./main.css">

2)JS(scriptタブ)

<script> src="./main.js"</script>

style
htmlドキュメントに直接スタイルを作成する(CSS X)

  <style>
    div{
      text-decoration: underline;
    }

title
ドキュメントタイトル

<title>anthony</title>

link
外部ドキュメントのインポートとリンク

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
<link rel="stylesheet" href="./css/main.css">
  ㅤㅤ
rel(relation) : 가져올 문서와의 관계
href(hypertext reference) : 가져올 문서의 경로

script
1)Javaスクリプトファイルのインポート(src O)

<script src="./js/main.js"></script>

2)htmlドキュメントにJavaスクリプト(src X)を記述する

console.log 직접 입력

メタについて
1)文字コード方式

<meta charset="UTF-8">

2)情報タイプ(name)&viewport(ページ出力領域-移動のみ)

<meta name="viewport" content="width=device-width, initial-scale=1.0">

3)情報内容(値、内容)

<meta http-equiv="X-UA-Compatible" content="IE=edge">
제작자, 내용 키워드, 브라우저 혹은 검색엔진이 알아야할 것

4.BODY基礎

リンク
aboutでインデックスファイルがある場合は自動的に検索

<a href="https://naver.com">NAVAER</a>
<a href="/about/about.html">About</a>
<a href="/about"></a>

ホームに戻る

<a href="/"></a>

*Web上のliタグ:hov(Hover:CSSセレクタセクションで学習した複数の仮想クラスセレクタを一時的に適用するメニュー)

5.CSS基礎

CSSの初期化
reset.css.cdn

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/reset.min.css">
다른 link보다 먼저 해줘야함

tabキーを押して直接表示するテクニック
div>ul>li*s{$}

<div>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>

본 게시글은 fastcampus 박영웅강사 수업을 듣고 개인적으로 정리한 내용임을 밝힘.