1주차 WIL🐱‍👤HTML,CSS,Javascript

Wintering·2022년 4월 4일
CSShtml내일배움단스파르타코딩클럽
0

내일배움캠프

목록 보기
1/17

HTML,CSS🎀

  • html (뼈대)

  • css (꾸미기)

    • 가운데 정렬시, margin과 padding의 개념을 이해하기

      • margin (바깥쪽여백)
      • padding (안쪽여백)

  • 가운데 정렬하기

    div태그의 경우

    <div class="wrap">
</div>

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

<head>
    <style>
        .wrap{
            width : 300px <!-- 1.width를 지정한후 -->
            margin : auto <!-- 2.marign : auto로 양 옆 여백을 같게만듬 -->
        }
    </style>
</head>

    button의 경우

    <button class="mybtn white-font">로그인하기</button>

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

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

구글웹폰트 지정하기🎀

  • url 주소

    https://fonts.google.com/?subset=korean

    1. 마음에 드는 폰트를 찾아 클릭
    2. select this font
    3. image-20220405004147841
    4. 를 복사해서 밑에 지정
    5. image-20220405004239008
    6. style태그에 *{}을 지정후 안에 CSS rules를 복사
    7. image-20220405004336644

부트스트랩🎀

  • 부트스트랩 : 예쁜 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]		// '감'

  • 딕셔너리 : key값이 중요

    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 = 'yvely001@naver.com'
myemail.split('@')						// ["yvely001", "naver.com"]
myemail.split('@')[1]					// naver.com
myeamil.split('@')[1].split('.')		// ["naver", "com"]
myeamil.split('@')[1].split('.')[0]		// naver

  • 함수 ( 부르면 정해진 행동을 하는 것 (자바로 치면 메소드))

    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. 조건문

  • if문

    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문

    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
profile
Wintering
다음 포스트

2주차 WIL🐱‍👤Javascript,JQuery,Ajax

0개의 댓글