웹개발_웹프로그래밍
1주차 코딩 개발 일지 (웹개발)
Victoria J
2022. 2. 9. 01:04
1-3: html, css 기본내용
줄이 안맞을 때 Ctrl+A 전체선택 후 Ctrl+Alt+L을 누르면 자동 정렬
뼈대 역할을 하는 html은 문서 형태를 기반으로 한다.
이 중 기본적으로 <head> 안에는 자바스크립트(움직이기), css(꾸미기), title, meta(닫는 태그 없음 ex) </title> 처럼 안닫히고 아래처럼 닫힘)
<meta charset="UTF-8">이 들어 있고 <body>는 흰 여백 공간에 들어가는 모든 것- 아래 참고
1-3~4: 기초 문법
```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-4: 간단한 로그인 페이지 만들기
http://localhost:63342/frontend/01_login.html?_ijt=m5r6riv9vgrouvpho0gn42ncdq&_ij_reload=RELOAD_ON_SAVE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
</head>
<body>
<h1>로그인 페이지</h1>
<P> ID: <input type="text"/></P>
<P> PW: <input type="text"/></P>
<button>로그인하기</button>
</body>
</html>h1은 제목: 로그인 페이지
<p>: 여는것, </p>: 닫는것 → 문단 나누기
lD or PW: <input type="text"/> → 입력란
<button>, </button> → 버튼: 로그인하기
아래는 코딩 잘하는 오빠한테 나 이제 코딩 시작했다! 라고 알리려고 응용한 버전 ㅋㅅㅋ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ㅎㅇ에디오빠 질문을 하나 해봄</title>
</head>
<body>
<h1>야심찬 새벽, 지금 당장 먹고싶은 야식은?</h1>
<P> 답변: <input type="text"/></P>
<button><a href="https://youtu.be/jjRc_e_zCrM"> 제출 </a></button>
</body>
</html>
1-5: css 기초- 로그인 페이지 색상 입혀보기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>로그인페이지</title>
<style>
.mytitle {
color: darkblue;
font-size: 40px;
}
</style>
</head>
<body>
<h1 class="mytitle">로그인 페이지</h1>
<P> ID: <input type="text"/></P>
<P> PW: <input type="text"/></P>
<button>로그인하기</button>
</body>
</html>👉 <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성한다
mytitle라는 클래스를 가리킬 때, .mytitle { ... } 라고 써줘야 함
잘라내기 Ctrl+X/ 붙히기 Ctrl+V
배경관련 background-colo/r background-image/ background-size
사이즈 width/ height
폰트 font-size/ font-weight/ font-famliy/ color
간격 margin/ padding
1-6: 자주 쓰이는 css 연습
[연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding
먼저 배경색을 입혀서 체크부터 하기(나중엔 삭제)
background-color: green;스파르타 배경 이미지는 아래와 같이 3형식으로 이루어짐 (보통 이렇게 많이 쓰여서 그대로 가져오자)
background-image: url("https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg");
background-size: cover;
background-position: center;이 로그인 페이지를 가운데로 가져오려면 width를 주고, margin: auto를 사용 후 그래도 안되면 display:block을 추가!
.wrap {
width: 300px;
margin: auto;
}margin: 내 바깥으로 여백주기
ex) margin: 20px opx opx 30px; 시계 방향으로 각각 위 오른쪽 아래 왼쪽 20px 위, 30px 왼쪽
padding 내 안쪽으로 여백주기
margin: auto; 동등하게 여백주기
class: "mybtn, wrap, mytitle" 차이점
같은 글이라도, 제목이 있고, 본문이 있는데
각 문서의 제목마다 mytitle 이란 클래스Class로 지정해놓으면
CSS (style 태그안의 코드) 로 제목들을 한꺼번에 글자를 크게 한다던지, 색깔을 넣는다는지
일괄적으로 디자인을 할 수 있는 용도이다.
나머지 mytitle, wrap 이후에도 mybtn 이런식으로 그룹화하면 나중에 꾸미기 편해진다.
예를들어 확인버튼은 mybtn_ok 취소는 mybtn_cancel 로 클래스 지정해놓으면 나중에 CSS에서 확인 버튼은 파란색 넣고, 취소는 회색 이렇게 각 그룹지정이 가능하다
큰틀의 크기를 조정하기 위해 wrap을 쓰고, 각 문서의 제목에 해당되는건 mytitle 이란 이름으로 묶고 버튼 같은건 mybtn을 사용한다. div와 같은 html태그는 작성되는 컨텐츠가(글, 그림, 박스) 등인지 구분하는 것으로 <div> 내용 </div> 의 형식에서 앞에 <div (이 란에 class: mytitle, wrap, mybtn을 넣고 head로 가서 .mytitle, wrap, mybtn {내용} 등의 css 꾸미기를 해준다.)
글 자체를 박스로 강제로 지정해서 옮겨주는 것은 display: block;4
class에는 중첩이라는 개념이 있어서 두 개를 매길수도 있음
ex) 로그인하기 버튼을 빨간색으로 바꾸기 위한 css를 head에 입력한 후 body의 로그인하기 html 태그인 button에 아래와 같이 추가해준다.
1. head 태그 안 <style> 안에 css 입력
.red-font {
color: red;
font-size: 16px
}2. red-font 가져와 "myntn (red-font)" 추가하기
<button class="mybtn red-font">로그인하기</button>
1-7 폰트, 주석, 파일 분리
구글 웹폰트
https://fonts.google.com/?subset=korean
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
-글씨체 바꾸기
head 태그의 <title>밑에 아래 링크 붙혀주기
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"><style> 태그에 * {css 복붙} font-family: 'Jua', sans-serif;
<style>
*{
font-family: 'Jua', sans-serif;
}*는 글씨체 다 적용시킨다는 뜻
-주석: 잠시 안보이게 하기
해당시킬 문구 드래그 후 Ctrl+/ 누르면 아래와 같이 변하는데 css나 html 별로 다르기 때문에 Ctrl+/ 만 외우면 된다.
/*font-family: 'Jua', sans-serif;*/ 글씨체 적용시키는 CSS에 Ctrl+/ 삽입했을 때<h5>아이디, 패스워드를 입력해주세요</h5>--> html 문구란에 Ctrl+/ 삽입했을 때
-파일 분리
1 frontend 파일 오른쪽 마우스 버튼 클릭
2 New> Stylesheet 누른 후 mystyle 이름으로 같은 폴더 안에 생성
3 head 태그 안 <style> 내용 </style> 중 내용은 다 가져와서 mystyle 안에 복붙
4 <style> </style>은 삭제
5 <link rel="stylesheet" type="text/css" href = "(css파일이름).css"> 이 문법 head 태그 밑에 복붙하기
6 (css파일이름) 안에 mystyle 삽입
http://localhost:63342/frontend/01_login.html?_ijt=m5r6riv9vgrouvpho0gn42ncdq&_ij_reload=RELOAD_ON_SAVE
1-8 부트스트랩, 예쁜 CSS 모음집
- bootstrap이란?
- 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많다.
남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일하다.
(위 '-파일 분리' 6단계 참고) 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐이다.
1 부트스트랩 시작 템플릿 복사
```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">
<!-- 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>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
```
2 frontend 파일 > New > HTML File > index.html 창 생성
3 위 단계를 완료하면 새 창에 새로운 태그들이 생성되는데 다 지운 후
1단계 부트스트랩 시작 템플릿 복사한거 붙여넣기 하기
4 부트스트랩 컴포넌트 링크 들어가서 가져다 쓰기 https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
5 Components > Buttons > Primary 코드 복사
<button type="button" class="btn btn-primary">Primary</button>6 body 태그 안에 '이걸로 시작해보죠!' 삭제 후 Primary 코드 복붙
7 Primary 란을 나는 버튼이다 로 바꾸기
<button type="button" class="btn btn-primary">나는 버튼이다</button>
1-9 Bootstrap(부트스트랩) 좀 더 활용하기
1 나홀로 메모장 뼈대 링크 열기
2 부트스트랩 Jumbotron 코드 카피
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
3 body 태그 안에 위 코드 복붙 후 Jumbotron 접기
4 접은 Jumbtron 밑에 Cardcolums 복붙
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
</div>
<div class="card p-3">
<blockquote class="blockquote mb-0 card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card bg-primary text-white text-center p-3">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer class="blockquote-footer">
<small>
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card text-center">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
<div class="card">
<img class="card-img" src="..." alt="Card image">
</div>
<div class="card p-3 text-right">
<blockquote class="blockquote mb-0">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer class="blockquote-footer">
<small class="text-muted">
Someone famous in <cite title="Source Title">Source Title</cite>
</small>
</footer>
</blockquote>
</div>
<div class="card">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div>
</div>
</div>
5 아래 Card image cap에 이미지를 넣으려면 아래 src= "..." 란에 이미지 주소 채워 넣어야 함
<img class="card-img-top" src="..." alt="Card image cap">
6 필요한 부분의 코드만 가져오기 - 'Card title that wraps to a new line' 항목
필요한 해당 항목 검사 > 각 div 그룹 마우스 올려놓고 해당 코드 영역이 어느 부분인지 체크 후 나머지 코드는 다 삭제
7 5번 src="이미지 주소 복사" 아래 이미지 주소 복붙
https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512
* 이미지가 웹 서버에 업로드된 상태일 때만 이미지 주소를 확인할 수 있다.. 따라서, 사용하고자 하는 사진을 웹 상(블로그 등)에 업로드하거나, 현재 프로젝트 중인 폴더(frontend)에 사진 파일을 넣어준 후 아래와 같이 src 속성값에 파일명을 입력하면 사용자가 저장한 개인적인 이미지도 삽입 가능
<!-- 파일명이 image.png인 경우 -->
<img src="image.png">
8 아래 div 코드 그룹을 5번 복붙하기
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
9 새 div 생성 후 이 안에 Jumptron 과 card-columns의 div 태그 두 개를 Ctrl+X 후 붙혀넣기
<body?
<div>
<div class="jumbotron"...>
<div class="card-columns"...>
</div>
</body>
10 class="wrap" 을 사용해 위 두 div를 묶어주기
<body?
<div class="wrap">
<div class="jumbotron"...>
<div class="card-columns"...>
</div>
</body>
11 head 안에 <style> </style>, .wrap{ } 추가 후 width와 margin= auto를 사용해 수정
<style>
.wrap{
width: 900px; width로 900px 만큼의 여백을 줌
margin: auto; margin: auto는 중앙 정렬
}
</style>
<!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>
<style>
.wrap{
width: 900px;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to
featured content or information.</p>
<hr class="my-4">
<p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
<p class="lead">
<a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</p>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card title that wraps to a new line</h5>
<p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional
content. This content is a little bit longer.</p>
</div>
</div>
</div>
</div>
</body>
</html>
1-10 Quiz : 나홀로메모장 페이지 발전시키기
<div class="wrap"> 안에 들어 있는 <div class="jumbotron"> 과 <div class="card-columns"> 를 아래 코드처럼 만들기
<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>
위 <p class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</p> 에서 아래 링크 태그로 변경
<a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
<div class="card-columns">
<div class="card">
<img class="card-img-top" src="https://ca.slack-edge.com/T012XSRT34Y-U031WA8B2RG-bb25e41e1434-512" alt="Card image cap">
<div class="card-body">
<a href="http://naver.com/" class="card-title"> 여기 기사 제목이 들어가죠 </a>
<p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
<p class="card-text comment"> 여기에 코멘트가 들어갑니다. </p>
}
</div>
card-text 뒤 comment 중첩시킨 후 style 태그 안에 아래 .comment css 넣기
.comment{
color: blue;
font-weight: bold;
위 코드 총 6개로 복붙.comment{
color: blue;
font-weight: bold;
}
<style>
*{font-family: 'Stylish', sans-serif;
}
.wrap{
width: 900px;
margin: auto;
}
.comment{
color: blue;
font-weight: bold;
}
</style>
<title>스파르타코딩클럽 | 부트스트랩 연습하기</title> ← head 태그 안 title 밑에 아래 폰트 링크 삽입
<link href="https://fonts.googleapis.com/css?family=Stylish&display=swap" rel="stylesheet">
구글에서 한글 폰트 검색 후 링크 복붙하고 위 style 태그 안에 아래 구글 한글 폰트 css 복붙
*{font-family: 'Stylish', sans-serif;}
1-10 Quiz : 나홀로메모장 포스팅박스 완성하기
<포스팅박스 만들기>
- 부트스트랩 컴포넌트 페이지에서 Forms를 참고
- 가운데로 가져오려면 똑같이 width, margin를 활용
- 경계선을 둥글게 그리는 방법을 찾기 위해 다음을 구글링
- border
- border-radius
- 경계선과 내부 요소의 간격은 padding으로 조절해보기
<form> ← form를 div로 바꿔준 후 class="posting-box" 삽입
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>1 posing-box의 길이를 줄이고 가운데로 이동
width: 500px; 여백 500 픽셀 주기
margin: auto; 가운데로 이동
2 border 관련해서 css 아래 두 링크 참고
https://www.w3schools.com/css/css_border.asp
CSS Borders
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
https://developer.mozilla.org/en-US/docs/Web/CSS/border
border - CSS: Cascading Style Sheets | MDN
The border shorthand CSS property sets an element's border. It sets the values of border-width, border-style, and border-color.
developer.mozilla.org
/* width | style | color */
border: medium dashed green; 이 형식 참고해서 내 입맛에 맞게 변경
3 border 외곽선 둥글게 하기 위한 코드 border-radius: (number) px
안쪽으로 여백주기 padding: (number) px
margin: 위, 오른쪽, 아래, 왼쪽 / 각각 0px, auto, 30px, auto 만큼 입력해 아래 여백주기
.posting-box{
width: 500px;
margin: auto;
margin: 0px auto 30px auto;
border: 3px solid black;
border-radius: 10px;
padding: 30px;
}
4 위 부트스트랩 Forms에서 필요없는 문장은 다 잘라주기
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
삭제
<div class="form-check">
<input type="checkbox" class="form-check-input" id="exampleCheck1">
<label class="form-check-label" for="exampleCheck1">Check me out</label>
</div>
삭제
5 간단 코멘트의 Password 란의 코드를 Example textarea의 코드로 바꿔주기
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div> 이 코드들은 삭제
<div class="form-group">
<label for="exampleFormControlTextarea1">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div> 이 코드로 잘라넣기
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" 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>
1-12 Javzscript 맛보기
Jaczscript 란 브라우저가 알아들을 수 있는 프로그래밍 언어 중 하나로 <script> </script>를 사용한다.
형식 function hey( ) { } hey( ) 함수를 onclick으로 정의 한 후 { } 안에 명령값인 alert를 입력
alert('안녕!! ') { } 안에 입력한 값이 경고창으로 뜸
onclick="hey( )" 클릭하면 hey라는 함수가 불린다.
<script>
function hey() {
alert('안녕!!'); 함수샡성
}
</script><a class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
<a (이 안에 삽입) ← onclick="hey( )"
<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
*페이지 검사의 개발자 도구를 사용해 즉석에서 수정 가능
ex) 검사 > Console > hey() 함수 입력 후 Enter 입력시 위의 "안녕!!" 문구가 바로 작동
1-13 Javascript 기초 문법
변수, 자료형, 함수, 조건문, 반복문 정도만 잘 숙지해도 원하는 로직은 대부분 만들기 가능
-변수란 무엇인가?
*[크롬 개발자도구]를 열어서, console 탭에 작성
크롬 개발자도구 콘솔창은 어떤 의미? > 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구로 새로고침하면 모두 사라진다
let num = 20
num = 'Bob'
// 변수는 값을 저장하는 박스다.
// 한 번 선언했으면, 다시 선언하지 않고 값을 넣는다.
- 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!"
(2를 a라는 변수에 넣는다)
- let으로 변수를 선언
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라고 합니다.
또는, +변수를 first가 아니라 first_name같이 언더바를 사용하여 누구나 알아볼 수 있게 명쾌하게 설정하기
let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠.
과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다.
다른 특수문자 또는 띄워쓰기는 불가능합니다!
-자료형이란 무엇인가? list 및 dictionary
리스트: 순서를 지켜서 가지고 있는 형태
let a_list = [] // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_list = [1,2,'hey',3] // 로 선언 가능 [ ] 안의 순서는 왼쪽부터 차례대로 [0, 1, 2, 3]
b_list[1] // 2 를 출력
b_list[2] // 'hey'를 출력
// 리스트에 요소 넣기
b_list.push('헤이') 자바스크립트 동적으로 추가하는 명령문 .push
b_list // [1, 2, "hey", 3, "헤이"] 를 출력
// 리스트의 길이 구하기
b_list.length // 5를 출력
ex)
let a_list= ['수박', '참외', '배']
undefined
a_list[0]
'수박'
a_list[1]
'참외'
a_list[2]
'배'
a_list.push('감') 자바스크립트 동적으로 추가하는 명령문 .push
4
a_list
(4) ['수박', '참외', '배', '감']
a_list[3]
'감'
딕셔너리: 키(key)-밸류(value) 값의 묶음 일상에서 정말 많이 씀
let a_dict = {} // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능!
// 또는,
let b_dict = {'name':'Bob','age':21} // 로 선언 가능
b_dict['name'] // 'Bob'을 출력
b_dict['age'] // 21을 출력
b_dict['height'] = 180 // 딕셔너리에 키:밸류 넣기 .push를 사용안해도 직관적으로 밸류 추출 가능
b_dict // {name: "Bob", age: 21, height: 180}을 출력
ex)
let a_dict={'name':'bob','age':27} ← 선언할 땐 {중괄호} 사용
undefined
a_dict['name'] ← 밸류 추출 시 [꺽쇠] 사용
'bob' ← 'Value' or '값' 추출
a_dict['age']
27
a_dict['height']=180
180
a_dict
{name: 'bob', age: 27, 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'
ex)
a_dict['fruit']=a_list
(4) ['수박', '참외', '배', '감']
a_dict
{name: 'bob', age: 27, height: 180, fruit: Array(4)}
age: 27
fruit: (4) ['수박', '참외', '배', '감'] ← Array(4) Value
height: 180
name: "bob"
[[Prototype]]: Object
a_dict['fruit']
(4) ['수박', '참외', '배', '감']
a_dict['fruit'] [1]
'참외'
a_dict['fruit'] [2]
'배'
a_dict['fruit'] [3]
'감'
필요한 이유
순서를 표시할 수 있고, 정보를 묶을 수 있다.
앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 했는데 변수만을 사용한 모습은 다음과 같다.
let customer_1_name = '김스파';
let customer_1_phone = '010-1234-1234';
let customer_2_name = '박르탄';
let customer_2_phone = '010-4321-4321';
...(알아보기 힘들다.)
👉딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있다.
let customer_1 = {'name': '김스파', 'phone': '010-1234-1234'};
let customer_2 = {'name': '박르탄', 'phone': '010-4321-4321'};
👉그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해진다.
let customer = [
{'name': '김스파', 'phone': '010-1234-1234'},
{'name': '박르탄', 'phone': '010-4321-4321'}
]
✅보기에도 깔끔해지고, 다루기도 쉬워지고, 고객이 새로 한 명 더 오더라도 .push 함수를 이용해 간단하게 대응할 수 있다.
기본 함수들
사칙연산 외에도, 기본적으로 제공하는 여러 함수들이 존재
**예를 들면, '나눗셈의나머지'를 구하고 싶은 경우**
let a = 20
let b = 7
a % b = 6 나눗셈나머지는 명령기호는 % 사용
let a=100
undefined
a%8
4 ← 추출된 Value
a%3
1
a<150 ← a보다 150이 작다고 물었을 때 Value 추출 가능
true ← 추출된 Value
a==100 ← 같은지 증명할 때는 a==b 사용
true
a!=100 ← 같지 않음을 증명할 때는 a!=b 사용
false**또, 모든 알파벳을 대문자로 바꾸고 싶은 경우**
let myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB
let myname='spartavodingclup'
undefined
myname.toUpperCase() ← .toUpperCase() 함수 사용
'SPARTAVODINGCLUP' ← 추출된 Value**또, 특정 문자로 문자열을 나누고 싶은 경우**
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 -> 간단하게 쓸 수도 있다!
어떤 도메인의 이메일인지 판별하는 경우에 차근차근 쓰임
let myemail='rhcskan1@naver.com'
undefined
myemail.split('@') ← .split(나누고싶은부분의문자삽입) @을 기점으로 나누기
(2) ['rhcskan1', 'naver.com'] ← @을 기점으로 정상적으로 나눠진 Value 추출
myemail.split('@')[1] ← @을 기점으로 나눠진 naver.com을 naver와 com으로 나누기 위해 키보드 ↑ 버튼을 눌러서 불러오기
'naver.com' ← 추출된 Value 'naver.com'을 '.'을 기점으로 나누기 위해 .split() 함수 사용
myemail.split('@')[1].split('.')
(2) ['naver', 'com'] ← 추출된 Value
myemail.split('@')[1].split('.')[0]
'naver' ← 우리가 알고 싶었던 것!
myemail.split('@')[1].split('.')[1]
'com'**특정 문자로 나누고 싶은 경우 2**
let txt = '서울시-마포구-망원동'
****let names = txt.split('-'); // ['서울시','마포구','망원동']
**특정 문자로 합치고 싶은 경우**
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)
1-14 Javascript 기초 문법 (2)
-함수란 무엇인가?
프로그래밍에서의 함수는 부르면 정해진 동작을 하는 개념이다.
기본 생김새
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들);
function sum(num1, num2){
return num1+num2 ← 함수에서의 return은 끝내고 나를 변신시켜줘! 의 개념
}
undefined
let result=sum(2,3)
undefined
result
5
```jsx
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3
```
function mysum(num1, num2){
alert('첫번째'+num1)
alert('두번째'+num2)
}
undefined
mysum(2,3)
function mysum(){
alert('안녕!')
alert('또 안녕!')
}
undefined
mysum()
-조건문이란 무엇인가?
20 보다 작으면 작다고, 크면 크다고 알려주는 함수
function is_adult(age){
if(age > 20){
alert('성인이에요')
} else {
alert('청소년이에요')
}
}
is_adult(25)
let age = 24 이 if(){} else{} 조건문이 젤 많이 쓰임
undefined
if (age > 20) {
console.log('성인입니다')
} else{ else=아니면(or not)
console.log('청소년입니다')
}
VM5212:2 성인입니다
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,'남')
ex)
undefined
let sex= '남성'
undefined
if (age > 20 && sex == '남성') { && = 그리고(and)
console.log('성인 남성입니다')
} else{
console.log('청소년입니다')
}
VM5368:2 성인 남성입니다
undefined
if (age > 20 || sex == '남성') { || = 또는(or)
console.log('성인 남성입니다')
} else{
console.log('청소년입니다')
}
VM5396:2 성인 남성입니다
if (age > 20) {
console.log('성인입니다')
} else if (age > 7) { else if= 아닌경우 중 만약 ~라면
console.log('청소년입니다')
} else {
console.log('아동입니다')
}
VM5648:2 성인입니다
undefined
-반복문이란 무엇인가?
예를 들어 0부터 99까지 출력해야 하는 상황일 경우
console.log(0)
console.log(1)
console.log(2)
console.log(3)
console.log(4)
console.log(5)
...
console.log(99)
// 이렇게 쓰기엔 무리가 있어서 반복문 사용
* 반복분에서 제일 오타가 작렬하므로 오타주의 반복문을 이용하면 아래와 같이 단 세줄로, 출력할 수 있다.
for (let i = 0; i < 100; i++) {
console.log(i);
}for (1. 시작조건; 2. 반복조건; 3. 더하기) {
4. 매번실행
}
1 -> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
-> 2체크하고 -> (괜찮으면) -> 4 -> 3
와 같은 순서로 실행된다.
i가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나온다.
ex)
for (let i = 0; i < 10; i++) { ← 0부터 시작해서 하나씩 높여가면서 10보다 작을때까지 반복
console.log(i)
}
VM5875:2 0
VM5875:2 1
VM5875:2 2
VM5875:2 3
VM5875:2 4 ← 추출된 Value
VM5875:2 5
VM5875:2 6
VM5875:2 7
VM5875:2 8
VM5875:2 9
undefined그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰인다. 아래 예시를 보자. 일단 아래를 복사 붙여넣기 하고, 코딩 시작하기
반복문 예제1
let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력 가능
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있음
for (let i = 0 ; i < people.length ; i++) { *people.length 는 people의 리스트 길이를 추출
console.log(people[i])
}
ex)
let people = ['철수','영희','민수','형준','기남','동희']
undefined
people.length
6
for (let i = 0; i < 10; i++) {
console.log(people[i])
}
VM6145:2 철수
VM6145:2 영희
VM6145:2 민수
VM6145:2 형준
VM6145:2 기남
VM6145:2 동희
4VM6145:2 undefined
undefined리스트도 그냥 리스트가 아니다. 딕셔너리가 들어간 리스트와 찰떡이므로 다시 아래를 복사 붙여넣기 하기
반복문 예제2
let scores = [
{'name':'철수', 'score':90}, ← scores[0]
{'name':'영희', 'score':85}, ← scores[1] , scores[1]['score'] // 85
{'name':'민수', 'score':70}, ← scores[2]
{'name':'형준', 'score':50}, ← scores[3]
{'name':'기남', 'score':68}, ← scores[4]
{'name':'동희', 'score':30}, ← scores[5]
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고,
for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있다.
ex)
> scores ← 반복분 예제 let scores 참고
(6) [{…}, {…}, {…}, {…}, {…}, {…}]
for (let i = 0; i < scores.length; i++) {
console.log(scores[i])
}
VM6423:2 {name: '철수', score: 90}
VM6423:2 {name: '영희', score: 85}
VM6423:2 {name: '민수', score: 70} ← scores
VM6423:2 {name: '형준', score: 50}
VM6423:2 {name: '기남', score: 68}
VM6423:2 {name: '동희', score: 30}
undefined
for (let i = 0; i < scores.length; i++) {
console.log(scores[i]['name'])
}
VM6473:2 철수
VM6473:2 영희
VM6473:2 민수
VM6473:2 형준
VM6473:2 기남
VM6473:2 동희
undefined
for (let i = 0; i < scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
console.log(name,score)
}
VM6756:4 철수 90
VM6756:4 영희 85
VM6756:4 민수 70
VM6756:4 형준 50
VM6756:4 기남 68
VM6756:4 동희 30
undefined
for (let i = 0; i < scores.length; i++) {
let name = scores[i]['name']
let score = scores[i]['score']
if (score <70) { ← if 함수 추가
console.log(name,score)
}
}
VM6922:5 형준 50
VM6922:5 기남 68
VM6922:5 동희 30
undefined
1-14 Javascript 연습하기 - 전형적인 패턴
(1) 미세먼지(IDEX_MVL)의 값이 40 미만인 구 이름(MSRSTE_NM)과 값을 출력하기
1 서울시 미세먼지 값 코드 복붙해 Enter 누른 후 Value 지정되면 아래 버튼 클릭해 지워주기
let mise_list = [{dict}] → [list] 안에 [dict] 나열
2 깨끗해진 개발자 도구판에 mise_list 불러오기
3 각 구의 미세먼지 값 구하기
mise_list
(25) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
for (let i = 0; i < mise_list.length; i++) { ← let이 설정한 i(0)에서 mise_list의 length까지 반복(++)
console.log(mise_list[i]) ← {dict}의 length가 하나하나 찍히도록 log
}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '중구', PM10: 22, PM25: 14, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '종로구', PM10: 24, PM25: 18, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '도심권', MSRSTE_NM: '용산구', PM10: 0, PM25: 15, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '은평구', PM10: 36, PM25: 14, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '서대문구', PM10: 28, PM25: 9, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서북권', MSRSTE_NM: '마포구', PM10: 26, PM25: 8, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '광진구', PM10: 17, PM25: 9, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성동구', PM10: 21, PM25: 12, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '중랑구', PM10: 27, PM25: 10, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '동대문구', PM10: 26, PM25: 9, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '성북구', PM10: 27, PM25: 8, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '도봉구', PM10: 25, PM25: 12, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '강북구', PM10: 30, PM25: 15, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동북권', MSRSTE_NM: '노원구', PM10: 21, PM25: 14, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '강서구', PM10: 36, PM25: 16, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '구로구', PM10: 23, PM25: 10, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '영등포구', PM10: 29, PM25: 15, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '동작구', PM10: 29, PM25: 15, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '관악구', PM10: 27, PM25: 12, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '금천구', PM10: 25, PM25: 15, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '서남권', MSRSTE_NM: '양천구', PM10: 0, PM25: 14, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강남구', PM10: 31, PM25: 16, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '서초구', PM10: 34, PM25: 13, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '송파구', PM10: 25, PM25: 6, …}
VM7583:2 {MSRDT: '201912052100', MSRRGN_NM: '동남권', MSRSTE_NM: '강동구', PM10: 24, PM25: 14, …}
undefined
for (let i = 0; i < mise_list.length; i++) {
let gu_name = mise_list[i]['MSRSTE_NM']
let gu_mise = mise_list[i]['IDEX_NM']
console.log(gu_name,gu_mise)
}
VM8538:4 중구 31
VM8538:4 종로구 39
VM8538:4 용산구 -99
VM8538:4 은평구 42
VM8538:4 서대문구 37
VM8538:4 마포구 36
VM8538:4 광진구 31
VM8538:4 성동구 33
VM8538:4 중랑구 34
VM8538:4 동대문구 34
VM8538:4 성북구 37
VM8538:4 도봉구 41
VM8538:4 강북구 39
VM8538:4 노원구 36
VM8538:4 강서구 42
VM8538:4 구로구 37
VM8538:4 영등포구 41
VM8538:4 동작구 41
VM8538:4 관악구 37
VM8538:4 금천구 43
VM8538:4 양천구 -99
VM8538:4 강남구 39
VM8538:4 서초구 41
VM8538:4 송파구 42
VM8538:4 강동구 39
undefined
for (let i = 0; i < mise_list.length; i++) {
let gu_name = mise_list[i]['MSRSTE_NM']
let gu_mise = mise_list[i]['IDEX_MVL']
if (gu_mise <40) { ← 위 미세먼지 농도에서 40보다 적은 Value를 추출하기 위해 if를 붙혔을 때
console.log(gu_name,gu_mise)
}
}
VM8662:5 중구 31
VM8662:5 종로구 39
VM8662:5 용산구 -99
VM8662:5 서대문구 37
VM8662:5 마포구 36
VM8662:5 광진구 31
VM8662:5 성동구 33
VM8662:5 중랑구 34
VM8662:5 동대문구 34
VM8662:5 성북구 37
VM8662:5 강북구 39
VM8662:5 노원구 36
VM8662:5 구로구 37
VM8662:5 관악구 37
VM8662:5 양천구 -99
VM8662:5 강남구 39
VM8662:5 강동구 39
undefinedfor (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);
}
}
40 이하든, 35 이하든 유용하게 쓸 수 있게, 함수로 만들기
function show_gus(index) {
for (let i = 0; i < mise_list.length; i++) {
let mise = mise_list[i];
if (mise["IDEX_MVL"] < index) {
let gu_name = mise["MSRSTE_NM"];
let gu_mise = mise["IDEX_MVL"];
console.log(index + "보다 작은 구: " + gu_name + ", " + gu_mise);
}
}
}
// 이러면 아래와 같은 것이 가능!
show_gus(40) // 40보다 작은 구만 출력!
show_gus(35) // 35보다 작은 구만 출력!
(2) 자전거(parkingBikeTotCnt)가 5개 이하인 정류장의 이름을 출력하기
1 서울시 따릉이 현황 코드 복붙해 Enter 누른 후 Value 지정되면 아래 버튼 클릭해 지워주기
let mise_list = [{dict}] → [list] 안에 [dict] 나열
2 깨끗해진 개발자 도구판에 blikes [[dict}] 리스트 불러오기
3 함수를 사용하여 원하는 서울시 따릉이 dict의 정보 구하기
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= 5) {
let station = bikes[i]['stationName'];
console.log(station);
}
}
마찬가지로 유용하게 쓸 수 있게, 함수로 만들기
function show_names(num){
for (let i = 0; i < bikes.length; i++) {
if (bikes[i]['parkingBikeTotCnt'] <= num) {
let station = bikes[i]['stationName'];
console.log(num + "대 이하 정류장 : " + station);
}
}
}
// 이러면 아래와 같은 것이 가능!
show_names(10) // 10개 이하 주차된 정류소만 출력!
show_names(5) // 5개 이하 주차된 정류소만 출력!
복잡하고 어려워 보이지만 문법을 외우는 것은 중요하지 않다. 예를 들어 if문을 어떻게 썼더라- 할 때 검색해서 코드는 복사해서 쓰면 된다. 제일 중요한 것은 얼개를 이해하는 것!
1-16 응용하기
아래 기획서를 보고, 부트스트랩 또는 템플릿을 활용해서 나만의쇼핑몰의 메인 페이지를 완성해보자.
(아이템은 가상으로, 아무거나 팔아도 무방)
기능: 주문하기 버튼을 클릭했을 때 '주문이 완료되었습니다.'라는 얼럿을 띄우기
-부트스트랩 시작 템플릿
```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">
<!-- 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>
</head>
<body>
<h1>이걸로 시작해보죠!</h1>
</body>
</html>
```
-부트스트랩 컴포넌트 참고
https://getbootstrap.com/docs/4.0/components/alerts/
Alerts
Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
getbootstrap.com
- 응용 코드
1 Bootstrap > Documentation > Input group > Sizing > Default 코드
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text" id="inputGroup-sizing-default">Default</span>
</div>
<input type="text" class="form-control" aria-label="Default" aria-describedby="inputGroup-sizing-default">
</div>
2 Bootstrap > Documentation > Custom select
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text" for="inputGroupSelect01">Options</label>
</div>
<select class="custom-select" id="inputGroupSelect01">
<option selected>Choose...</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
3 Bootstrap > Documentation > Buttons > Praimary 버튼 코드 따오기
<button type="button" class="btn btn-primary">Primary</button>
-완성 이미지
<!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>1주차 상세페이지 과제</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">
</head>
<style>
*{
font-family: 'Jua', sans-serif;
}
.mytitle {
margin-left: 85px;
padding: 20px;
font-weight: bold;
}
.item-image {
width: 500px;
height: 500px;
background-image: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbRyQDp%2Fbtrtlngg2iQ%2F9j4zARKhKqlKJjWFZylY61%2Fimg.png");
background-position: center;
background-size: cover;
}
.item-desc {
width: 500px;
font-size: 15px;
margin: 30px auto 30px auto;
}
.price {
font-size: 13px;
}
.item-order {
width: 500px;
}
.btn-order{
margin: auto;
width: 100px;
display: block;
}
.wrap{
width: 500px;
margin: auto;
}
</style>
<script>
function order(){
alert('주문이 완료되었습니다!');
}
</script>
<body>
<div class="wrap" >
<h1 class="mytitle">Victory's Hanger</h1>
<div class="item-image"></div>
<div class="item-desc">
<h2> 대학생들 잇템! 옷장정리 <span class="price">세트가격 6,000~8,000 </span></h2>
<p>* 설레는 새학기, 새내기 룩! *</p>
</div>
<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번 프릴오픈숄더(화이트) & A라인스커트(블랙) 값 8,000</option>
<option value="2">2번 가오리핏벌룬니트(연보라) & A라인조끼원피스(블랙) 값 6,000</option>
<option value="3">3번 비숍소매와이셔츠(베이지) & 프린세스라인조끼원피스(브라운) 값 8,000</option>
<option value="4">4번 프릴오픈숄더(연하늘) & H라인스커트(크림) 값 8,000</option>
<option value="5">5번 에스닉롱원피스 값 5,000</option>
<option value="6">6번 프릴넥셔링티셔츠(크림) & 하이웨스트청바지(연청) 값 8,000</option>
</select>
</div>
<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="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>
<button type="button" onclick="order()" class="btn btn-primary btn-order">주문하기</button>
</div>
</div>
</body>
</html>