[1]HTML、CSS基礎知識、Javascript基礎文法まとめ

9530 ワード

学習目標

  • サーバとクライアントの役割について説明します.
  • HTML、CSSの基礎知識を知る.起動テープを持ってきます!
  • Javascriptの基礎文法を熟知しています.
  • Webの動作概念(HTMLを受信する場合)
        우리가 보는 웹페이지는 모두 서버에서 미리 준비해두었던 것을 "받아서","그려주는" 것 
        즉, 브라우저가 하는 일은 1) 요청을 보내고, 2) 받은 HTML 파일을 그려주는 일 
        
    HTML、CSSの基本内容

  • 1)HTMLとCSSの概念
    HTMLはスケルトン、CSSはデコレーション!

  • HTMLは領域とテキストを表すコードであり,CSSはキャプチャされた領域を修飾していると考える.HTMLのstyleプロパティを使用して装飾できますが、CSSファイルの誕生により、長い間組み合わせることができます.CSSファイルをHTMLコードにロードして適用します.
  • はまた、CSSを上手に使うことと「きれい」を作ることが異なる分野(ペンを握ることと絵を上手に描くことの違い)であるため、多くの場合、ウェブデザイナーやパブリッシャーに依存している.

  • 2)HTMLベース
  • HTMLは主にheadとbodyで構成されています.
    -ヘッダーにページのプロパティ情報、bodyにページの内容を含めます.
    -headの代表的な要素に入ります:meta、script、link、titleなど
    CSSベース

  • 1)HTML親子構造の表示
    htmlタグは「誰が誰の中にいるか」を理解する上で最も重要です.私を取り囲むラベルが変わったら、中の内容も影響を受けます!
  • 赤divには、緑/青divが含まれています.次のような場合、赤divを真ん中に移動すると、内容物の緑/青divも一緒に移動するでしょう.
  • 、つまり箱を移動すると中身も一緒に移動する原理です.
  • と同じ原理で、緑divのフォント色を変えて、ボタン1のフォント色を変えます!

  • 2)CSS基礎
  • CSSの使い方
    mytitleという名前のクラスを指す場合.mytitle { ... } 必ず書きます!覚えておいてください.

  • 1)常用CSSの練習
      h1, h5, background-image, background-size, background-position
      color, width, height, border-radius, margin, padding~~~~
    
           margin과 padding      
           - margin은 바깥 여백을, padding은 내 안쪽 여백
           
     
          
    - (2) 만들어둔 화면을 가운데로 가져오려면?
    
          width를 주고, margin: auto를 사용하자!
          그래도 안되면? display:block을 추가!
          
         
  • フォント、コメント、ファイルの分離

  • 1)Google Webページフォント
  • Google Webページフォント
    (1)好きなフォントをクリックします.
    (2)[+このスタイルを選択]をクリックします.
    (3)右上の[お気に入り](Favorites)アイコンをクリックします.
    (4)Embedタブをクリックします.
    (5)linkタグをコピーし、~の間でCSSをコピーして間に置く.
  • 2)コメント
    コメントはいつ使用しますか?
    1)不要なコードを削除するのではなく、一時的に動作しないようにする場合
    2)コードの簡単な説明が必要な場合に使用します.
    コメントを貼り付けると、ブラウザ/コンピュータは読み込まれません.
    つまり、開発者本人や同僚のために貼り付ける!
  • ショートカット:コメントする行を選択→ctrl(またはcommand)+/(スラッシュ)
  • ガイドバー、きれいなCSS集合

  • 1)Bootstrapとは?
  • ガイドベルトとは何ですか?きれいなCSSを事前に集める(CSSの使い方を知ったり、美感できれいにしたりするのは別のことなので、現在の業界では予め完成したガイドバーが使われています.)
  • 2)ブート-起動テンプレート
    他の人が事前に作成したCSSを私のHTMLファイルに適用するのは、CSSファイルの分離を強制する原理と同じです.
    ただCSSのファイルはインターネット上のどこかにあります.
  • ▲正式書き込みガイド
  • 1)Bootstrapを正式に使用
    人の作ったものを使うときはよく探して、少しずつ修正して、それが答えです!
  • 2)少量移動処理を行う
    モバイルデバイスでは、「横寸法」が最大の問題です!
  • はどこでも500 px(幅:500 px)
  • に調整可能
  • 画面幅500 pxより前は95%になりますが、超えると500 pxと言えるでしょうか?
  • Javascriptデモ


    JavaScriptとは?
  • プログラミング言語の1つで、ブラウザが聞き取れる言語です.
  • JavaとJavascriptの違いは何ですか?
    何の関係もない.
  • 2)JavaScriptベース
  • 初めてプログラミング言語を習うと、見慣れないところもあるので、来週本番までに!今日はまず味わってみよう
  • 3)JavaScript-HTML接続.ボタンをクリックすると警告ウィンドウが開きます
  • 関数hey()を作成します{
    alert(「さようなら」);
    }
  • 関数を
  • ボタンに接続します.関数を呼び出すには、ボタンをクリックします.
  • Javascript基礎構文

    - 변수 & 기본연산
        - 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
        (2를 a라는 변수에 넣는다)
        - let으로 변수를 선언합니다.
            
            ```jsx
            let num = 20
            num = 'Bob'
            
            // 변수는 값을 저장하는 박스예요.
            // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
            ```
            
        - 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
            
            ```jsx
            let a = 1
            let b = 2
            
            a+b // 3
            a/b // 0.5
            
            let first = 'Bob'
            let last = 'Lee'
            
            first+last // 'BobLee'
            
            first+' '+last // 'Bob Lee'
            
            first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
            ```
            
        - 변수명은 아무렇게나?
            
            ```jsx
            let first_name = 'bob' // snake case라고 합니다.
            
            또는,
            
            let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
            
            과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
            다른 특수문자 또는 띄워쓰기는 불가능합니다!
            ```
            
    - 리스트 & 딕셔너리
        - 리스트: 순서를 지켜서 가지고 있는 형태입니다.
            
            ```jsx
            let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
            
            // 또는,
            
            let b_list = [1,2,'hey',3] // 로 선언 가능
            
            b_list[1] // 2 를 출력
            b_list[2] // 'hey'를 출력
            
            // 리스트에 요소 넣기
            b_list.push('헤이')
            b_list // [1, 2, "hey", 3, "헤이"] 를 출력
            
            // 리스트의 길이 구하기
            b_list.length // 5를 출력
            ```
            
        - 딕셔너리: 키(key)-밸류(value) 값의 묶음
            
            ```jsx
            let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
            
            // 또는,
            
            let b_dict = {'name':'Bob','age':21} // 로 선언 가능
            b_dict['name'] // 'Bob'을 출력
            b_dict['age'] // 21을 출력
            
            b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
            b_dict // {name: "Bob", age: 21, height: 180}을 출력
            ```
            
        - 리스트와 딕셔너리의 조합
            
            ```jsx
            names = [{'name':'bob','age':20},{'name':'carry','age':38}]
            
            // names[0]['name']의 값은? 'bob'
            // names[1]['name']의 값은? 'carry'
            
            new_name = {'name':'john','age':7}
            names.push(new_name)
            
            // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
            // names[2]['name']의 값은? 'john'
            ```
            
        - 왜 필요할까요?
            
          순서를 표시할 수 있고, 정보를 묶을 수 있습니다.
            
            앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름,  휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다.
            
            let customer_1_name = '김스파';
            let customer_1_phone = '010-1234-1234';
            let customer_2_name = '박르탄';
            let customer_2_phone = '010-4321-4321';
            ...(알아보기 힘듭니다.)
            
            딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있습니다.
            let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
            let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
            
            그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해집니다.
            let customer = [
                {'name': '김스파', 'phone': '010-1234-1234'},
                {'name': '박르탄', 'phone': '010-4321-4321'}
            ]
            
             고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있습니다.
            
      
            
    - 기본 함수들
        - 사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재합니다.
            
         
       
          '나눗셈의나머지'를 구하고 싶은 경우
            
            let a = 20
            let b = 7        
            a % b = 6
           
            또, 특정 문자로 문자열을 나누고 싶은 경우
            
            let myemail = '[email protected]'
            
            let result = myemail.split('@') // ['sparta','gmail.com']
            
            result[0] // sparta
            result[1] // gmail.com
            
            let result2 = result[1].split('.') // ['gmail','com']
            
            result2[0] // gmail -> 우리가 알고 싶었던 것!
            result2[1] // com
            
            myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!

    Javascriptの基礎文法を学ぶ

    - 함수
        - 기본 생김새
            
            // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
            function sum(num1, num2) {
            	console.log('숫자', num1, num2);
            	return num1 + num2;
            }
            
            sum(3, 5); // 8
            sum(4, -1); // 3
            ```
            
    - 조건문
        - 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
            
            ```jsx
            function is_adult(age){
            	if(age > 20){
            		alert('성인이에요')
            	} else {
            		alert('청소년이에요')
            	}
            }
            
            is_adult(25)
            ```
            
        - if, else if, else if, else if else
            
            ```jsx
            function is_adult(age){
            	if(age > 20){
            		alert('성인이에요')
            	} else if (age > 10) {
            		alert('청소년이에요')
            	} else {
            		alert('10살 이하!')
            	}
            }
            
            is_adult(12)
            ```
            
    - 반복문
        - 예를 들어 0부터 99까지 출력해야 하는 상황이라면!
            
            ```jsx
            console.log(0)
            console.log(1)
            console.log(2)
            console.log(3)
            console.log(4)
            console.log(5)
            ...
            console.log(99)
            
    
        - 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있습니다.
            
            ```jsx
            for (let i = 0; i < 100; i++) {
            	console.log(i);
            }
            ```
            
            ```jsx
            for (1. 시작조건; 2. 반복조건; 3. 더하기) {
            	4. 매번실행
            }
            
            1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
            -> 2체크하고 -> (괜찮으면) -> 4 -> 3
            -> 2체크하고 -> (괜찮으면) -> 4 -> 3
            -> 2체크하고 -> (괜찮으면) -> 4 -> 3
            
            와 같은 순서로 실행됩니다.
            i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다.
            ```
            
        - 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
     
            let people = ['철수','영희','민수','형준','기남','동희']
        
            for (let i = 0 ; i < people.length ; i++) {
            	console.log(people[i])
            }
            ```