反応基礎クラス1週目-1

11478 ワード
React テキストリンク
22.03.31(首)
スパルタコードクラブ反応基礎クラス-1週間のコース

◇必要なプログラムのインストール


  • Visual Studio Code、Git bash(Windowsのみ)、NVM(Windowsベース)/NVMのインストール時に注意してください

  • NVMをインストールする場合は、インストールバージョンが1.1.7であることに注意してください.
    ->1.1.9バージョンがインストールされ、npmバージョンの変更を入力中にエラーが発生しました

    • ◇先端基礎知識

  • Server & Client
  • サーバリースなし
  • サーバを作成する必要はありません!
  • サーバの仕様、ネットワーク設定など予め設定されているサーバは、インフラストラクチャ
    • を使用しないことができます.
  • Frontendの仕事
  • 画面を描画し、データを追加します.

    • ◎ HTML & CSS


  • HTML(Hypertext Markup Language)
  • 寸法言語:名称別表示
  • 要素(要素):div、p、button
  • タグ(Tag):<>

  • ドキュメントオブジェクトモデル(DOM)
  • html単位ごとに対象とするモデル
  • 親、子のツリー
  • サブエレメントへのアクセス方法
    • document.body.childNodes
document.body.children
document.getElementsByTagName("div")
document.gerElementBtId("addButton")

  • CSS
  • Selector:修飾する要素を選択
    • /* id selector */
#id { ... }

/* class selector */
.class { ... }

/* tag selector */
tagName { ... }

/* 여러 요소 선택하기 */
#id, .class { ... }

/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }
  • clac()異なる単位の演算を許可

  • FlexのGrid Systemを使う
    • <style>
  
</style>
	.totalbox {
            max-width: 450px;
            margin: auto;

			// 안 내용을 상황에 맞게 배치 / 기본값 : block (아래로 쌓음)
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

	.maintitle{
            
            margin: 0px;
            margin-top: 10px;
            margin-right: 250px;
        }
<body>
    <div class="totalbox">
        <div class="maintitlebox">
            <h1 class="maintitle" id="title">오늘 할 일</h1>
        </div>
        <div class="content">
            <div class="showdata" id="showTodoList">
                <div class="todobox">
                    <text class="todotext" id="test">독서하기</text>
                    <button class="finButton">완료</button>
                </div>

            </div>
            <div class="inputdata">
                <input class="inputbox" id="addList" placeholder="입력하기...">
                <button class="button" onclick="addList()">추가</button>
            </div>
        </div>
    </div>
</body>
    キューQueueの使用
    【C#学習ノート】クラス構築関数使用