F/E 프로그래밍 독학기(1)

송봉근·2021년 7월 7일

F/E 프로그래밍 독학기

목록 보기

1/3

'스파르타코딩클럽'에서의 첫걸음..

사실 '스파르타코딩클럽'이라는 곳에서 처음은 아니였다.
처음 코딩을 접하고 공부한 곳은 '생활코딩'이라는 유튜브를 통해 하나하나 천천히 익혀나갔었다.(항상 감사합니다 생활코딩님!!)
하지만 차근히 배우는 부분은 좋으나, 결과물을 도출해보고 싶은 마음에 여러곳을 찾아보았고 마침 광고로 '스파르타로 코딩공부를 도와준다'라는 문구를 보게되어 코딩클럽에 참여하게 되었다..

코딩과는 전혀 무관한 삶을 살아왔으나, 새로운 도전을 위해 최선을 다하고자 위 글을 남기려고 한다.

이 글들은 매일단위로 올리면 좋으나 현재의 목표는 매주 1회씩 올리는 것을 목표로 하고있다.

강의를 통한 나의 목표

HTML, CSS에 대한 기초지식을 이해하고, 부트스트랩 활용법 숙지.
서버와 클라이언트의 역할에 대한 이해.
JavaScript 기초문법 준비

1주차 강의 핵심내용

HTML : 웹의 뼈대를 구성하는 역할
CSS : 웹을 꾸미는 디자인의 역할
Javascript : 웹 내에서 동작을 하도록 해주는 역할(반응형...)

서버와 클라이언트의 역할은 무엇일까?

개인 컴퓨터 내에서의 웹페이지 : 클라이언트
대형자료를 모아두고 관리하는 곳 : 서버

클라이언트는 서버에 원하는 자료를 요청하게 되고 서버는 웹(html, css, js)와 데이터베이스에서 요청자료를 찾아와 클라이언트의 컴퓨터에 응답을 한다.
즉, 클라이언트 컴퓨터에서 웹을 수정하거나, 변경시켜도 서버에는 영향을 미치지 않는다는 말이다.(대박신기...)

1주차 첫번째 과제 및 결과물

과제물 제작시 참고사항

class를 활용한 css언어 사용
이미지 반영시 해당코드는 항상 붙어다님
background-image: url("http://~~")
background-position: center
background-size: cover

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

    <style>
        * {
            font-family: 'Jua', sans-serif;
        }
        .wrap{
            width: 500px;
            margin: auto;
        }
        .item-img {
            width: 500px;
            height: 300px;

            /*아래 3줄이 이미지 작성시 항상 같이쓰임!!*/
            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;
            display: block;
            width: 100px;
        }
    </style>

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

</head>

<body>
    <div class="wrap">
        <div class="item-img"></div>
        <div class="item-desc"></div>
            <h1>양초를 팝니다. <span class="price">가격: 3,000원 / 개</span></h1>
            <p>이 양초는 사실 특별한 비밀을 지니고 있어요</p>
        <div class="item-order">
            <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">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 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 type="button" class="btn btn-primary btn-order">주문하기</button>

        </div>
    </div>
</body>

</html>

위와 같이 결과물이 나왔다!!

결론 및 느낀점

사실 나는 저 코드를 짜는데 시간만으로 거의 3~4시간을 지웠다가 다시 만들었다를 반복했는데 막상 답을 확인하고 나니 나 스스로 많이 부족하다는 것을 느꼈다. 아직 기본적인 부분에 있어서도 막히고 있다는점이다... 하지만 내 나름대로의 방식으로 풀어보았고, 어떤점이 문제인지 정확히 알게되어 좋은 방향이였으며, 해당과 같은 방식으로도 복습 예정이다.
해당 과제 및 프로젝트에 대해 GIT과 GITHUB에 반영이되도록 할 예정임.

SEE YOU~

송봉근

피할수 없으면 즐겨라!!

다음 포스트