스파르타 웹개발 종합반 1주차 강의 개발일지

34633 단어 스파르타코딩코딩웹개발종합반스파르타코딩

웹기초

HTML, CSS, Javascript

1주 차에는 웹 기초에 대해 공부했다.
HTML, CSS, Javascript의 개념, 기초 문법 등을 배웠다.
첫 주 숙제는 쇼핑몰 메인페이지 만들기.

예시로 나온 페이지와 최대한 비슷하게 만들어보려고 했는데
주문 내용을 입력하는 칸을 부트스트랩에서 가져오다가 뭔가 잘못돼서 수량을 만드는 칸의 크기가 뭔가 이상해졌다.

조금 더 공부해서 깔끔하게 만들어야지.

<!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=Jua&display=swap" rel="stylesheet">
</head>

<style>
    *{
        font-family: 'Black Han Sans', sans-serif;
font-family: 'Jua', sans-serif;
    }

    .image {

        background-color: green;

        height: 500px;
        width: 500px;

        margin: 50px auto 50px auto;

        background-image: url("https://unifriend.co.kr/web/product/tiny/202109/484827b7cfdbe50f7afd87b483bce9b2.jpg");
        background-size: 100% 100%;

    }

    .descript {

        width: 500px;

        margin: auto;
    }

    .order {
        width: 500px;

        margin: 50px auto 50px auto;
    }

    .btn{
        width: 100px;
        margin: auto;
        display: block;
    }

    .input-group{
        width: 500px;
        margin: 10px auto 10px auto;
    }
    .selection{
        width: 442px;
    }
</style>

<div class=image>

</div>

<body>

<div class=descript>
    <h1>블루카양면9부상하 <span style="font-size:50%">가격: 8,900원/벌</span></h1>
    <p>면 100%의 원단으로 편면조직이 2중으로 짜여져 있어 싱글보다 보온효과가 우수합니다. 부드러운 촉감과 넉넉한 품으로 활동성이 많은 우리 아이들에게 편한 착용감을 제공합니다. 3년 이상 농약과 화학비료를
        사용하지 않은 토양에서 재배된 유기농 순면 원단을 사용하여 민감한 우리 아이들 피부에게도 부담없이 입힐 수 있습니다.</p>

</div>

    <div class = "order">
        <div>
            <div>
                <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">주문자 이름</div>
            </div>
            <input type="text" class="form-control">
            </div>
            </div>
        </div>
        <div> <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group">
            <div class="input-group-prepend">
            <div class="input-group-text">수량</div>
                <select class="form-control selection">
                <option value="" disabled selected>수량을 선택하세요</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>10</option>
                <option>20</option>
                </select>
            </div>
            </div>
        </div>

        <div>
            <div>
                <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">주소</div>
            </div>
            <input type="text" class="form-control" id="inlineFormInputGroup">
            </div>
            </div>
        </div>

        <div>
            <div>
                <label class="sr-only" for="inlineFormInputGroup">Username</label>
            <div class="input-group">
            <div class="input-group-prepend">
              <div class="input-group-text">전화번호</div>
            </div>
            <input type="text" class="form-control">
            </div>
            </div>
        </div>
        <button type="submit" class="btn btn-primary">주문하기</button>

    </div>

</body>

</html>

스파르타 웹개발 종합반 첫 날 일지(~1-11)

스파르타 웹개발 종합반 둘째 날 일지(1-12~16)

매일 데이터 로직 업데이트
arcGis의 shape 파일에 있는 것을 읽습니다.dbf 데이터

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage