코딩 기초 공부

개발일지 [왕초보]웹개발 종합반 1주차

차가운핫초코 2022. 1. 5. 14:55

이제 처음에 숙제들은 굉장히 기본적이고 쉬운 난이도여서 가볍게 했지만 1주차 마지막의 제출을 위한 숙제는 생각보다 어려웠던 것 같다. 하지만 기존의 알려준 내용과 부트스트랩을 잘 이용하면 해낼 수 있는 정도여서 재밌게 했다.

 

처음의 예시 사진을 봤을 때 '쉬울 거 같은데?'라고 생각하면서 자만을 했는데 막상 직접 하려고 하니까 잘 되지 않았고 어디서부터 시작해야 할지 갈피가 잘 안잡혔다. 하지만 전에 해봤던 내용이었기에 한 번 다시 내가 했었던 것을 다시 보면서 필요한 부분을 보고 넣어보면서 하니까 점차 어떻게 해야 할지 실마리가 잡혔고 천천히 하나하나 비슷하게 만들었다.

내가 만든 사이트 이미지

어지저찌 이렇게 다 완성하였을 때는 한 30분 정도 시간을 소요하였고 완벽하진 않지만 그래도 나름 나쁘지 않았다고 생각이 든다. 이미지는 구글에서 텐트를 아무거나 가져왔는데 이미지 주소의 양이 방대해서 코딩을 하는데 좌우로 이동할 때 약간 방해가 되었던 것 같다. 앞으로 웬만하면 이미지 주소의 양이 적은 걸로 가져와야겠다..

마지막으로 내가 짠 코드이다.

<!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 rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Do+Hyeon&family=Yeon+Sung&display=swap"
          rel="stylesheet">
    <style>
        * {
            font-family: 'Black Han Sans', sans-serif;
            font-family: 'Do Hyeon', sans-serif;
            font-family: 'Yeon Sung', cursive
        }
        span {
            font-size: 15px;
        }
        .product {
            width: 400px;
            margin: auto;
            display: block;
        }
        .btn {
            margin: auto;
            display: block;
        }
    </style>
</head>

<body>
<div class="product">
    <img width="400px" height="350px" src="data:image/jpeg;base64,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">
    <h3>텐트를 팝니다<span>가격:60만원/개</span></h3>
    <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">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>
    <button class="btn btn-primary btn" type="submit">주문하기</button>
</div>

</body>

</html>

부트스트랩과 스파르타 코딩클럽에서 전에 했던 내용을 이용해서 만들었는데 처음에 겹치는 내용의 css도 있었지만 합치고 다시 어울리게 하면서 코드를 정리하면서 깔끔하게 만들려고 했다. ㅎㅎ