-
21.09.09. 스파르타 내배단 1주차 개발일지개발일지 2021. 9. 9. 01:39
[Week I Learned]
*Notion
https://www.notion.so/1-59315708468149fc9cb2877ca0784f65
[스파르타코딩클럽] 웹개발 종합반 - 1주차
매 주차 강의자료 시작에 PDF파일을 올려두었어요!
www.notion.so
*Diary
https://heily-coding.tistory.com/2?category=889353
21.09.07. 1-4강 (첫 시작, 페이지 만들기)
단축키 - Ctrl + Alt + L = 줄 정렬 로그인페이지 로그인 페이지 ID: PW: 로그인하기 로그인 페이지 만드는데 나름 잘 한것 같은데 줄간격이 너무 가까운 것 같았다. 내가 삽입한 는 글머리
heily-coding.tistory.com
https://heily-coding.tistory.com/3?category=889353
21.09.07. 1-5~6강 (class="명찰", 배경화면 3총사, 여백, 중첩)
[class="명찰"] 로그인페이지 로그인 페이지 ID: PW: 로그인하기 h1 태그에 class="123" 를 달아주면 녀석을 지명하는 게 된다. 명찰을 달아주는 것. 그리고 title 태그 밑으로 태그를 넣어주면
heily-coding.tistory.com
https://heily-coding.tistory.com/4?category=889353
21.09.07. 1-7강 (폰트, 주석, CSS 나누기)
[폰트] https://fonts.google.com/?subset=korean Google Fonts Making the web more beautiful, fast, and open through great typography fonts.google.com 로그인페이지 * { font-family: 'Do Hyeon', sans-ser..
heily-coding.tistory.com
https://heily-coding.tistory.com/5?category=889353
21.09.07~08. 1-8~11강 (부트스트랩, w3schools, mdn)
[부트스트랩] *부트스트랩 시작 템플릿 integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossori..
heily-coding.tistory.com
https://heily-coding.tistory.com/6?category=889353
21.09.08. 1-12~15강 (Javascript)
[Javascript] - 브라우저가 유일하게! 알아들을 수 있는 프로그래밍 언어 (명령) why? 이미 모든 브라우저가 역사적으로 javascript를 알아듣게 설계되어 있다. 표준이 됨. 태그 사용 검사 -> console => 개발
heily-coding.tistory.com
[숙제]
<!doctype html> <html lang="ko"> <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> <meta property="og:title" content="헤일리샵" /> <meta property="og:description" content="헤일리는 일리있어!" /> <meta property="og:image" content="{{ url_for('static', filename='ogimage.jfif') }}" /> <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet"> <style> * { font-family: 'Do Hyeon', sans-serif; } .myitem { width: 500px; height: 300px; background-image: url("https://t1.daumcdn.net/liveboard/nts/5bcccfbd33da4865817b9c606b6b852e.JPG"); background-position: center; background-size: cover; } .price { font-size: 16px; } .desc { width: 500px; margin-top: 20px; margin-bottom: 20px; } .order-box { width: 500px; margin-bottom: 40px; } .mybtn { width: 100px; margin: auto; display: block; } .wrap { margin: auto; width: 500px; } .rate { color: blue; } </style> <script> $(document).ready(function () { $.ajax({ type: "GET", url: "https://api.manana.kr/exchange/rate.json", data: {}, success: function (response) { let nowRate = response[1]['rate']; $('#rate-box').text(nowRate); } }) order_listing(); }); function order_listing() { // 주문목록 보기 API 연결 $.ajax({ type: "GET", url: "/order", data: {}, success: function (response) { if (response["result"] == "success") { let orders = response['orders']; for (let i = 0; i < orders.length; i++){ let name = orders[i]['name'] let count = orders[i]['count'] let address = orders[i]['address'] let phone = orders[i]['phone'] let temp_html = `<tr> <th scope="row">${name}</th> <td>${count}</td> <td>${address}</td> <td>${phone}</td> </tr>` $('#orders-box').append(temp_html) } }; } }) } function order() { let name = $('#order-name').val(); let count = $('#order-count').val(); let address = $('#order-address').val(); let phone = $('#order-phone').val(); // 주문하기 API 연결 $.ajax({ type: "POST", url: "/order", data: {name_give:name, count_give:count, address_give:address, phone_give:phone}, success: function (response) { // 성공하면 alert(response["msg"]); window.location.reload(); } }) } </script> </head> <body> <div class="wrap"> <div class="myitem"></div> <div class="desc"> <h1>양초를 팝니다 <span class="price">가격:3,000원/개</span></h1> <p>이 양초는 특별한 힘을 가지고 있습니다. 하나 두 개 켜 놓으면 또 다른 촛불을 찾을 수 있죠!</p> <p class="rate">달러-원 환율: <span id="rate-box">1,000</span></p> </div> <div class="order-box"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">주문자이름</span> </div> <input id="order-name" 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 id="order-count" class="custom-select"> <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" id="inputGroup-sizing-default">주소</span> </div> <input id="order-address" 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 id="order-phone" type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default"> </div> <button onclick="order()" type="button" class="btn btn-primary mybtn">주문하기</button> </div> <table class="table"> <thead> <tr> <th scope="col">이름</th> <th scope="col">수량</th> <th scope="col">주소</th> <th scope="col">전화번호</th> </tr> </thead> <tbody id="orders-box"> </tbody> </table> </div> </body> </html>[평가]
*Keep
1. 줄 정렬 신경써서 잘 함
2. 각종 태그 복붙으로 활용 잘 함
*Problem:
1. 숙제할 때 발생한 문제인데,
같은 형식의 style로 만들 div들의 하위 항목을 각각 class를 매겨 똑같은 style을 여러개 만들었었다.
2. 부트스트랩 시작 템플릿을 적용하지 않고 코드를 가져왔더니 당연히 적용되지 않았다.
3. span 태그로 style을 먹일 때, <span style="font-size:20px">가격: 3,000원/개</span>
이런 식으로 했었는데, 해당 span 태그에 한 가지 스타일이 아니라 여러개를 동시 적용할 경우엔
번거로워진다는 것을 깨달았다.
4. head에서 폰트를 전체에 먹이고자 *{ } 를 하니 적용되지 않았다.
*Try:
1. 같은 명령을 먹일 땐 전체를 큰 div로 묶는 습관을 들여야겠다.
2. 부트스트랩 활용 시 시작 템플릿 먼저 먹이는 습관을 들여야겠다.
아니면 부트스트랩 시작 템플릿을 먹여 놓은 defalt 파일을 만들어 두고 사용해도 좋을 것 같다.
3. <span class="..."></span> 이렇게 span태그에도 명찰을 달아서 style 태그에서 작업하면 좋을 것 같다.
4. *{ }는 style에서 먹여야 한다.
5. consol에서 Shift+Enter를 습관화 하자.
[소감]
코딩의 ㅋ도 몰랐는데, 알고 보니 초등학생 때 배웠던 HTML이었다.
초등학교 고학년 당시엔 방과후에 컴퓨터 수업을 들으며 IT 계열 직업을 꿈꾼 적도 있었다.
그 때 익혀둔 영타와 어렴풋한 HTML의 기억 덕인지 취미처럼 재미있게 하고 있다.
추후에 내가 어떤 길로 계속 나아가게 될 지는 모르지만, 끊임없는 자기계발이 내 자산이 될 거라 생각한다.
내일배움카드로 좋은 기회와 수강료로 좋은 수업을 듣게 되어 좋다.
NPC도 지원했는데, 본업과 부업, 그리고 11일 완주 챌린지라 버거운 코딩에 이어
나를 또 한번 혹사시키는 명찰이 되지 않을까 우려도 되지만(ㅋㅋㅋ)
좀더 코딩에 빨리 적응하고자, 그리고 좀더 다양한 사람들과 소통하고자 지원하게 되었다.
코린이에서 코른이가 되는 그 날까지 화이팅!
'개발일지' 카테고리의 다른 글
스파르타 힙한 취미 코딩 - 파이썬 혼자놀기 패키지 1일차 개발일지 (0) 2021.09.22 21.09.19. 스파르타 내배단 5주차 개발일지 (0) 2021.09.19 21.09.18. 스파르타 내배단 4주차 개발일지 (0) 2021.09.18 21.09.15. 스파르타 내배단 3주차 개발일지 (0) 2021.09.16 21.09.14. 스파르타 내배단 2주차 개발일지 (0) 2021.09.14