Sparta 웹개발 종합반 1주차 13~16강 +숙제

티스토리 뷰

sparta 웹개발 종합반 개발일지

Sparta 웹개발 종합반 1주차 13~16강 +숙제

나아눙 2022. 5. 20. 01:13

13. Javascript 기초 문법 배우기(1)

크롬 개발자도구

띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구

F12

console.log

딕셔너리 : key와 value 값의 묶음 순서를 가지고 있지 않다. 리스트 : 순서를 가지고 있다.

14. Javascript 기초 문법 배우기(2)

15. Javascript 연습하기

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&family=Nanum+Myeongjo:wght@400;700&family=Noto+Sans+KR:wght@100&display=swap" rel="stylesheet">
    <style>
        *{
            font-family: 'Jua', sans-serif;
        }
        .wrap{
            width:900px;
            margin:auto;
        }
    </style>
</head>

<body>
  <div class="wrap">
    <div class="card" style="width: 30rem;">
  <img class="card-img-top" src="https://t1.daumcdn.net/thumb/R1280x0/?fname=http://t1.daumcdn.net/brunch/service/user/1k2m/image/4vTrSTRSvOzp4_IrWc1xTSb9ZR8.JPG" alt="Card image cap">
  <div class="card-body">
    <h5 class="card-title">양초팝니다</h5>
    <p class="card-text">이 양초는 사실 특벼한 힘들 가지고 있어요. 양초를 켜고 소원을 빌면 짜자잔 뭐든지 이뤼지게 된답니다.하나 사가세요! 대나무 향이 아주 좋아요</p>
      <div class="input-group input-group-sm mb-3">
          <div class="input-group mb-3">
              <div class="input-group-prepend">
                  <span class="input-group-text" id="inputGroup-sizing-default">주문자이름
              </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">One</option>
                  <option value="2">Two</option>
                  <option value="3">Three</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>

    <a href="#" class="btn btn-primary">주문하기</a>
  </div>
</div>
   </div>
  </div>
</body>

</html>

내가 푼 코드 결과

1.일단 균형이 안맞는다.

background:green;으로 해봤는데 오른쪽만 초록색이 나타났다.

2.그리고 양초팝니다에서 가격을 작게 어떻게 이어서 나타내는지 모르겠음

=>span을 매겨본다.

3.주문하기 가운데도 어떻게 이용하는지 해결할 필요가 있다.

=>width,margin,display(속성->박스)

수정후

span을 매겼더니 3000원이라는 작은 글씨가 나왔다.

나머지는 정답을 통해 분석

정답코드

<!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;
        }
        .item-img {
            width: 500px;
            height: 300px;

            background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG");
            background-position: center;
            background-size: cover;
        }

        .price {
            font-size: 20px;
        }
       .item-desc {
            width: 500px;
            margin-top: 20px;
            margin-bottom: 20px;
        }
        .item-order {
            width: 500px;
        }
        .btn-order {
            margin: auto;
            width: 100px;
            display: block;
        }
        .wrap {
            width: 500px;
            margin:auto;
        }
    </style>

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

<body>
<div class="wrap">
    <div class="item-img"></div>
    <div class="item-desc">
        <h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1>
        <p>이 양초는 사실 특별한 힘을 지니고 있어요!</p>
    </div>
    <div class="item-order">
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자이름</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>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소</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">전화번호</span>
            </div>
            <input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
        </div>
        <button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
    </div>
</div>
</body>

</html>

body에서 내가 했던 코드와 다르게 item-img 클래스와 item-desc클래스 구분해서 만들었다.

item-desc 에서 양초팝니다 옆에 span으로 price 클래스가 만들어졌다.

head에서는 style안에 각 너비와 위치를 변경하고 있었다.

비교를 하자면

width=1000px를 할때 아까 내가 짰던 비슷한 그림을 하고 있는 것을 볼수있음

코드를 살펴보니

item-img,item-desc,item-order,wrap에서 width=500px로 똑같이 맞쳐지고 있음을 알수 있었다.

주문하기에서 body안에 버튼에 onlick="order()"를 누르면 함수가 호출됨을 확인하였고 btn btn-primary 와 btn-order이 명찰 두개가 있는 거 같다.

btn-order에서 margin,with,display를 맞추었다.

'sparta 웹개발 종합반 개발일지' 카테고리의 다른 글

Sparta 웹개발 종합반 2주차 9~12강+숙제 (0)	2022.05.20
Sparta 웹개발 종합반 2주차 1~8강 (0)	2022.05.20
Sparta 웹개발 종합반 1주차 5~12강 (0)	2022.05.19
Sparta 웹개발 종합반 1주차 1~4강 (0)	2022.05.19
1주차 개발 일지 (0)	2022.05.18

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/12 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

글 보관함

sy의 코딩 개발일지

티스토리 뷰