スパルタエンコーディングクラブ[Web開発]1週目

7723 ワード
テキストリンク
Web開発第1週目のトレーニング目標
  • サーバとクライアントの役割について説明します.
  • HTML、CSSの基礎知識を知る.起動テープを持ってきます!
  • Javascriptの基礎文法を熟知しています.
    • 1)サーバとクライアント
    任意のWebページで変更したい場所を右クリックし、[チェック](Check)ボタンをクリックします.
    そして私が欲しい味に変えます.

    (ガイドバーホームボタン->エンコード)
    これを変えても大丈夫ですか?

    大丈夫


    変更内容は私のパソコンでしか認識できず、リフレッシュした瞬間に元に戻ります.

    (リフレッシュ後原状回復)
    これは一体何だろう
    そうですか
    これがサーバとクライアントの関係です.

    クライアントがサーバに情報を要求すると、サーバはクライアントにその情報を表示します。


    2)HTML、CSSの基礎知識を理解し、ガイドバーの使用を理解する!


    HTMLはWebスケルトンの公開、CSSはWeb装飾用
    CSSは、HTMLファイルのheadタグにスタイルタグを入れて書き込みます.
    ＜CSSベース＞
    背景関連
    background-color
    background-image
    background-size
    サイズ
    width
    height
    フォント
    font-size
    font-weight
    font-family
    color
    間隔
    margin
    padding
    これらがあります.
    また、Googleフォントの挿入、コメント、CSSファイルの分離もあります.
    CSSファイルを分離するのは、スタイルラベルの長さが長すぎて可読性が低下しているためです.
    方法が簡単だ.
    <link rel="stylesheet" type="text/css" href = "(css파일이름).css">
    これでHTMLファイルheadに記入すればいいです

    ガイドテープ


    きれいなCSSをプリインストール
    良いCSSを使うのとデザインが綺麗なのとでは違います.
    <スタートバースタートスタンプボード>
    <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
</head>
    こう書きます.

    起動バーのホームページに必要なフォームを見つけて使用すればいいです.

    3)Javascriptの基礎文法を熟知している。


    Javascriptとは?
    プログラミング言語の一つは、ブラウザが聞き取ることができる言語です.
    これは「歴史的な理由&作成済みの標準」なので、すべてのブラウザはJavascriptを理解できるようにデフォルトで設計されており、すべてのWebサーバはHTML+CS+Javascriptを提供しています.
    デフォルトでは、JavascriptはHTMLファイルのscriptタグに記述されます.
    <変数>
    let a = 2
let b = 3

console.log(a+b) //3출력
    <リスト>
    let name_arr = ['김철수', '박하나', '조은대', '설은대']
for(int i = 0; i<name_arr.length; i++){
	console.log(name_arr[i])
}
    <ディクシャナリー+リスト>
    let citizens = [
	{'name': '김이나', 'age':29}
    {'name': '박푸린', 'age':63}
]
new_name = {'name': '최후방', 'age': 18}
citizens.push(new_name)

//citizens = [
	{'name': '김이나', 'age':29}
    {'name': '박푸린', 'age':63}
    {'name': '최후방', 'age': 18}
]
console.log(citizens[1]['name']
//'박푸린'
    =>DickShowneryとListの読みやすさが良く、環境変化がしやすい.
    この他にも関数、重複文、条件文などがあります.
    <1週目の講義終了後に提出された課題>
    js復号クラス
    C#マシンコードの取得