스파르타 코딩클럽 개발일지_1주차
수업 목표
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 태그
<!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 태그만 사용해서 만든 로그인 페이지
2. CSS
- HTML이 페이지의 뼈대를 만든다면, CSS는 페이지를 꾸미는 역할을 한다.
2-1 CSS 적용 방법
- 적용 방법은 다음과 같다.(주석 참고)
1. <head>태그 안에 <style>태그 추가
2. <div>로 CSS적용할 부분을 묶고, 클래스명 지정
3. .클래스명으로 원하는 클래스를 선택하고 {}안에서 CSS 적용
예시 코드
<!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를 추가한 모습
사용 코드
<!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_나홀로메모장의 포스팅박스를 완성하기!
- 위 두 링크를 활용해 만든 포스팅 박스 페이지
사용 코드
<!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 연결방법
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성<script> ~ </script> 내에 javascript 함수를 작성<body> ~ </body> 내에 원하는 태그에 함수를 연결
3-2 Javascript 기본 문법
1) 변수 & 기본연산
-
변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"(2를 a라는 변수에 넣는다)
-
let으로 변수를 선언합니다.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
- 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
-
변수명은 아무렇게나?
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
2) 리스트 & 딕셔너리
- 리스트: 순서를 지켜서 가지고 있는 형태입니다.
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) 값의 묶음
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}을 출력
- 리스트와 딕셔너리의 조합
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) 기본함수들
-
'나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6
-
모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB
-
또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = '[email protected]'
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
let txt = '서울시-마포구-망원동'
****let names = txt.split('-'); // ['서울시','마포구','망원동']
-
특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
4) 함수(function)
- 기본 생김새
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
- 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
5) 조건문
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
- if, else if, else if, else if else
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
- AND 조건과 OR 조건!
// 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) 반복문
- 기본 생김새
for (let i = 0; i < 100; i++) {
console.log(i);
}
// for(1.시작조건; 2.종료조건; 4.더하기) {
// 3.실행;
// }
3-3 Javascript 반복문 연습하기
1) 서울특별시 미세먼지 값
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) 따릉이 현황
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) { // 주차된 따릉이 대수
let station = bikes[i]['stationName']; // 주차장 이름
console.log(station);
}
}
1주차 숙제
나만의 쇼핑몰 페이지 제작
아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요. (아이템은 가상으로, 아무거나 파셔도 좋습니다.^^;;)
기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요.
1) 기획서
HTML은 웹을 구성하는데 있어 뼈대의 역할을 하며 크게 <head> 와 <body>로 구분할 수 있다. <head> 는 페이지의 속성 정보, <body>는 페이지의 내용을 담는다.
<head>에 사용되는 대표적인 태그는 <meta>, <title>, <script>, <link>등이 있지만 <body>에서 사용되는 태그는 상대적으로 종류와 형식이 다양하기 때문에 모든 태그를 외워서 페이지를 만드는 것은 사실상 불가능하고 비효율적이라고 한다.
그래서 강의에선 주로 사용되는 태그를 코드스니펫으로 제공하여 원하는 태그를 Ctrl+C,V 하여 실습을 진행하도록 도와주었고 모르는 태그는 구글링을 통해 스스로 찾아내는 방법을 알려주셨다.
<!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>- HTML이 페이지의 뼈대를 만든다면, CSS는 페이지를 꾸미는 역할을 한다.
2-1 CSS 적용 방법
- 적용 방법은 다음과 같다.(주석 참고)
1.<head>태그 안에<style>태그 추가
2.<div>로 CSS적용할 부분을 묶고, 클래스명 지정
3..클래스명으로 원하는 클래스를 선택하고 {}안에서 CSS 적용
예시 코드
<!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를 추가한 모습
사용 코드
<!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_나홀로메모장의 포스팅박스를 완성하기!
- 위 두 링크를 활용해 만든 포스팅 박스 페이지
사용 코드
<!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 연결방법
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성<script> ~ </script> 내에 javascript 함수를 작성<body> ~ </body> 내에 원하는 태그에 함수를 연결
3-2 Javascript 기본 문법
1) 변수 & 기본연산
-
변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"(2를 a라는 변수에 넣는다)
-
let으로 변수를 선언합니다.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.
- 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.
-
변수명은 아무렇게나?
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
2) 리스트 & 딕셔너리
- 리스트: 순서를 지켜서 가지고 있는 형태입니다.
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) 값의 묶음
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}을 출력
- 리스트와 딕셔너리의 조합
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) 기본함수들
-
'나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6
-
모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB
-
또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = '[email protected]'
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
let txt = '서울시-마포구-망원동'
****let names = txt.split('-'); // ['서울시','마포구','망원동']
-
특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
4) 함수(function)
- 기본 생김새
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
- 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
5) 조건문
- 20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
- if, else if, else if, else if else
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)
- AND 조건과 OR 조건!
// 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) 반복문
- 기본 생김새
for (let i = 0; i < 100; i++) {
console.log(i);
}
// for(1.시작조건; 2.종료조건; 4.더하기) {
// 3.실행;
// }
3-3 Javascript 반복문 연습하기
1) 서울특별시 미세먼지 값
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) 따릉이 현황
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) { // 주차된 따릉이 대수
let station = bikes[i]['stationName']; // 주차장 이름
console.log(station);
}
}
1주차 숙제
나만의 쇼핑몰 페이지 제작
아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요. (아이템은 가상으로, 아무거나 파셔도 좋습니다.^^;;)
기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요.
1) 기획서
<head> ~ </head> 안에 <script> ~ </script> 로 공간을 만들어 작성<script> ~ </script> 내에 javascript 함수를 작성<body> ~ </body> 내에 원하는 태그에 함수를 연결변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"(2를 a라는 변수에 넣는다)
let으로 변수를 선언합니다.
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스예요.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다.- 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다.
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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다.변수명은 아무렇게나?
let first_name = 'bob' // snake case라고 합니다.
또는,
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!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를 출력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}을 출력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 함수를 이용해 간단하게 대응할 수 있다.
'나눗셈의나머지'를 구하고 싶은 경우
let a = 20
let b = 7
a % b = 6모든 알파벳을 대문자로 바꾸고 싶은 경우
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB또, 특정 문자로 문자열을 나누고 싶은 경우
let myemail = '[email protected]'
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
let txt = '서울시-마포구-망원동'
****let names = txt.split('-'); // ['서울시','마포구','망원동']특정 문자로 합치고 싶은 경우
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)function is_adult(age){
if(age > 20){
alert('성인이에요')
} else if (age > 10) {
alert('청소년이에요')
} else {
alert('10살 이하!')
}
}
is_adult(12)// 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,'남') for (let i = 0; i < 100; i++) {
console.log(i);
}
// for(1.시작조건; 2.종료조건; 4.더하기) {
// 3.실행;
// } 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);
}
} for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) { // 주차된 따릉이 대수
let station = bikes[i]['stationName']; // 주차장 이름
console.log(station);
}
}나만의 쇼핑몰 페이지 제작
아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해주세요. (아이템은 가상으로, 아무거나 파셔도 좋습니다.^^;;)
기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄워주세요.
1) 기획서
2) 완성된 페이지 모습
3) 사용 코드
<!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>태그 사용)
Author And Source
이 문제에 관하여(스파르타 코딩클럽 개발일지_1주차), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimcno3/스파르타-코딩클럽-개발일지1주차저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
