[스파르타코딩클럽] 웹개발종합반 1주차

• HTML은 크게 head와 body로 구성되며, head안에는 페이지의 속성 정보를, body안에는 페이지의 내용을 담는다.

• 자주 쓰는 CSS

  • 배경관련
    background-color
    background-image
    background-size

  • 사이즈
    width
    height

  • 폰트
    font-size
    font-weight
    font-famliy
    color

  • 간격
    margin : 바깥여백
    padding : 안쪽 여백

• 부트스트랩 시작 템플릿

<!-- 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>

• border/border-radius
  .class_name {
  width: 500px;
  padding: 50px;
  border: 3px solid black;
  border-radius: 10px;
  margin: 0px auto 30px auto
  }

  ---

• Javascript
  아직 뭐가 뭔지 잘 모르겠지만... 일단 가보자고.
  [크롬 개발자 도구]를 열어, console탭에 작성

  • let=>변수선언

  • 리스트: 순서를 가지고 있는 형태.
    let a_list = [] 또는,
    let a_list = [1,2,'hey',3] 으로 선언.
    a_list[2] -> 'hey'를 출력한다.
    a_list.push('헤이')
    a_list -> [1, 2, 'hey', 3, '헤이']를 출력한다.
    a_list.length ->5를 출력한다.

  • 딕셔너리: Key:Value 값의 묶음
    let a_dict = {} 또는,
    let a_dict = {'name':'Bob','age':20} 으로 선언.
    a_dict['name'] -> Bob 출력
    a_dict['age'] -> 20 출력
    a_dict['height'] = 180 ->딕셔너리에 키:밸류 넣기
    a_dict -> {name:"Bob", age:21, height:180} 출력

  • 리스트와 딕셔너리의 조합
    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 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 -> 간단하게 쓸 수도 있다!

    또는,
    let txt = '서울시-마포구-망원동'
    let names = txt.split('-'); // ['서울시','마포구','망원동']
    

  • 반대로 특정 문자로 합치는 경우
    let result = names.join('>'); // '서울시>마포구>망원동' (문자열 바꾸기!)

  • 함수

    • 만들기
      function 함수이름(필요한 변수들) {
      내릴 명령들을 순차적으로 작성
      }
    • 사용하기
      함수이름(필요한 변수들);
    • 예시
      두 숫자를 입력받으면 더한 결과를 돌려주는 함수
      function sum(num1, num2) {
      console.log('num1: ', num1, ', num2: ', num2);
      return num1 + num2;
      }
      sum(3, 5); // 8
      sum(4, -1); // 3

  • 조건문

    • function is_adult(age){
      if(age > 20){
      alert('성인이에요')
      } else if (age > 10) {
      alert('청소년이에요')
      } else {
      alert('10살 이하!')
      }
      }
    • AND조건
      function is_adult(age, sex){
      if(age > 20 && sex == '여'){
      alert('성인 여성')
      } else if (age > 20 && sex == '남') {
      alert('성인 남성')
      } else {
      alert('청소년이에요')
      }
      }
    • OR조건
      function is_adult(age, sex){
      if (age > 65 || age < 10) {
      alert('탑승하실 수 없습니다')
      } else if(age > 20 && sex == '여'){
      alert('성인 여성')
      } else if (age > 20 && sex == '남') {
      alert('성인 남성')
      } else {
      alert('청소년이에요')
      }
      }

  • 반복문
    for (let i = 0; i < 100; i++) {
    console.log(bikes[i]);
    }
    0번째부터 99번째까지 / 하나씩 커지면서 / bikes의 i번째 값을 보여줘.

    • let scores = [
      {'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]);
      }
      이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있다.
      70점 미만인 사람들의 이름만 출력하려면,

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