Kim's DevRoom

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
12강 모든 수의 합 (12/15)

- 특정 배열안에 있는 수들을 모두 더한 값

// 숫자를 가지고 있는 배열 생성
let 수 = [1,5,-40, 200]

// 출력
수[0] + 수[1]+ 수[2]+수[3]
// 결과
166

// for문을 적용한 함수 생성
function 모든수의합(수){
	let 누적 = 0;
	
	for(let i = 0; i < 수.length; i++){
		누적 = 누적 + 수[i];
	}
	
	console.log(누적);
}

// 출력
모든수의합(수)
// 결과
166

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
11강 가장 큰 수 찾기 (11/15)

- 배열이 가지고 있는 숫자 중 가장 큰 수 찾기

// 숫자를 가지고 있는 배열 생성
let 숫자들 = [1,5,-40, 200, 35]

// 함수선언
function 가장큰수(숫자들){
	let 숫자 = 0;

	// 숫자배열을 돌릴 for문 생성
	for(let i = 0; i < 5; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
200

- 해당 함수가 가지고 있는 문제

1. 숫자들의 배열이 음수만으로 이루어져 있을 때 0이 출력

// 수정
let 숫자들 = [-1,-5,-40, -200, -35]

function 가장큰수(숫자들){
	// 숫자배열의 처음 숫자를 초기값으로 세팅한다.
	let 숫자 = 숫자들[0];

	// 숫자배열을 돌릴 for문 생성
	for(let i = 0; i < 5; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
-1

2. 배열의 길이가 5보다 클때

// 수정
let 숫자들 = [-1,-5,-40, -200, -35, 20, 40, 567]

function 가장큰수(숫자들){
	// 숫자배열의 처음 숫자를 초기값으로 세팅한다.
	let 숫자 = 숫자들[0];

	// 숫자배열을 돌릴 for문 생성
    // 숫자배열의 길이만큼 for문을 돌린다.
	for(let i = 0; i < 숫자들.length; i++){
		// 숫자배열을 for문으로 돌리면서 숫자값과 비교하여 큰값을 숫자에 다시 넣어준다.
		if (숫자 < 숫자들[i]) {
			숫자 = 숫자들[i]
		}
	}
	
	console.log(숫자);
}

// 출력
가장큰수(숫자들)
// 결과
567

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
10강 공항 검색대 만들기-큐 (10/15)

- 공항 검색대 특징 : 컨베이어벨트에서 물건이 놓여 검사가 되어 승객에서 도착한다. 

처음에 검사를 받은 물건이 처음에 나온다.
- 큐 : 데이터를 집어넣을 수 있는 선형(linear) 자료형으로 먼저 집어넣은 데이터가 먼저 나온다. 

이 특징을 줄여서 FIFO(First In First Out)라고 부른다.

// 물건이 올려져 있는 컨베이어벨트 변수 생성
let 컨베이어벨트 = ["물건1","물건2","물건3"];

// 처음에 올려진 물건을 꺼낸다.
컨베이어밸트.shift(); :: 결과 '물건1'

// 내물건은 변수에 따로 담는다.
let 내_물건 = 컨베이어밸트.shift();

// 출력
컨베이어벨트
// 결과
['물건3']

// 출력
내_물건
// 결과
'물건2'

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
9강 택배 상하차 하기-스택 (9/15)

- 택배 상하차 특징 : 차에 택배 물건을 싣는다. 제일 마지막에 넣은 택배 물건이 제일 먼저 나온다.
- 스택 : 데이터를 넣을 수 있는 선형 자료형으로 나중에 집어넣은 데이터가 먼저 나온다. 이 특징을 줄여 LIFO(Last In First Out)라고 부른다.
데이터를 집어넣는 push, 데이터를 추출하는 pop 등의 작업을 할 수 있습니다.

// 물건을 실을 택배차 변수 생성
let 택배들 = []

// 택배를 싣는다
택배들.push("아이패드");
택배들.push("햇반");
택배들.push("생수");
택배들.push("피아노");

// 출력
택배들
// 결과
(4) ['아이패드', '햇반', '생수', '피아노']

// 햇반을 꺼내기 위해 마지막 넣은 순서대로 꺼낸다.
택배들.pop() :: 결과 '피아노'
택배들.pop() :: 결과 '생수'

//햇반을 변수에 담는다.
let 택배 = 택배들.pop()

// 출력
택배들
// 결과
['아이패드']

// 출력
택배
// 결과
'햇반'

css란 무엇인가?

1) css

- cascading style sheets의 줄임말로 웹 문서의 전반적인 스타일을 미리 저장해 둔 스타일시트이다.

- 쉽게 말하면 내가 설계해둔 html에 모양(스타일)을 적용하는 것이다.

- 아래에 css가 적용된 것과 적용되지 않은 페이지를 보면 이해가 쉽다.

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
7강 수산시장 만들기(상) (7/15)

- 수산시장 : 물고기의 그람수를 측정하여 가격을 매긴다.
- 배열 : 동일한 특성을 가지며 일정한 규칙에 따라 여러 요소가 나열된 있는 데이터들의 집합

8강 수산시장 만들기(하) (8/15)

// 변수 생성
let 광어 = 100

// 출력
광어
// 결과
100

// 입력받은 물고기 인자값의 가격을 측정하는 함수 생성
function 가격측정(물고기){
    console.log(물고기*10);
}

// 출력
가격측정(광어)
// 결과
1000

// 여러마리가 있으면 하나하나 출력할수 없기에 배열이란것을 사용한다.

// 배열 생성
let 광어들 = [100, 150, 200, 50];

// 출력
광어들
// 결과
(4) [100, 150, 200, 50]

// 개별출력
광어들[0]
100
광어들[1]
150
광어들[2]
200
광어들[3]
50

// 배열과 반복문을 통해 반복되는 출력작업을 쉽게 처리
for(let i = 0; i < 4; i++){
    가격측정(광어들[i])
}
// 결과
1000
1500
2000
500

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
5강 명함 만들기(상) (5/15)

- 명함 : 이름과 소개가 들어있는 종이
- 변수 : 값을 저장하는 공간이며 계속 변하는 값

function 명함(){
    console.log("이름 : 손당근");
    console.log("직업 : 개발자");
	console.log("손당근은 내 별명입니다.");
}

//변수적용
function 명함(){
	let 이름 = "손당근";
    console.log("이름 : "+이름);
    console.log("직업 : 개발자");
	console.log(이름+"은 내 별명입니다.");
}

//출력
명함()
//결과
이름 : 손당근
직업 : 개발자
손당근은 내 별명입니다.

6강 명함 만들기(하) (6/15)
- 객체 : 데이터 또는 함수의 집합으로 속성과 행위를 담고 있다.
- 명함 => 변수들을 알맞게 조합해서 출력하는 일

// 객체 선언
let 명함 = {}
// 출력
console.log(명함);
// 결과 => object속성을 가지고 있다.
{}

// 객체로 명함 만들기
// 객체선언 => 이름,나이,직업의 속성과 출력함수를 가지고 있는 객체 생성
let 명함 = {
  이름:"손당근",
  나이:50,
  직업:"개발자",
  출력(){
    console.log("이름 : "+이름);
    console.log("나이 : "+나이);
  }
}
// 객체안에 있는 속성 출력방법
console.log(명함.이름);
// 결과
손당근

// 객체안에 있는 함수 출력방법
명함.출력();
// 결과
Uncaught ReferenceError: 이름 is not defined
    at Object.출력 (<anonymous>:6:23)
    at <anonymous>:1:4

//원인
-출력 함수 안에 사용하는 이름과 나이의 변수가 선언되지 않았기 때문에 에러가 발생
-명함 안에 있는 이름은 변수가 아니라 명함의 속성이기 때문에 변수명만 선언하여 가져올 수 없다.

//수정
let 명함 = {
  이름:"손당근",
  나이:50,
  직업:"개발자",
  출력(){
    console.log("이름 : "+this.이름);
    console.log("나이 : "+this.나이);
  }
}
//출력
명함.출력();
//결과
이름 : 손당근
나이 : 50

https://www.inflearn.com/course/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B8%B0%EC%B4%88

코딩 입문 - 하다 보니 알게 되는 자바스크립트
3강 구구단 만들기(상) (3/15)

- 구구단 : 1~9까지의 수를 두 수끼리 서로 곱하여 그 값을 나타낸 것
- 입력한 값의 구구단을 출력
- 구구단에서의 고정값(중복 값)을 인자로 받는다.

function 구구단() {
    console.log(2*1);
    console.log(2*2);
    console.log(2*3);
    console.log(2*4);
    console.log(2*5);
    console.log(2*6);
    console.log(2*7);
    console.log(2*8);
    console.log(2*9);
}
// 고정값을 인자로 받기
function 구구단(a) {
    console.log(a*1);
    console.log(a*2);
    console.log(a*3);
    console.log(a*4);
    console.log(a*5);
    console.log(a*6);
    console.log(a*7);
    console.log(a*8);
    console.log(a*9);
}

4강 구구단 만들기(하) (4/15)
- 반복문을 사용하여 구구단 고도화 시키기

- 반복문
for (인자값 초기값; 인자 값의 조건; 인자 값의 변경 조건) {
    결과
}

for (var i = 1; i < 10; i++) {
    console.log('asd');
}
// 구구단 함수에 반복문 적용
function 구구단(a) {
    for (var i = 1; i < 10; i++) {
        console.log(a*i);
    }
}

html 텍스트 관련 태그 정리

1) hn 태그 - 제목 표시하기

- 일반 텍스트보다 굵고 진하게 표시

- heading의 첫 글자인 'h'와 크기를 나타내는 숫자(1 ~ 6)를 사용하여 <h1> ~ <h6>까지 표현한다.

- <h1>이 가장 큰 제목이고 <h6>이 가장 작은 제목이다.

2) p 태그 - 단락 만들기

- paragraph의 첫 글자인 'p'를 사용하여 텍스트 단락을 만드는 데 사용하는데 이때 단락이란 앞뒤에 줄 바꿈이 있는 텍스트 덩어리를 말한다.

- 텍스트 단락은 닫히는 태그인 </p> 태그를 만날 때까지 줄 바꿈 없이 텍스트를 한 줄로 표시하는데 텍스트의 줄이 브라우저의 창의 너비보다 길어질 경우 자동으로 줄 바꿈이 된다.

3) br 태그 - 줄 바꿈

- 입력하는 텍스트에서 줄 바꿈을 하더라도 웹 브라우저에서는 줄 바꿈 없이 한 줄로 표시되는데 웹 브라우저에서 줄 바꿈을 하려면 <br> 태그를 사용한다.

- break의 줄임말로 <br> 태그는 닫는 태그가 없다.

4) hr 태그 - 수평 줄 넣기

- horizontal의 줄임말로 수평 줄을 삽일할 때 사용하며 닫는 태그는 없다.

5) blockquote 태그 - 인용문 넣기

- blockquote 태그 안에 입력한 텍스트는 안으로 들여 써지므로 다른 텍스트와 구별된다.

- 일반적으로 다른 블로그나 사이트의 글을 인용할 경우 사용되며 인용한 사이트의 주소가 명확할 경우, cite 속성을 이용해 인용 사이트의 주소를 표시할 수 있다.

6) pre 태그 - 입력한 그대로 표시하기

- htm에서는 여러개의 공백을 넣어도 한개로 표시된다. 하지만 <pre> 태그를 사용할경우 소스에 표시한 공백이 그대로 브라우저에 표시된다.

- preformat의 줄임말을 사용한다.

** 태그 사용시 참고 url : https://html-css-js.com/html/tags/

html의 기본

1) html이란 무엇인가?

- html은 하이퍼텍스트 마크업 랭귀지(HyperText Markup Language)의 줄임말로 말 그대로 해석하면 하이퍼텍스트를 마크업 하는 언어이다. 즉, 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어를 HTML이라고 한다.

- 컴퓨터에서 사용하는 모든 파일들은 확장자라는 이름으로 각각 고유의 형식을 가지고 있는데 html 또한 컴퓨터의 웹 사이트에 맞는 형식인 *. html을 붙여 사용하는 형식을 가지고 있다.

- 웹문서인 html 파일은 일반문서와 차이가 있는데 일반문서는 내용을 입력하는 프로그램과 내용을 확인하는 프로그램이 같지만 웹문서는 작성하는 프로그램(웹 편집기 web editor)과 내용을 확인하는 프로그램(web browser)이 다르다.

2) 웹 표준이란 무엇인가?

- 웹사이트를 만들 때 지켜야 하는 약속들을 정리한 것

- 웹 표준의 존재 이유는 다양한 브라우저에 맞는 사이트들을 각각 만들기에는 너무나 비효율적이고 많은 인적, 물리적 시간이 소요되기 때문에 웹 표준이란 것이 존재한다.

- 웹 표준을 지킴으로써 브라우저에 상관없이 웹 사이트를 볼 수 있고 웹 개발자 또는 디자이너들의 시간을 절약할 수 있다.