코딩하는 털보

웹개발 종합반 WIL - 1W 본문

Boot Camp/항해 99

웹개발 종합반 WIL - 1W

이정인 2021. 7. 25. 17:24

웹의 동작 개념

  • 웹의 동작 개념(HTML을 받는 경우)

우리가 보는 웹페이지는 서버에서 준비해두었던 것을 받아온 것이다.

브라우저는 서버에 요청을 보내고 받은 HTML 파일을 그려주는 일을 처리한다. 이때 브라우저는 서버의 "API"라는 창구를 통해 요청을 보낸다.

img

  • 웹의 동작 개념(데이터만 받는 경우)

서버로부터 받는 것은 항상 HTML이 아니다. 특히 화면에서 부분적인 데이터를 변경할 필요가 있을때 모든 HTML을 다시 불러오는 것은 매우 비효율적이므로 변경된 데이터만 가져올 수 있다. 일반적으로 데이터를 요청했을때는 서버가 Database에서 데이터를 꺼내서 보내준다.

img

특히 데이터를 주고받는 형식 중에서 위와 같은 것을 "JSON"이라고 한다.

HTML과 CSS의 개념

  • HTML은 뼈대, CSS는 꾸미기!
  • CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에, 우리는 미리 작성되고 공유되어있는 CSS를 활용할 수 있다. ex. BootStrap

HTML

  • HTML은 크게 head와 body로 구성된다.
  • head에는 페이지에서는 보이지 않는 속성 정보를 담고 있다.
  • body에는 페이지에서 보이게 되는 내용을 담고 있다.
  • HTML 코드에는 웹페이지를 구성할 수 있는 여러가지 태그나 속성이 있지만, 다 외우려고 하지 말고 필요할 때 찾아서 쓰려고 해보자.
<!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">

    <!-- Google Font에서 폰트를 참조하는 부분이다.-->
    <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=Stylish&display=swap" rel="stylesheet">

    <!-- 부트스트랩 CSS와 JS를 가져오는 부분이다.-->
    <!-- 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>
    <!-- CSS를 통해서 특정 스타일에 대해 정의하는 부분이다.-->
    <style>
        /* "*"은 모든 영역에 적용된다. */
        * {
            font-family: 'Stylish', sans-serif;
        }

        .wrap {
            /* width는 넓이, heigt는 높이를 조정한다. */
            width: 900px;
            /* margin은 바깥쪽 여백, padding은 안쪽 여백을 조정한다. */
            /* margin auto는 가로 양쪽 여백을 동일하게 최대로 하여 중앙 정렬한다. */
            margin: auto;
        }

        .comment {
            color: blue;
        }

        .title {
            color: deepskyblue;
        }

        .postingbox {
            width: 500px;
            margin: 0px auto 20px auto;
            padding: 50px;
            border: 3px solid black;
            border-radius: 5px;
        }
    </style>
    <!--    -->
    <script>
        function hey() {
            alert('안녕!!');
        }
    </script>

</head>

<body>
<!-- class 속성에 <style>에 정의되어 있는 스타일을 입력할 수 있다.-->
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
            </p>
        </div>
        <div class="postingbox">
            <div class="form-group">
                <label for="InputURL">아티클 URL</label>
                <input type="email" class="form-control" id="InputURL" aria-describedby="emailHelp">
            </div>
            <div class="form-group">
                <label for="InputComment">간단 코멘트</label>
                <textarea type="password" class="form-control" id="InputComment"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>
        </div>
        <div class="card-columns">
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <!-- class 속성에 2개를 입력하면 2가지 모두 적용된다(중첩).-->
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top"
                     src="https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="https://www.naver.com/" class="card-title title">여기 기사 제목이 들어가죠</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Javascript

브라우저가 알아들을 수 있는 프로그래밍 언어이다.

  • 변수 선언 및 대입
  • let a = 5 let first_name = 'jeongin'
  • 변수
    • 변수는 값을 담는 박스이다.
    • 문자열도 담을 수 있으며 "", '' 로 값을 묶는다.
    • 변수 이름은 다른 사람이 봐도 알아 보기 쉽도록 짓는다.
  • 자료형
    • 리스트 : 요소에 순서가 있는 자료형, 대괄호로 묶는다.
    • let a_list = ['수박', '참외', '배'] a_list[0] "수박" a_list.push('사과') a_list (4) ["수박", "참외", "배", "사과"]
    • 딕셔너리 : key/value 쌍으로 이루어진 순서가 없는 자료형, 중괄호로 묶는다.
    • let a_dict = {'name':'bob', 'age':27} a_dict["name"] "bob" a_dict["age"] 27 a_dict["height"] = 180 180 a_dict["height"] 180 //딕셔너리와 리스트가 서로의 요소로 쓰일 수도 있다. a_dict["fruits"] = a_list (4) ["수박", "참외", "배", "사과"] a_dict {name: "bob", age: 27, height: 180, fruits: Array(4)} a_dict["fruits"] (4) ["수박", "참외", "배", "사과"] a_dict["fruits"][3] "사과"
  • 조건문
    • if 
      let age = 24 if (age > 20) { //콘솔창에 출력하기 console.log('성인입니다.') } else if (age > 10) { console.log('청소년입니다.') } else { console.log('아동입니다.') }
    • if ( 조건문 ) { 동작 }
  • 반복문
    • for
    • for ( let i = 0; i < 10; i++ ) { console.log(i) } 0 1 2 3 4 5 6 7 8 9 let people = ['철수','영희','민수','형준','기남','동희'] for ( let i = 0; i < people.length; i++ ) { console.log(people[i]) } 철수 영희 민수 형준 기남 동희 let scores = [ {'name':'철수', 'score':90}, {'name':'영희', 'score':85}, {'name':'민수', 'score':70}, {'name':'형준', 'score':50}, {'name':'기남', 'score':68}, {'name':'동희', 'score':30}, ] for ( let i = 0; i < scores.length; i++ ) { let name = scores[i]['name'] let score = scores[i]['score'] if ( score > 60 ) { console.log(name, score) } } 철수 90 영희 85 민수 70 기남 68

1주차 숙제 (상품 페이지 만들기)

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

    <!-- font -->
    <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=Do+Hyeon&display=swap" rel="stylesheet">

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

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

    <style>
        * {
            font-family: 'Do Hyeon', sans-serif;
        }

        .wrap {
            width: 500px;
            margin: 50px auto 0 auto;
        }

        .item_image {
            width: 500px;
            height: 300px;
            background-image: url("https://cdn.pixabay.com/photo/2015/07/19/10/00/school-work-851328_1280.jpg");
            background-size: cover;
            background-position: center;
        }

        .title {
            display: inline-block;
            margin: 10px 0px 0px 0px;
            width: 120px;
            font-size: 30px;
            font-weight: bold;
        }

        .cost {
            display: inline-block;
            margin: 10px 0px 0px 0px;
            width: 150px;
            font-size: 13px;
        }

        .content {
            margin: 10px 0px 0px 0px;
            font-size: 13px;
        }

        .order_button {
            margin: auto;
            display: block;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="item_image">
        </div>
        <div>
            <div class="title">학교 책상</div>
            <div class="cost">가격 : 30,000원 / 개</div>
        </div>
        <div class="content">
            그 시절, 그 감성을 다시 느낄 수 있는 레트로 책상.
        </div>
        <div class="title">주문하기</div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주문자 이름:</span>
            </div>
            <input type="text" class="form-control">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">수량:</span>
            </div>
            <select class="custom-select">
                <option selected>--수량을 선택하세요.--</option>
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
                <option value="5">5</option>
            </select>
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">주소:</span>
            </div>
            <input type="text" class="form-control">
        </div>
        <div class="input-group mb-3">
            <div class="input-group-prepend">
                <span class="input-group-text">전화번호:</span>
            </div>
            <input type="text" class="form-control">
        </div>
        <button onclick="order()" type="button" class="btn btn-primary order_button">주문하기</button>
    </div>
</body>

</html>

'Boot Camp/항해 99' Related Articles more
Comments