항해 99 사전 웹개발종합반 1주차 개발일지
생각해보니 나는,
HTML와 CSS를 어떻게 활용하고 사용하는지에 대해 배운적이 없는것 같다.
구글링하고 책보고 친구들이랑 얘기해보며 이건 이렇게 하는건가 하고 어느정도의 규칙이나 대중없이 사용했던 것 같다.
이 강의에서처럼,
누군가 css는 이렇게 위에 따로 style을 정의해두면 좋아요~
변수명은 이렇게 작성하는게 좋아요~
라고 학생시절의 나에게 말해주었으면 나는 그 규칙을 지키려하는 좋은 습관을 갖게되지 않았을까
이게 맞나... 이렇게 하는게 맞는걸까 하는 의구심을 끊임없이 안고 가야하는 개발 공부가
이건 이렇게 하는겁니다. 저건 저렇게 하는겁니다. 하고 제시를 먼저 해주니 받아들이는 입장에서도 신뢰가 생겨 배우는 속도가 빨라지는 것 같다.
물론 그 누가 이건 무조건! 이렇게 하는겁니다 라고 말할 수 있겠냐만은, 배우는 입장과 가르치는 입장에선 어느정도의 확실한 길을 제시해주면 배우는데 있어 효율성이 극대화 되는 것 같다.
아래에는 1주차 html, css, javascript의 배운 내용에 대한 강의노트이다.
-
HTML은 뼈대, CSS는 꾸미기!
👉 HTML은 구역과 텍스트를 나타내는 코드로, CSS는 잡은 구역을 꾸며주는 것으로 생각합니다. HTML 내 style 속성으로 꾸미기를 할 수 있지만, 긴 세월동안 이것을 한데 모아 볼 수 있는 CSS 파일이 탄생하게 되었습니다. HTML 코드 내에 CSS 파일을 불러와서 적용합니다. -
또한 CSS를 잘 사용할 줄 아는 것과, '예쁘게' 만드는 것은 다른 영역이기 때문에(붓을 잡을 줄 아는 것과 그림을 잘 그릴 줄 아는 것의 차이), 많은 경우 웹디자이너나 퍼블리셔에게 의존하게 됩니다.
-
9) ✍간단한 로그인 페이지 만들기
🔥 앞으로 실습이 필요한 부분이 나오면 "✍"모양으로 알려줄게요! 퀴즈설명 영상을 먼저 보고 → 정해진 시간동안 혼자 한다음 → 함께하기 영상을 보세요! - Q. 퀴즈설명 - 모습 보기   👻 힌트: 위의 HTML기초에서 봤던 코드들을 적절히 조합해보세요! ctrl+c,v 신공을 사용해보세요! - A. 함께하기(완성본) 💡 어때요, 할만했나요? 다만 조금씩 다른 방법으로 해결하셨더라도, 다음 강의 진행을 위해 아래 코드를 복사→붙여넣기 해주세요! **[코드스니펫] 로그인HTML**
html
<!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>- 모든 CSS들을 다 알 수는 없겠죠~~ 오늘 쓰는 것만 알아도 굿!
나머지는 검색해서 쓰시면 된답니다~!
<aside>
👉 배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin
padding
</aside>
<aside>
👉 배경관련
background-color
background-image
background-size
사이즈
width
height
폰트
font-size
font-weight
font-famliy
color
간격
margin
padding
</aside>06. 자주 쓰이는 CSS 연습하기
-
12) 자주 쓰이는 CSS 연습하기
👉 [연습할 것들] h1, h5, background-image, background-size, background-position color, width, height, border-radius, margin, padding - (1) 튜터와 함께 아래와 같은 화면을 만들어볼까요?  💡 margin과 padding ( → 헷갈리지 말기!) - margin은 바깥 여백을, padding은 내 안쪽 여백을 - div에 색깔을 넣고, 직접 사용해서 차이를 비교해보세요! - **[코드스니펫] 이미지URL** ```html [https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg](https://www.ancient-origins.net/sites/default/files/field/image/Agesilaus-II-cover.jpg) ``` ```html 스파르타코딩클럽 | 로그인페이지로그인 페이지
아이디, 비밀번호를 입력해주세요
로그인하기 ``` - (2) 만들어둔 로그인 화면을 가운데로 가져오려면? 👉 width를 주고, margin: auto를 사용하자! 그래도 안되면? display:block을 추가!  ```html 스파르타코딩클럽 | 로그인페이지ID:
PW:
``` ## **07. 폰트, 주석, 파일분리**로그인 페이지
아이디, 비밀번호를 입력해주세요
로그인하기ID:
PW:
-
13) 구글 웹폰트 입히기
- 구글 웹폰트
-
[코드스니펫] 구글웹폰트
```python [https://fonts.google.com/?subset=korean](https://fonts.google.com/?subset=korean) ```(1) 마음에 드는 폰트를 클릭합니다.
(2) [ + Select this style ]을 클릭합니다.
(3) 우측 상단의 모음 아이콘을 클릭합니다.
(4) Embed 탭을 클릭합니다.
(5) link 태그를 복사해서 ~ 사이에, CSS를 복사해서 사이에 넣습니다.
-
- Nanum Gothic이라는 폰트를 예제로 추가해보면, 아래와 같은 코드를 복사하면 됩니다.
- 구글 웹폰트
<!-- HTML에 이 부분을 추가하고 -->
<link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"> /* CSS에 이 부분을 추가하면 완성! */
* {
font-family: 'Nanum Gothic', sans-serif;
}08. 부트스트랩, 예쁜 CSS 모음집
- 16) bootstrap이란?
- 부트스트랩이란? 예쁜 CSS를 미리 모아둔 것 (CSS를 다룰 줄 아는 것과, 미적 감각을 발휘하여 예쁘게 만드는 것은 다른 이야기이기 때문에, 현업에서는 미리 완성된 부트스트랩을 가져다 쓰는 경우가 많습니다.)
- 17) bootstrap - 시작 템플릿
- 아래 파일을 복사해서 새로운 HTML 파일을 하나 만들고, 시작해보아요 👉 남이 미리 작성한 CSS를 내 HTML 파일에 적용한다는 점에서, bootstrap 적용은 CSS 파일 분리와 원리가 동일합니다. (아까 튜터님의 시범을 기억하시죠!) 다만, CSS의 파일이 인터넷 어딘가에 있다는 점이 다를 뿐입니다. - **[코드스니펫] 부트스트랩 시작 템플릿**
<!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>- <h1>~</h1> 자리 아래 코드를 넣어봅니다.
- **[코드스니펫] 부트스트랩 컴포넌트 4.0**
https://getbootstrap.com/docs/4.0/components/alerts/ <aside>
👉 예쁜 버튼이 생겼습니다! (부트스트랩이 미리 css를 작성해뒀기 때문)
즉, btn 과, btn-primary 라는 class를 미리 정의해둔 것이죠
</aside>
## **09. Bootstrap(부트스트랩)을 써보자!**- 18) bootstrap - 함께 만들어보기
- 아래와 같은 모양을 함께 만들어볼까요?
- [코드스니펫] 나홀로메모장뼈대 나홀로메모장뼈대.html
- [코드스니펫] 나홀로메모장뼈대 나홀로메모장뼈대.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>
<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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg" 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>10. Quiz_함께 만든 페이지를 발전시켜보세요!
- 19) ✍나홀로 메모장 뼈대 잡기(1)
- Q. 퀴즈설명: 아래 모양을 만들어보세요!
-
[코드스니펫] 나홀로메모장틀
👻 힌트:[나홀로메모장틀.html](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d81170fb-e84c-4864-9ec8-14423cb51cdf/1_-___.html)
-
모든 글자는 직접 치지 말고 복사해서 붙여넣으면 금방 해결~!
-
"여기에 코멘트가 들어가죠"는
태그로 파란색 굵은 글씨가 하나 더 추가됐고,
-
"여기 기사제목이 들어가죠"는 태그로 하이퍼링크가 걸렸네요!
-
- A. 함께하기(완성본)
- [코드스니펫] 나홀로메모장틀(완성)
- [코드스니펫] 나홀로메모장틀(완성)
- Q. 퀴즈설명: 아래 모양을 만들어보세요!
<!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 href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
width: 900px;
margin: auto;
}
.comment {
color: blue;
font-weight: bold;
}
</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="card-columns">
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://image.theminda.com/data/tg/image/tour/middle/201905/c8aee858ed6e8c34010fe3c4ae9be8a5.jpg"
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>
</div>
</div>
</div>
</body>
</html>11. Quiz_나홀로메모장의 포스팅박스를 완성하기!
- 20) ✍포스팅 박스를 넣어보기(2)
- Q. 퀴즈설명: 아래 모양을 만들어보세요!
-
[코드스니펫] 포스팅박스까지
👻 힌트:[**포스팅박스까지**](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9371d022-dd33-4350-ad3b-f4623fbea5e7/1-__.html)
-
부트스트랩 컴포넌트 페이지에서 forms를 참고하세요!
-
가운데로 가져오려면 똑같이 width, margin를 활용합니다.
-
경계선을 둥글게 그리는 방법을 찾기 위해 다음을 구글링해봅니다.
- border
- border-radius
-
경계선과 내부 요소의 간격은 padding으로 조절하는게 좋습니다.
👉 참고! 일단 해두기!복사해오는 내용 중 form 태그(
...)가 있다면,
form태그를 div 태그(...)로 바꿔주세요!→
태그 안에 버튼이 있으면, 자동으로 새로고침이 됩니다.
→ 우리는 이 기능을 안 쓸거라, 추후 충돌 방지를 위해 미리 바꿔두는 것입니다!
-
- A. 함께하기(완성본)
- [코드스니펫] 포스팅박스까지(완성)
- [코드스니펫] 포스팅박스까지(완성)
- Q. 퀴즈설명: 아래 모양을 만들어보세요!
<!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 href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
margin: auto;
width: 900px;
}
.comment {
font-weight: bold;
color: blue;
}
.posting-box {
margin: 10px auto 30px auto;
width:500px;
border: 3px solid black;
border-radius: 5px;
padding: 25px;
}
</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="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
</div>
</div>
</body>
</html>12. Javascript 맛보기
- 21) 자바스크립트란?
- 프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어입니다. 👉 이론 설명 때, 클라이언트가 서버에 요청하면, 서버가 클라이언트에게 HTML+CSS+Javascript를 준다고 했던 것, 기억하시나요? 👉 [잠깐 상식!] Q. 왜 브라우저는 Javascript만 알아들어요? HTML안에다 파이썬, Java 같은 언어를 써서 주면 안되나요? A. 불가능한 이야기는 아닙니다. 다만, 이 "역사적인 이유 & 이미 만들어진 표준"이기 때문에, 모든 브라우저는 기본적으로 Javascript를 알아듣게 설계되어있고, 모든 웹서버는 HTML+CSS+Javascript를 주게 되어있죠.
- Java와 Javascript는 어떤 차이가 있나요? 👉 인도와 인도네시아.. 바다와 바다코끼리.. 아무 관련 없습니다.
- 22) 자바스크립트 기초
- 처음 프로그래밍 언어를 배우면 생소한 부분도 존재하기에, 다음 주에 본격적으로 하기 전에! 오늘 먼저 맛보기를 해보겠습니다. 👉 일단 따라쓰기!를 통해, 자바스크립트가 HTML과 어떻게 연동되는지 알아보겠습니다.
- 23) 자바스크립트 - 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> <link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet"> <style> * { font-family: 'Jua', sans-serif; } .wrap { margin: auto; width: 900px; } .comment { font-weight: bold; color: blue; } .posting-box { margin: 10px auto 30px auto; width:500px; border: 3px solid black; border-radius: 5px; padding: 25px; } </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="posting-box"> <div class="form-group"> <label for="exampleInputEmail1">아티클 URL</label> <input type="email" class="form-control" aria-describedby="emailHelp" placeholder=""> </div> <div class="form-group"> <label for="exampleInputPassword1">간단 코멘트</label> <input type="password" class="form-control" placeholder=""> </div> <button type="submit" class="btn btn-primary">기사 저장</button> </div> <div class="card-columns"> <div class="card"> <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241" 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> </div> <div class="card"> <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241" 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> </div> <div class="card"> <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241" 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> </div> <div class="card"> <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241" 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> </div> <div class="card"> <img class="card-img-top" src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241" 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> </div> </div> </div> </body> </html> - 함수를 만들어두기
👉 ~ 안에 로 공간을 만들어 작성합니다. 내에 자바스크립트를 작성하는 것이죠 아래 코드를 통해 간단한 사용방법을 알아봅니다.  funfunction hey(){ alert('안녕!'); } - 버튼에 함수를 연결하기. 버튼을 누르면 함수가 불립니다.
- 전반부 코드가 없는 분들 - 여기서 시작하세요!
html
<button onclick="hey()" type="button" class="btn btn-primary">기사저장</button>- 완성본 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>
<link href="https://fonts.googleapis.com/css2?family=Jua&display=swap" rel="stylesheet">
<style>
* {
font-family: 'Jua', sans-serif;
}
.wrap {
margin: auto;
width: 900px;
}
.comment {
font-weight: bold;
color: blue;
}
.posting-box {
margin: 10px auto 30px auto;
width:500px;
border: 3px solid black;
border-radius: 5px;
padding: 25px;
}
</style>
<script>
function hey(){
alert('안녕!');
}
</script>
</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 onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>
</p>
</div>
<div class="posting-box">
<div class="form-group">
<label for="exampleInputEmail1">아티클 URL</label>
<input type="email" class="form-control" aria-describedby="emailHelp"
placeholder="">
</div>
<div class="form-group">
<label for="exampleInputPassword1">간단 코멘트</label>
<input type="password" class="form-control" placeholder="">
</div>
<button type="submit" class="btn btn-primary">기사 저장</button>
</div>
<div class="card-columns">
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
<div class="card">
<img class="card-img-top"
src="https://d2ur7st6jjikze.cloudfront.net/offer_photos/29590/185689_medium_1525763241.jpg?1525763241"
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>
</div>
</div>
</div>
</body>
</html>13. Javascript 기초 문법 배우기(1)
- 24) 본격적으로 문법을 배워볼까요? 👉 1주차엔 문법을 배우고, 2주차에 이리저리 연습을 많~이 할거예요! - [크롬 개발자도구]를 열어서, console 탭에 작성합니다! 👉 그냥 쉽게, "마우스 오른쪽 클릭 → 검사 → console"도 가능! 크롬 개발자도구 콘솔창은 어떤 의미? > 띄워놓은 페이지에서 빠르게 자바스크립트를 테스트해볼 수 있게, 개발자들을 위해 만들어둔 도구입니다. 새로고침하면 모두 사라진다는 사실! - 윈도우: F12 - 맥: alt(option) + command + i - console.log(변수) ```jsx -- console.log(변수) 는, 콘솔 창에 괄호 안의 값을 출력해줍니다. 개발자가 결과값을 보기 편하도록! console.log(변수1,변수2) 로 여러 변수를 한번에 출력할 수도 있어요. 아래를 복사해서 붙여넣어보세요. console.log("Hello World!"); ``` - 변수 & 기본연산 - 변수 대입( a = 2 )의 의미: "오른쪽에 있는 것을 왼쪽에 넣는 것!" (2를 a라는 변수에 넣는다) - let으로 변수를 선언합니다. ```jsx let num = 20 num = 'Bob' // 변수는 값을 저장하는 박스예요. // 한 번 선언했으면, 다시 선언하지 않고 값을 넣습니다. ``` - 사칙연산, 그리고 문자열 더하기가 기본적으로 가능합니다. ```jsx 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 -> 문자+숫자를 하면, 숫자를 문자로 바꾼 뒤 수행합니다. ``` - 변수명은 아무렇게나? ```jsx let first_name = 'bob' // snake case라고 합니다. 또는, let firstName = 'bob' // camel case라고 합니다. 회사마다 규칙이 있죠. 과 같이, 쉽게 알아볼 수 있게 쓰는 게 중요합니다. 다른 특수문자 또는 띄워쓰기는 불가능합니다! ``` - 리스트 & 딕셔너리 - 리스트: 순서를 지켜서 가지고 있는 형태입니다. ```jsx 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) 값의 묶음 ```jsx 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}을 출력 ``` - 리스트와 딕셔너리의 조합 ```jsx 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' ``` - 왜 필요할까요? 💡 **순서를 표시할 수 있고, 정보를 묶을 수 있습니다.** 앞에서 언급한 <스파르타과일가게>가 정말 잘 되어서 전국에서 손님이 찾아오고 있습니다. 대기표를 작성하기 위해서 온 순서대로 이름, 휴대폰 번호를 적도록 하였는데요. 변수만을 사용한 모습은 다음과 같습니다. 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 myname = 'spartacodingclub'
myname.toUpperCase() // SPARTACODINGCLUB **또, 특정 문자로 문자열을 나누고 싶은 경우**
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**
let txt = '서울시-마포구-망원동'
****let names = txt.split('-'); // ['서울시','마포구','망원동']
**특정 문자로 합치고 싶은 경우**
let result = names.join('>'); // '서울시>마포구>망원동' (즉, 문자열 바꾸기!)14. Javascript 기초 문법 배우기(2)
- 25) 더 본격적으로 문법을 배워볼까요!
- 함수
- 기본 생김새
- 기본 생김새
- 함수
// 만들기
function 함수이름(필요한 변수들) {
내릴 명령들을 순차적으로 작성
}
// 사용하기
함수이름(필요한 변수들); - 예시
// 두 숫자를 입력받으면 더한 결과를 돌려주는 함수
function sum(num1, num2) {
console.log('num1: ', num1, ', num2: ', num2);
return num1 + num2;
}
sum(3, 5); // 8
sum(4, -1); // 3- 조건문
- 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,'남')- 반복문
- 예를 들어 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가 증가하다가 반복조건에 맞지 않으면, 반복을 종료하고 빠져나옵니다. - 그러나 위처럼 숫자를 출력하는 경우보다는, 반복문은 주로 리스트와 함께 쓰입니다.
아래 예시를 볼까요? 일단 아래를 복사 붙여넣기 하고, 함께 코딩해볼게요
- **[코드스니펫] 반복문 예제1**
let people = ['철수','영희','민수','형준','기남','동희'] let people = ['철수','영희','민수','형준','기남','동희']
// 이렇게 하면 리스트의 모든 원소를 한번에 출력할 수 있겠죠?
// i가 1씩 증가하면서, people의 원소를 차례대로 불러올 수 있게 됩니다.
for (let i = 0 ; i < people.length ; i++) {
console.log(people[i])
} - 리스트도 그냥 리스트가 아닙니다! 딕셔너리가 들어간 리스트와 찰떡이죠
다시 아래를 복사 붙여넣기 해볼까요?
- **[코드스니펫] 반복문 예제2**
let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
] let scores = [
{'name':'철수', 'score':90},
{'name':'영희', 'score':85},
{'name':'민수', 'score':70},
{'name':'형준', 'score':50},
{'name':'기남', 'score':68},
{'name':'동희', 'score':30},
]
for (let i = 0 ; i < scores.length ; i++) {
console.log(scores[i]);
}
// 이렇게 하면 리스트 내의 딕셔너리를 하나씩 출력할 수 있고, for (let i = 0 ; i < scores.length ; i++) {
if (scores[i]['score'] < 70) {
console.log(scores[i]['name']);
}
}
// 이렇게 하면 점수가 70점 미만인 사람들의 이름만 출력할 수도 있습니다. 
https://github.com/jsw4215