TIL 03.29

24179 ワード
おしゃれなライオンのように html TIL テキストリンク

1.コード断片の設定

  • Cmd + Pコマンドパレットを開く
  • >snippet入力後「ユーザーコードセグメントの設定」をクリックします
  • html.jsonファイルを開いて修正(htmlエントリを見つければいい)
    • {
	"Print to console": {
			"prefix": "htmlko",
			"body": [
					"<!DOCTYPE html>",
					"<html lang=\"ko\">",
					"<head>",
					"    <meta charset=\"UTF-8\">",
					"    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">",
					"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
					"    <title>$1</title>",
					"</head>",
					"<body>",
					"    $2",
					"</body>",
					"</html>"
			],
			"description": "한국어 페이지용 html 템플릿"
	}
}
  • 設定完了後、htmlファイルにhtmlkoを入力すると、コードは
    • を一時停止します.
  • ! + Tab使用時言語がenに設定されているため
    • に設定されている
  • htmlko + Tab入力時にtitle上にカーソルを置く
  • タイトル入力後にTabキーを押してbodyに移動するように設定

    • 2. URL, IP, PORT



    1️⃣ URL


    Uniform Resource Locater
    Webサイト
    ex) https://www.naver.com
    こうぞう
    1.プロトコルタイプ
    2.リソース所在サーバーのIPアドレス、ドメインアドレス、ポートアドレス
    3.資源の場所

    2️⃣ IP


    Internet Protocol address
    コンピュータネットワーク内の各デバイスの一意の番号
    ex) 173.194.126.240
    上記IPアドレスフォーマットの記憶や区別が困難であるため、DNSによりドメインアドレスに変換する
    → www.google.com

    3️⃣ PORT


    ネットワーク・サービスまたは特定のプロセスを識別する論理ユニットと番号で区切られたポート番号.
    ポート番号はIPアドレスとともに書き込まれ、対応するプロトコルによって使用される.
    ex) ftp://000.000.000.000:80のURLの中の90このポート番号
    共通ポート番号
  • 20: FTP(data)
  • 80: WWW, HTTP
  • 443:TLS/SSL HTTP

    • 3. HTML Living Standard


    HTML文法等の標準
  • HTML Living Standard
    • The HTML Living Standard (sometimes informally called HTML5). The HTML specification has been a living document without version numbers since 2011. It includes both HTML, the core markup language for the web, and a number of related APIs.
    HTML Living Standardは、非公式にHTML 5と呼ばれることが多い.HTMLのスペックシート(specification)は2011年からバージョン番号のない活基準として存在している.HTML Living Standardには、Webのコアマークアップ言語HTMLと様々な関連APIが含まれています.
    HTML 5という名称は使われなくなりましたが、あちこちで使われています.(HTMLアイコンだけ見ればわかります.)

    4. Grouping Content



    1️⃣ ol, ul, li

    <ol>ordered list
    順序付きリスト<ul>unordered list
    無秩序リスト<li>list item
    アイテムのリスト

    2️⃣ dl, dt, dd

    <dl>definition list
    定義リスト<dt>definition term
    定義する用語<dd>definition description
    用語集

    3️⃣ div

    divレイアウトの分割
    サブエレメントを組み合わせてスタイルを変更できます
    article、section、header、navはdivと同じ役割を果たしています
  • <section>論理的に関係のあるものを組み合わせるために使われる
  • <article>独立したコンテンツの処理
    • divで表装するのは淘汰の近道だ
    一般的な内容はsectionの形式で紹介します

    4️⃣ figure, figcaption

    figure画像とグラフを囲むタグfigcaption画像またはグラフのタグにタイトルを追加します.
  • コード
    •   <figure>
    <img width="auto" height="100px" src="elephant.jpg" alt="엄마 코끼리와 아기 코끼리">
    <figcaption>
      관심받고 싶어 하는 아기
    </figcaption>
  </figure>
  • 結果

    気になる子が欲しい

    • 5️⃣ p


    段落タグ
    完全な段落
    改行に使用しない

    6️⃣ pre


    HTMLファイルで作成したコンテンツを画面に表示
  • コード
    • <pre>
	fuction 제곱(x) {
 		return x**2;
	}
</pre>
  • 結果
    	fuction 제곱(x) {
 		return x**2;
	}

    • 7️⃣ blackquote

    인용구문

    • 코드
    <blockquote>
    <p>소년이여, 야망을 가져라!</p>
    <cite>윌리엄 스미스 클라크</cite>
</blockquote>
  • 結果
    少年よ、雄大な志を持って!
    ウィリアム・スミスクラーク

    • 8️⃣ main


    ドキュメントの主な内容

    9️⃣ hr


    横線のタグを挿入
    コンテンツグループではなく外部で使用
    銀行券は使用しません(表示画面が違います)
    タグは以前は<hr/>に閉じる必要があったが、現在は閉じる必要はない(brも同様)
  • コード
    • <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit.</p>
<hr>
<p>Voluptatem harum non tempora laboriosam.</p>
  • 結果Lorem、ipsum dolor sit amete一致でelitが表示されます.
    Voluptatem harum non tempora laboriosam.

    • 5.emmet構文

    h${hello}*6:h 1からh 6のラベルを自動的に完了
      <h1>hello</h1>
  <h2>hello</h2>
  <h3>hello</h3>
  <h4>hello</h4>
  <h5>hello</h5>
  <h6>hello</h6>
    h1+h2:h 1ラベルとh 2ラベルを同時に生成
        <h1></h1>
    <h2></h2>
    h1>p:h 1内にpタグを作成する
        <h1>
      <p></p>
    </h1>
    h1+h2+p:h 1 h 2 pラベルを順次作成
        <h1></h1>
    <h2></h2>
    <p></p>
    h1{hello}:h 1ラベルにhello文字を入力
        <h1>hello</h1>
    h1>p+p:h 1ラベル内に2つのpラベルを作成する
        <h1>
      <p></p>
      <p></p>
    </h1>
    h1#one:id値oneのh 1ラベルを作成
        <h1 id="one"></h1>
    h1.one:oneというクラス名h 1タグを作成
        <h1 class="one"></h1>
    .one:oneという名前のdivタグを作成
        <div class="one"></div>
    #one:id値oneのdivラベルを作成
        <div id="one"></div>
    p[a="value1" b="value2" c="1"] 
    <p a="value1" b="value2" c="1"></p>
    h1.one.two#three 
    <h1 class="one two" id="three"></h1>
    table>(tr>td*4)*3 
        <table>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    C#で動作タイムアウト検出を実行
    C#でコンピュータの再起動、シャットダウンとログアウトを制御する