王初甫がクラスを始めた(1)

カリキュラムの目標!

サーバとクライアントの役割について説明します.

HTML、CSSの基礎知識を知る.起動テープを持ってきます.

Javascriptの基礎文法を熟知しています.

1週間1強

ブラウザの仕事は,1)リクエストの送信,2)受信したHTMLファイルの描画である.
-->どこに要望するのでしょうか?🤔
サーバが作成したAPIウィンドウに、事前に決定されたリクエストを送信します.
例)https://naver.com/
->naver.comという名前のサーバから「/」ウィンドウにリクエストされました!

☝🏼 あなたはいつもhtmlだけをダウンロードしますか?❌
データのみを受信し、大切にすることも可能です.

データのみをダウンロードする場合は、次の形式になります.この姿をJSON形式といいます

第1週第3回

HTMLはheadとbodyで構成されています.
ヘッダーにはページのプロパティ情報ex)meta、script、link、title...
bodyのページ内容はex)div、p、ul...
divラベルはバンドル転送されます.pラベルは段落を区切るために使用されます.

1週間4強

Quizログインページの作成
💡 pタグの中のinputタグ!!

 <p>ID: <input type="text"/></p>
 <p>PW: <input type="text"/></p>

1週間5強

CSSはheadでスタイルラベルを使ってスペースを作成したり、ファイルを単独で作成したりすることができます.ファイルを個別に作成する場合

 <link rel="stylesheet" href="파일 경로">

第1週6回

💡 marginとpaddingを混同しないで!
余白は外側、内側の余白

第1週7強

Google Webフォント

第1週ベスト8

ガイドテープ
起動バーを書くには、次のコードが必要です.

<!-- Bootstrap CSS -->
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

第1週9強

Bootstrapを使います!

第1週ベスト10

Quizページ展開!
💡 aラベルの使用

<a href="링크">링크로 이동하기</a>

第1週ベスト11

Quizページを完了!
💡 マージンの使用

<4面同時指定マージン>
margin:上下左の順序

<4面均一同時>
margin: 100px;

<上、右&左、下を指定>
margin: 5px 10px 0px;

<上下、右&左を指定>
margin: 5px 10px;

第1週12強

Javascriptは、ブラウザが理解できる言語であるプログラミング言語です.
headではscriptタグを使用してスペースを作成したり、ファイルを個別に作成したりすることができます.ファイルを個別に作成する場合

<script defer src="경로"></script>

💡 アラートウィンドウを作成します.

 function hi() {
    alert('안녕!');
}

ここでhiは関数です...htmlにこの関数を適用
関数は固定的な動作をします.つまり、歌うときは一定の動作をします.

 <a onclick="hi()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

第1週13強

変数は、値を保存するボックスまたは宣言した後、値を再宣言しません.

第1週ベスト14

💡 n.関数

 // 만들기
 function 함수이름(필요한 변수들) {
     내릴 명령들을 순차적으로 작성
 }
 // 사용하기
 함수이름(필요한 변수들);

💡 条件文

function is_adult(age){
	if(age > 20){
		alert('성인이에요')
	} else {
		alert('청소년이에요')
	}
}
is_adult(25)

And条件:
function is_adult(age, sex){
もし(age>20&&性='女'){
OR条件:
function is_adult(age, sex){
もし(年齢>20||性別=「女」){
💡 複文

for (let i = 0; i < 100; i++) {
	console.log(i);
}
예시)
for (let i = 0 ; i < scores.length ; i++) {
	if (scores[i]['score'] < 70) {
		console.log(scores[i]['name']);
	}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다.