明日の学習団の第1週WIL🐱‍👤HTML,CSS,Javascript

31643 ワード
CSS 明日学習団 スパルタコードクラブ html テキストリンク

HTML,CSS🎀


  • html(スケルトン)

  • css(装飾)

  • 中央揃え、margin、paddingの概念を理解する
  • マージン
  • padding(内側マージン)

  • 中央揃え
    divラベルの場合
    <div class="wrap">
</div>

<!-- 클래스지정 -->

<head>
    <style>
        .wrap{
            width : 300px <!-- 1.width를 지정한후 -->
            margin : auto <!-- 2.marign : auto로 양 옆 여백을 같게만듬 -->
        }
    </style>
</head>
    ボタンの場合
    <button class="mybtn white-font">로그인하기</button>

<!--클래스지정-->

<head>
    <style>
        .mybtn{
            display : block; <!--0.글속성을 박스로 지정! -->
            width : 100px <!--1.width를 지정한후 -->
            margin : auto <!--2.marign : auto로 양 옆 여백을 같게만듬 -->
        }
    </style>
</head>

    • Google Webページフォントの指定🎀


  • urlアドレス
    https://fonts.google.com/?subset=korean
    • をクリックして好きなフォントを見つけます
  • select this font
  • をコピーし、下部で指定します.
  • スタイルラベルに*{}を指定し、CSSルール
    • をコピーします.

    • ガイドテープ🎀


  • ガイド:きれいなCSSを集めておきます

  • スタートストリップスタートテンプレート
    <!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+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>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>
</head>

<body>
    <h1>이걸로 시작해보죠!</h1>
</body>

</html>

  • ブートストラップアセンブリ(4.0)
    : https://getbootstrap.com/docs/4.0/components/alerts/

    • Javascript🎀


    1.変数


    2.資料型


  • リスト:順序が重要
    let a_list = ['수박','참외','배']
a_list[0]		// '수박'
a_list[1] 		// '참외'
a_list[2]		// '배'
a_list.push('감')		//a_list = ['수박','참외','배','감']
a_list[3]		// '감'

  • ディックシャーナ:キー値が重要です
    let a_dict ={'name':'bob','age':27}
a_dict['name']		// bob
a_dict['age']		// 27
a_dict['height'] = 180		// 딕셔너리에 height 키 추가 
							// a_dict {'name':'bob','age':27, 'height':180}
a_dict['fruits'] = a_list 	// 딕셔너리에 리스트를 추가
					// a_dict {'name':'bob','age':27, 'height':180, fruits:Array(4)}

a_dict['fruits']			// 수박,참외,배,감
a_dict['fruits'][2]			// 배
  • ディレクトリとディレクトリは、互いに要素として使用できます.

    • 3.関数


  • 文字列区切り関数
    let myemail = '[email protected]'
myemail.split('@')						// ["yvely001", "naver.com"]
myemail.split('@')[1]					// naver.com
myeamil.split('@')[1].split('.')		// ["naver", "com"]
myeamil.split('@')[1].split('.')[0]		// naver

  • 関数(javaと呼ばれるメソッド)
    function sum(num1, num2){				// sum이라는 함수를 정의
    return num1 + num2;
}

let result = sum(2,3)					// result = 5

function mysum(num1, num2){
    alert('안녕!')
    return num1+num2;
}

let result2 = sum(2,3)					//경고창 모달 띄워짐 ("안녕!")
										//result2 = 5

    • 4.条件文


  • ドアが
    let age = 24

if(age>20){
    console.log('성인입니다');
} else {
    console.log('청소년입니다.');
}		


// 성인입니다.
    if(age>20 &&  sex =='남성'){
    console.log('성인 남성입니다.')
}else{
    console.log('청소년입니다.')
}

//성인입니다.
  • if/esle if/else(else ifは随時追加可能)

    • 5.繰り返し文


  • 文脈
    for(let i=0; i<10; i++){
    console.log(i)
}

// 0 1 2 3 4 5 6 7 8 9 
    let people = ['철수','영희','민수','형준','기남','동희']
people.length 		// 6

for(let i=0; i<people.length; i++){
    console.log(i)
}

// 철수 영희 민수 형준 기남 동희
    let scores = [
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
 	{'name':'형준', 'score':50},
  	{'name':'기남', 'score':68},
  	{'name':'동희', 'score':30},
]

scores[0]			// {'name':'철수', 'score':90}
scores[1]			// {'name':'영희', 'score':85}

scores[1]['score']	// 85


for(let i=0; i<scores.length; i++){
     console.log(scores[i])
}

/*	
	{'name':'철수', 'score':90},
	{'name':'영희', 'score':85},
	{'name':'민수', 'score':70},
 	{'name':'형준', 'score':50},
  	{'name':'기남', 'score':68},
  	{'name':'동희', 'score':30},
*/        

for(let i=0; i<scores.length; i++){
     console.log(scores[i]['name'])
}

// 철수 영희 민수 형준 기남 동희


for(let i=0; i<scores.length; i++){
    let name = scores[i]['name']
    let score = scores[i]['score']
    console.log(name,score)
}

// 철수 90 영희 85 민수 70 형준 50 기남 68 동희 30
    • Objective-C簡易計算機
    レストランリストページの変更