[Front-End] HTML & CSS


INTRO


1.言語

  • HTML:構造化
  • JS:生き生き
  • CSS:装飾
  • 2.Webブラウザ


    1) W3C


    https://www.w3.org/
    :Webブラウザ、ページ推奨
    ->W 3 C validatorを使用してWeb規格に適合しているかどうかを確認できます

    2)ネットワークアクセス性研究所


    https://www.wah.or.kr:444/Participation/guide.asp
    :開発者のWebコンテンツアクセスガイドライン

    3. VS CODE


    私は生活のコードの授业の上で书いたことがあって、初めて韩国语のパッチをダウンロードする方法を知っていて、ほほほ、早めに理解するべきです...

    1)拡張プログラム


    ex)韓国語パッチ、beautify、live server(彼はすでにやっています)

    2)ショートカットキー


    ファイル>プリファレンス>ホットキー(File>Preferences>Hotkey)

    4.イメージ


    >>ビットマップvsベクトル


    1)ビットマップ


    :画面レンダリング形式で出力される密ピクセルイメージ
    ex) jpg, png, gif

    2)ベクトル


    :点、線、面の位置によってスクリーン上でレンダリングされ、画像は破壊されませんが、大量の演算が必要です.
    ex) svg

    HTML


    1.構文


    1)ラベル:tag


    :矢印カッコ「<>」で実行する内容を含むHTMLのコア構文
    https://www.advancedwebranking.com/html/
    <TAG> 내용 </TAG>
    : 열리고 닫히는 구조

    2)属性:attribute


    :ラベルの情報だけでは不十分であり、情報不足を補うために使用できる
    <TAG 속성=""> 내용 </TAG>

    3)親子構造


    :親ラベルに別のラベルが含まれる構造(親ラベル-子ラベル)
    <PARENT>
    	<CHILD></CHILD>
    </PARENT>

    4)ドキュメントのフォーマットを指定する


    :DOCTYPEドキュメントフォーマットの指定

    2.主要ラベル-HEAD


    1) TITLE


    :Webページのタイトルを表すラベル(タブの名前)
    <head>
    	<title> 벨로그 </title>
    </head>

    2) META


    :その他の情報を表すタグ

    >>主な属性


    : charset, name, content
    <head>
    	<meta charset="UTF-8">
    </head>

    3) LINK


    :外部文書のリンク(CSS文書)

    >>主な属性


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

    4) STYLE


    :CSSを使用せずにHTMLを直接使用

    5) SCRIPT


    :CSSをHTMLに合成する場合は、SCRIPTタグ内で作成するだけです

    3.主要ラベル-BODY


    1) DIV


    :意味のないラベル、何かを包んだり縛ったりするためのラベル

    2) IMAGE


    :画像のタグを挿入

    >>主な属性


    : src, alt

    CSS


    1.スタイルラベル



    クリーンアップ用語

  • セレクタ:本明細書で宣言されるアプリケーションは、選択されたセレクタタイプに応じて、タグセレクタ、クラスセレクタ、idセレクタとも呼ばれる特定の部分である.
  • Declaration:表現したい内容を示す
  • プロパティ:プロパティ
  • Value:値
  • 2.属性タイプ


    1)サイズ


    >>横と縦

  • width:幅
  • height:垂直幅
    ->単位:px
  • >>フォント

  • font-size:フォントサイズ
  • div{
    	width: 300px; height: 600px;
        // 요소의 가로너비: 너비값;
        font-size: 16px;
    }

    2)マージン


    div{
    	margin-top: 20px;
        margin-right: 10px;
        margin-botton: 15px;
        margin-left: 20px;
        padding: 7px;
        
    }

    3)色

  • color:フォント色
  • 背景-色:要素色
  • div {
    	color: blue;
    	background-color: red;
    }