TIL: 항해99 웹개발 종합반 1주차 (2)

ne_ol·2021년 12월 24일
TIL개발일지부트캠프코딩항해99
0
post-thumbnail

20211224_FRI (1)

1-9.

  • 개발자 도구를 통해서 해당되는 섹션의 HTML 코딩을 알 수 있다.

1-10.

  • Quiz Section
  • (CSS) font-weight

1-11.

  • Quiz Section
  • w3schools/mdn: CSS 기준이 되는 코딩들 참고
  • (CSS) border: weight type color
  • (CSS) margin: top right bottom left
  • bootstrap에 적절한 form 찾아서 적용

1-12.

  • JavaScript
    • 프로그래밍 언어
    • 브라우저가 알아들을 수 있는 언어
    • 처음 개발된 시점부터 사용되며 표준으로 적용됨
    • Java와는 무관
    • head tag 내 script tag에 코딩
  • (JS): 해당 태그를 클릭하면 script tag 내 function name 으로 된 function 을 작동시킨다
  • (JS) alert(''): '' 안에 포함된 내용을 경고 박스를 띄운다
<script>
	function name () {
    	alert('');
        }
</script>코드를 입력하세요
  • 개발자 도구의 Console 창을 통해 JS 확인 가능

1-13.

  • JS 기초 문법
    • 변수
      • let a = 2
      • let first_name = 'seongtaek' -> '' 사용하여 문자열 가능
      • let last_name = 'oh'
        • first_name + last_name = seongtaekoh
    • 자료형
      • List
        • 순서가 중요한 담기
        • let a_list = ['수박', '참외', '배']
          • a_list[0] = "수박" -> list는 0번 째부터 시작
          • a_list.push('감') -> a_list[3] 자리에 새로운 배열 추가
      • Dictionary
        • {key: value, key: value} -> 순서가 중요하지 않다
        • let a_dict = {'name': 'bob', 'age': 27}
          • a_dict['name'] = bob
          • a_dict['height'] = 180 -> a_dict에 새로운 dictionary 추가
          • a_dict['fruits'] = a_list -> a_dict에 새로운 list 형의 dictionary 추가
          • a_dict['fruits'][0] = 수박
    • 함수
      • 부르면 정해진 동작을 작동한다
      • let a = 100
        • a % 8 = 4 -> 나누고 난 나머지 (트랙핑을 균등하게 나눌 때, 짝수/홀수 구별할 때)
      • ==: 같다
      • !=: 같지 않다
      • let myemail = 'sparta@gmail.com'
        • myemail.split('@') = [sparta, gmail.com]
        • myemail.split('@')[1].split('.')[0] = gmail -> domain 판별
    1-14.
    • 함수 (이어서)
      • function sum(num1, num2) {
        return num1+num2
        }
      • let result = sum(2,3)
      • result = 5
    • 조건문
      • let age = 24
      • let sex = '남성'
        • if (age > 20 && (or: ||) sex == '남성') {
          console.log ('성인 남성입니다.')
          } else if {age > 13)
          console.log ('청소년입니다')
          } else {
          console.log ('아동입니다')
          }
    • 반복문
      • let people = ['철수', '영희', '민수', '형준']
        • for (let i = 0; i < people.length; i++) {
          console log.(people[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++) {
          let name = scores[i]['name']
          let score = scores[i]['score']
          if (score < 70) {
          console.log(name, score)
          }
          }
          = 형준 50 기남 68 동희 30

1-15.

  • 반복문 예제 풀이
    • for (let i = 0; i < bikes.length; i++) {
      let name = bikes[i]['stationName']
      let bike = bikes[i]['parkingBikeTotCnt']
      if (bike < 5) {
      console.log(name, bike)
      }
      }

1-16.

  • 1주차 끝 & 숙제
<!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>
    <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .price {
            font-size: 15px;
        }
        .wrap {
            width: 500px;
            margin: auto;
        }
        .candle {
            width: 500px;
            height: 300px;
            margin: 10px auto 10px auto;
        }
        .btn {
            display: block;
            margin: auto;
        }

    </style>

    <script>
        function order(){
            alert('주문이 완료되었습니다!');
        }
    </script>
</head>

<body>
    <div class="wrap">
        <img class="candle" src = "https://cdn.thewirecutter.com/wp-content/media/2021/08/scentedcandles-2048px-0S1A9970-2x1-1.jpg?auto=webp&quality=75&crop=2:1&width=1024">
        <h1>양초를 팝니다 <span class="price">가격: 3000원/개</span></h1>
        <p>이 양초는 사실 특별한 힘을 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤄지게 된답니다. 하나 사가세요! 대나무 향이 아주 좋아요</p>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주문자 이름</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <label class="input-group-text" for="inputGroupSelect01">수량</label>
            </div>
            <select class="custom-select" id="inputGroupSelect01">
                <option selected>--수량을 선택하세요--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">주소</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text" id="inputGroup-sizing-default">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button class="btn btn-primary" type="submit" onclick="order()">주문하기</button>
    </div>
</body>

</html>
  • 해설과 다른 점
    • 이미지를 넣을 때 img src tag에 class를 만들어 CSS (width, height, margin)
      vs
    • div tag에 class를 만들어 CSS (width, height, background-image/position/size)
    • div tag 적용 범위
profile
ne_ol
개발되는 중입니다.
이전 포스트

TIL: 항해99 웹개발 종합반 1주차 (1)

다음 포스트

TIL: 항해99 웹개발 종합반 2주차 (1)

0개의 댓글