Home 스파르타 코딩클럽 개발일지_1주차
Post
Cancel

스파르타 코딩클럽 개발일지_1주차

Posted Sep 30, 2021 Updated Dec 24, 2023
By kimcno3
25 min read

수업 목표

  1. 서버와 클라이언트의 역할에 대해 이해한다.
  2. HTML, CSS의 기초 지식을 이해한다. 부트스트랩을 가져다 쓸 줄 안다!
  3. Javascript 기초 문법을 익힌다.

1. HTML

  • HTML은 웹을 구성하는데 있어 뼈대의 역할을 하며 크게 <head> 와 <body>로 구분할 수 있다. <head> 는 페이지의 속성 정보, <body>는 페이지의 내용을 담는다.

  • <head>에 사용되는 대표적인 태그는 <meta>, <title>, <script>, <link>등이 있지만 <body>에서 사용되는 태그는 상대적으로 종류와 형식이 다양하기 때문에 모든 태그를 외워서 페이지를 만드는 것은 사실상 불가능하고 비효율적이라고 한다.

  • 그래서 강의에선 주로 사용되는 태그를 코드스니펫으로 제공하여 원하는 태그를 Ctrl+C,V 하여 실습을 진행하도록 도와주었고 모르는 태그는 구글링을 통해 스스로 찾아내는 방법을 알려주셨다.

1-1 자주쓰이는 HTML 태그

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>스파르타코딩클럽 | HTML 기초</title>
</head>

<body>
    <!-- 구역을 나누는 태그들 -->
    <div>나는 구역을 나누죠</div>
    <p>나는 문단이에요</p>
    <ul>
        <li> bullet point!1 </li>
        <li> bullet point!2 </li>
    </ul>

    <!-- 구역 내 콘텐츠 태그들 -->
    <h1>h1은 제목을 나타내는 태그입니다. 페이지마다 하나씩 꼭 써주는 게 좋아요. 그래야 구글 검색이 잘 되거든요.</h1>
    <h2>h2는 소제목입니다.</h2>
    <h3>h3~h6도 각자의 역할이 있죠. 비중은 작지만..</h3>
    <hr>
    span 태그입니다: 특정 <span style="color:red">글자</span>를 꾸밀 때 써요
    <hr>
    a 태그입니다: <a href="http://naver.com/"> 하이퍼링크 </a>
    <hr>
    img 태그입니다: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" />
    <hr>
    input 태그입니다: <input type="text" />
    <hr>
    button 태그입니다: <button> 버튼입니다</button>
    <hr>
    textarea 태그입니다: <textarea>나는 무엇일까요?</textarea>
</body>

</html>

1-2 Quiz_간단한 로그인 페이지 만들어보기

  • HTML 태그만 사용해서 만든 로그인 페이지 HTML_quiz

2. CSS

  • HTML이 페이지의 뼈대를 만든다면, CSS는 페이지를 꾸미는 역할을 한다.

2-1 CSS 적용 방법

  • 적용 방법은 다음과 같다.(주석 참고)
    1. <head>태그 안에 <style>태그 추가 2. <div>로 CSS적용할 부분을 묶고, 클래스명 지정
    2. .클래스명으로 원하는 클래스를 선택하고 {}안에서 CSS 적용

예시 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>CSS 적용 예시 코드</title>
    <!-- 1. <head>태그 안에 <style>태그 추가 -->
    <style> 
        /* 3. 원하는 클래스명 앞에 .을 넣어 선택하고 {}안에서 CSS적용 */
        .mytitle {
            color: white;
            width: 300px;
            height: 200px;
            
            border-radius: 10px;
            text-align: center;
            padding-top: 40px;
        }
    </style>
</head>

<body>
	<!-- 2. <div>로 CSS적용할 부분을 묶고, 클래스 지정-->
    <div class="mytitle">
        <h1>...</h1>
        <h5>...</h5>
    </div>
   </body>

</html>

2-2 자주 쓰이는 CSS 연습

  • HTML 퀴즈로 만들었던 로그인 페이지에 기본 CSS를 추가한 모습

사용 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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=Sunflower:wght@500&display=swap"
          rel="stylesheet">
    <style>
        * {
            font-family: 'Sunflower', sans-serif;
        }

        .mytitle {
            background-color: blue;

            width: 300px;
            height: 200px;

            color: white;
            text-align: center;

            /*3가지 코드는 세트로 이해하기*/
            background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
            background-size: cover;
            background-position: center;

            border-radius: 10px;

            padding-top: 30px;
        }

        .wrap {
            width: 300px;
            margin: auto;
        }
    </style>
</head>
<body>
<div class="wrap">
    <div class="mytitle">
        <h1>로그인 페이지</h1>
        <h5>아이디, 비밀번호를 입력해주세요</h5>
    </div>
    <div>
        <p>ID: <input type="text"/></p>
        <p>PW: <input type="text"/></p>
        <p>
            <button>로그인하기</button>
        </p>
    </div>
</div>
</body>
</html>

2-2 타인이 만든 CSS 활용법(구글 웹폰트, 부트스트랩)

  • CSS 또한 모든 속성을 다 외우는 것이 아니라 구글링을 통해 필요한 부분을 찾아서 사용하는 것이 좋다. 그 중에서 구글 웹폰트와 부트스트랩을 활용하는 방법을 실습을 통해 익혔다.

  • 구글 웹폰트 링크 : https://fonts.google.com/?subset=korean
  • 부트스트랩 링크 : https://getbootstrap.com/docs/4.0/components/alerts/

2-3 Quiz_나홀로메모장의 포스팅박스를 완성하기!

  • 위 두 링크를 활용해 만든 포스팅 박스 페이지

사용 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128

<!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:900px;
            margin: auto;
        }
        .commend {
            color: blue;
            font-weight: bold;
        }
        .form{
            width: 400px;

            margin: 0px auto 30px auto; /*시계 방향*/
            border: solid 3px black;
            border-radius: 10px;

            padding: 40px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="jumbotron">
            <h1 class="display-4">나홀로 링크 메모장!</h1>
            <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
            <hr class="my-4">
            <p class="lead">
                <a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
            </p>
        </div>
        <div class="form">
            <div class="form-group">
                <label for="exampleInputEmail1">아티클 URL</label>
                <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp"
                       placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 커멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></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://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>
            <div class="card">
                <img class="card-img-top" src="https://images.unsplash.com/photo-1632746973199-14de86b1c430?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80" alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title"><a href="...">여기 기사 제목이 들어가죠</a></h5>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text commend">여기에 코멘트가 들어갑니다.</p>
                </div>
            </div>

    </div>
</body>

</html>

3. Javascript

Javascript는 브라우저가 이해할 수 있는 프로그래밍 언어로 웹 페이지의 동작을 구현하는 역할을 한다.

3-1 Javascript - HTML 연결방법

  1. <head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성
  2. <script> ~ </script> 내에 javascript 함수를 작성
  3. <body> ~ </body> 내에 원하는 태그에 함수를 연결

3-2 Javascript 기본 문법

1) 변수 & 기본연산

  • 변수 대입( a = 2 )의 의미: “오른쪽에 있는 것을 왼쪽에 넣는 것!”(2를 a라는 변수에 넣는다)

  • let으로 변수를 선언합니다.

    1
2
3
4
5

    let num = 20
num = 'Bob'
    
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
    • 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
    1
2
3
4
5
6
7
8
9
10
11
12
13
14

    let a = 1
let b = 2
    
a+b // 3
a/b // 0.5
    
let first = 'Bob'
let last = 'Lee'
    
first+last // 'BobLee'
    
first+' '+last // 'Bob Lee'
    
first+a // Bob1 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.

  • 변수명은 아무렇게나?

    1
2
3
4
5
6
7
8

      let first_name = 'bob' // snake case라고 합니다.
    
  또는,
    
  let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
    
  과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
  다른 특수문자 또는 띄워쓰기는 불가능합니다!

    2) 리스트 & 딕셔너리

  • 리스트: 순서를 지켜서 가지고 있는 형태입니다.

    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

      let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
    
  // 또는,
    
  let b_list = [1,2,'hey',3] // 로 선언 가능
    
  b_list[1] // 2 를 출력
  b_list[2] // 'hey'를 출력
    
  // 리스트에 요소 넣기
  b_list.push('헤이')
  b_list // [1, 2, "hey", 3, "헤이"] 를 출력
    
  // 리스트의 길이 구하기
  b_list.length // 5를 출력

  • 딕셔너리: 키(key)-밸류(value) 값의 묶음

    1
2
3
4
5
6
7
8
9
10

      let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
    
  // 또는,
    
  let b_dict = {'name':'Bob','age':21} // 로 선언 가능
  b_dict['name'] // 'Bob'을 출력
  b_dict['age'] // 21을 출력
    
  b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기
  b_dict // {name: "Bob", age: 21, height: 180}을 출력

  • 리스트와 딕셔너리의 조합

    1
2
3
4
5
6
7
8
9
10

      names = [{'name':'bob','age':20},{'name':'carry','age':38}]
    
  // names[0]['name']의 값은? 'bob'
  // names[1]['name']의 값은? 'carry'
    
  new_name = {'name':'john','age':7}
  names.push(new_name)
    
  // names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}]
  // names[2]['name']의 값은? 'john'
  • 리스트와 딕셔너리의 조합이 필요한 이유?
    순서를 표시할 수 있고, 정보를 묶을 수 있다.
    보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있다.

3) 기본함수들

  • ‘나눗셈의나머지’를 구하고 싶은 경우
    1
2
3
4

      let a = 20
  let b = 7

  a % b = 6
  • 모든 알파벳을 대문자로 바꾸고 싶은 경우
    1
2
3

      let myname = 'spartacodingclub'

  myname.toUpperCase() // SPARTACODINGCLUB
  • 또, 특정 문자로 문자열을 나누고 싶은 경우
    1
2
3
4
5
6
7
8
9
10
11
12
13

      let myemail = 'sparta@gmail.com'

  let result = myemail.split('@') // ['sparta','gmail.com']

  result[0] // sparta
  result[1] // gmail.com

  let result2 = result[1].split('.') // ['gmail','com']

  result2[0] // gmail -> 우리가 알고 싶었던 것!
  result2[1] // com

  myemail.split('@')[1].split('.')[0] // gmail -> 간단하게 쓸 수도 있다!
  • 특정 문자로 나누고 싶은 경우 2
    1
2
3

      let txt = '서울시-마포구-망원동'

  ****let names = txt.split('-'); // ['서울시','마포구','망원동']
  • 특정 문자로 합치고 싶은 경우
    1

      let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)

    4) 함수(function)

  • 기본 생김새
    1
2
3
4
5
6

      // 만들기
  function 함수이름(필요한 변수들) {
  	내릴 명령들을 순차적으로 작성
  }
  // 사용하기
  함수이름(필요한 변수들);
  • 예시
    1
2
3
4
5
6
7
8

      // 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
  function sum(num1, num2) {
  	console.log('num1: ', num1, ', num2: ', num2);
  	return num1 + num2;
  }
    
  sum(3, 5); // 8
  sum(4, -1); // 3

    5) 조건문

  • 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
    1
2
3
4
5
6
7
8
9

      function is_adult(age){
  	if(age > 20){
  		alert('성인이에요')
  	} else {
  		alert('청소년이에요')
  	}
  }
    
  is_adult(25)
  • if, else if, else if, else if else
    1
2
3
4
5
6
7
8
9
10
11

      function is_adult(age){
  	if(age > 20){
  		alert('성인이에요')
  	} else if (age > 10) {
  		alert('청소년이에요')
  	} else {
  		alert('10살 이하!')
  	}
  }
    
  is_adult(12)
  • AND 조건과 OR 조건!
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

      // AND 조건은 이렇게
  function is_adult(age, sex){
  	if(age > 20 && sex == '여'){
  		alert('성인 여성')
  	} else if (age > 20 && sex == '남') {
  		alert('성인 남성')
  	} else {
  		alert('청소년이에요')
  	}
  }
    
  // 참고: OR 조건은 이렇게
  function is_adult(age, sex){
  	if (age > 65 || age < 10) {
  		alert('탑승하실 수 없습니다')
  	} else if(age > 20 && sex == '여'){
  		alert('성인 여성')
  	} else if (age > 20 && sex == '남') {
  		alert('성인 남성')
  	} else {
  		alert('청소년이에요')
  	}
  }
    
  is_adult(25,'남')

6) 반복문

  • 기본 생김새
    1
2
3
4
5
6

        for (let i = 0; i < 100; i++) {
        console.log(i);
    }
    // for(1.시작조건; 2.종료조건; 4.더하기) {
    //	3.실행;
    // }

    3-3 Javascript 반복문 연습하기

    1) 서울특별시 미세먼지 값

    1
2
3
4
5
6
7
8

      for (let i = 0; i < mise_list.length; i++) {
    let mise = mise_list[i];
    if (mise["IDEX_MVL"] < 40) {
      let gu_name = mise["MSRSTE_NM"]; // 서울시 내 구 이름
      let gu_mise = mise["IDEX_MVL"]; // 구별 미세먼지 수치
      console.log("40보다 작은 구: " + gu_name + ", " + gu_mise);
    }
  }

    2) 따릉이 현황

    1
2
3
4
5
6

      for (let i = 0; i < bikes.length; i++) {
      if (bikes[i]['parkingBikeTotCnt'] <= 5) { // 주차된 따릉이 대수
          let station = bikes[i]['stationName'];	// 주차장 이름
          console.log(station);
      }
  }

1주차 숙제

나만의 쇼핑몰 페이지 제작

아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요. (아이템은 가상으로, 아무거나 파셔도 좋습니다.^^;;)

기능: 주문하기 버튼을 클릭했을 때 ‘주문이 완료되었습니다.’라는 얼럿을 띄워주세요.

1) 기획서

2) 완성된 페이지 모습

3) 사용 코드

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

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

    <!-- Google fonts 추가    -->
    <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=Nanum+Gothic:wght@700&display=swap" rel="stylesheet">

    <!-- 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>
    <style>
        * {
            font-family: 'Nanum Gothic', sans-serif;
        }
        .wrap {
            width: 700px;
            margin: 50px auto auto auto;
        }
        .img {
            width: 700px;
            height: 500px;

            background-image: url("https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80.png");
            background-position: center;
            background-size: cover;

        }
        /* img{*/
        /*    max-width: 100%;*/
        /*    max-height: 100%;*/
        /*}*/
        .description {
            font-size: 20px;
        }
        .description_price {
            font-weight: normal;
            font-size: 20px;

        }
        .btn-primary {
            font-size: 20px;

            display: block;
            width: auto;
            margin: auto;

            border-radius: 5px;
        }
    </style>
    <script>
        function ordered() {
            alert("주문완료!!");
        }
    </script>
</head>

<body>
    <div class="wrap">
        <div class="img"> </div>
<!--    <img src="https://images.unsplash.com/photo-1568702846914-96b305d2aaeb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1170&q=80.png">-->
        <div class="description">
            <h1>사과를 팝니다 <span class="description_price">가격: 1,000원/개</span></h1>
            <p>이 사과는 먹으면 기분이 좋아지는 효과가 있어요. 이유는 그냥 달고 맛있거든요😁</p>
        </div>
        <div class="orderbox">
            <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">3개</option>
                    <option value="3">6개</option>
                    <option value="3">12개</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 onclick = ordered() type="button" class="btn-primary">주문하기</button>
        </div>
    </div>
</body>
</html>

4) 숙제 해결 간에 마주친 문제점

  • background 속성을 이용한 이미지 구현 실패
    • 문제점 파악: width값과 height값을 주지않아 발생한 문제로 파악
    • 해결방법: <img> 태그에 직접 CSS 적용하여 구현(위 코드에서 주석처리된 부분)

숙제 제출 후 문제점을 파악하여 개발일지에 올라간 코드에는 background 속성이 사용된 코드로 업로드되었습니다. (숙제로 제출한 코드는 <img> 태그 사용)

Sparta
Sparta
This post is licensed under CC BY 4.0 by the author.
Recently Updated
Contents