웹개발 1주차 개발일지

1. 들어가며
   초등학교 때 아주 기본수준의 html 태그를 배웠는데 그 이후로는 아주 초급 수준의 웹페이지 기초만 알았었다. 그러다가 웹페이지 크롤링을 하기 위해서는 다시 html을 알아야했고 특히 css나 class태그의 특징을 알아야했다. 그래서 이것저것 알아보다가 결국에는 웹개발을 체계적으로 배워야겠다고 생각하여 스파르타코딩에서 웹개발 왕초보반을 수강하게되었다.

2. 들어갔는데
   차근차근 배우는 것이 재밌었고, 특히 css와 class태그를 이해할 수 있었다. 그래서 아... 그래서 크롤링에서 class태그를 잘 활용하는 것이 중요하구나..라고 이해할 수 있었다. 클래스태그는 내가 자주 쓰는 한글프로그램에서 스타일같은 개념이고, ppt에서는 마스터슬라이드와 비슷한 것이라고 이해했다. 더 세부적인 기능들에 대해서는 구글링을 해야겠지만 개념적으로 이렇게 이해하니 쉬웠다. class태그의 설정은 본문에서가 아니라 head영역의 스타일태그 내에서 쓰여진다는 것은 결국 메타정보적인 속성을 갖게 되는 것이다. 그래서 어떠한 클래스가 적용되었냐는 이 영역이 이 전체 문서에서 이러한 속성을 가지므로 이러한 속성에 공통적인 속성을 주기위해 특정 클래스를 적용한다...라고 말할 수 있는 것이다.라고 이해했다.

3. 좀 더 들어가보니
   우리가 매번 문서를 작성할 때-특히 ppt- 내가 세팅하기보다는 타인이 잘 해둔 것을 레퍼런스로 활용하듯이 css도 그러한 것이었다. 그래서 그런 태그들을 모은 사이트를 잘 활용하는 것이 꿀팁이었다. '하늘아래 새로운 것 없다'는 현대예술을 설명하는 명제처럼 기존의 것을 활용하는 것이 매우 중요해졌다. 이건 마치 레고블럭을 쌓아서 큰 건축물(?)을 구성하는 것과 같다. 그래서 장점은 빠르게 일정수준 이상의 것을 구축할 수는 있지만 한편으로는 개인적인 공부를 하지 않고서는 진정으로 내가 원하는 것을 만들 수 없다는 단점이 있다. 레고블럭으로 아무리 노력해도 완벽한 원모양은 만들기 힘든것처럼 말이다. 통계프로그램을 배울 때도 어떤 경우는 쉽게 주어진 함수위주로 배워서 기초적인 분석은 바로 할 수 있지만 내맘대로 커스터마이징하기는 힘든 종류가 있고, 어떠한 것은 내가 라인바이라인 쓰는 것부터 배워서 삽질을 많이 하지만 나중에는 내가 자유롭게 명령문을 짤 수 있는 그런 것과 같다.

4. 다른 구간으로 들어가봄
   그러다가 자바스크립트를 배웠는데 자바스크립트는 html만 알던 나에게 크롤링을 방해하는 한가지 요인이었다. 그래서 자바스크립트가 나에게는 어렵게만 느껴졌는데 일단 개념을 알고나니까 앞으로 방향을 알 수 있을 것 같았다. 약간 파이썬과 비슷한 느낌인데 활용처가 다른 것 같다. 아무튼 for구문을 익히는 것이 큰 관건이다. 컴퓨터를 쓰는 이유는 정량화/수치화하여 그것을 컴퓨터를 통해 빠르고 쉽게 처리하는 것이니까. 하지만 컴퓨터를 그렇게 일시키는 건 역시 사람의 일...;ㅅ; 아무튼 재밌었다.ㅋㅋㅋ

5. 나와봄.
   숙제하고 1주차를 마무리했다. 숙제하면서의 관건은 '예쁘게' 잘 만드는 것이었다. 문서를 작성할 때도 콘텐츠를 잘 포장하는 것이 최종 마무리인데 그 작업이 홈페이지에서는 더 중요하다. 그런데 앞서 언급했듯 주어진 것을 그냥 가져와쓰다보면 어떤 명령문이 이것을 그렇게 만든 것인지 근원적으로 파악하지 못하는 한계가 있어서 아쉬웠는데 이건 중급단계에 가서 배우거나 엄청난 예습-구글링-을 통하여 알수 있는 것이겠지라고 생각하여 나 스스로 타협ㅋㅋ큐ㅠㅠ하며 이쯤되었어!라고 생각하고 마무리하고 제출하였다. 일단 코딩의 세계는 경쟁보다는 협력이 작동하는 것 같고, 그래서 타인의 코드를 레퍼런스로 보고 배우고 응용하는 것이 매우 중요한 일이라고 생각했다.

다음은 나의 첫번째 숙제인 코드이다.

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

<style>
     *{font-family: 'Yeon Sung', cursive;}
    .whole{
        width:600px;
        margin:auto;
    }
    .center{
        margin:10px auto 10px auto;
        display: block;
    }
    .img{
        width: 600px;
        height: 300px;
        margin:auto;
        background-image: url('https://dimg.donga.com/wps/NEWS/IMAGE/2021/02/01/105206782.1.jpg');
        background-position: center;
        background-size: cover;
    }
    .price{
        font-size:25px
     }
</style>
<title>주문서 | 공동구매</title>
<link href="https://fonts.googleapis.com/css2?family=Yeon+Sung&display=swap" rel="stylesheet">

<div class="img">
</div>
<!--script-->
<p>
<h1>만병통치약 <span class="price"> 가격: 9999만원/개</span></h1></p>
<h5 class="alert alert-info"> 이 만병통치약은 영국으로부터 시작된 것으로, 중세시대 연금술사들의 지혜가 담겨 지금까지 내려오는 귀한 약입니다. 한번만 드시는 것으로도 신비한 효험을 맛보실 수 있을 것입니다.</h5>

<!--form-->
<!--who-->
<div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">주문자성함</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="inputPassword">
    </div>
</div>
<!--howmany-->
<div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">수량</label>
    <div class="col-sm-10">
        <select class="custom-select " id="inputGroupSelect01">
            <option selected>-- 수량을 선택하세요 --</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
    </div>
</div>
<!--wheretogo-->
<div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">주소</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="inputPassword">
    </div>
</div>
<!--phone-->
<div class="form-group row">
    <label for="inputPassword" class="col-sm-2 col-form-label">전화번호</label>
    <div class="col-sm-10">
        <input type="text" class="form-control" id="inputPassword">
    </div>
</div>
<!--enter-->
<button type="button" class="btn btn-primary center">주문하기</button>