1주차 - HTML, CSS, JS

HTML

 

1) 오늘의 TODO 리스트 만들기

 

Q. <div>안녕</div>, <p>하세요</p>, <button>확인</button> ... 등등!을, 뭐라고 부르는 지 알고 있나요?

→ A. Tag? 비슷해요! 하지만, 땡! 틀렸습니다. 이 친구들은 요소(elements)라고 불러요.

 

2) DOM(문서객체모델)

: DOM은 HTML 단위 하나하나를 객체로 생각하는 모델입니다.

예를 들면, 'div'라는 객체는 텍스트 노드, 자식 노드 등등, 하위의 어떤 값을 가지고 있겠죠?

이런 구조를 트리 구조라고 합니다. 

 

즉, DOM이 트리구조라는 얘기 입니다.

- DOM 트리 확인하기

: 브라우저의 개발자 도구에서 확인 해보겠습니다.

// 현재 dom 트리를 볼 수 있어요.
document

// dom 트리 중, body의 내용을 확인합니다.
document.body

// dom 트리 중, head의 내용을 확인합니다.
document.head

 

document와 body, head는 부모 - 자식 관계입니다.

body랑 head는 형제 관계입니다. (sibling이라고도 하죠!)

 

- 자식 요소에 접근하기

(body 안에 들어 있는 요소들에 접근하는 방법)

+ MDN 문서 링크
https://developer.mozilla.org/ko/docs/Web/API/Document

Document - Web API | MDN

 

+ HTML은 프로그래밍 언어인가??
프로그래밍 언어는 어떤 연산을 수행하거나, 소프트웨어, 시스템을 동작하게 하는 언어고요.

즉, HTML은 프로그래밍 언어가 아니라 마크업 언어입니다.

---

CSS

 

1) Selector

selector는 꾸밀 요소를 선택하는 선택자예요. 뭘 꾸밀 지 선택하고 속성을 넣어 예쁘게 꾸며주는겁니다. 

어떤 속성이 있는 지 모를 때는 MDN 문서를 참고하면 됩니다!

 

+ MDN 문서 링크

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

/* id selector */
#id { ... }

/* class selector */
.class { ... }

/* tag selector */
tagName { ... }

/* 여러 요소 선택하기 */
#id, .class { ... }

/* 수도 클래스 선택자 */
/* 어떤 요소가 특정 상태(마우스 올림, 포커스 됨 등등)일 때만 선택하게 해주는 선택자예요. */
button:hover { ... }

2) 그리드 시스템

DOM 요소들은 기본적으로 박스 형태로 표시됩니다! p, div 할 것 없이 모두 네모난 영역을 가져요!

 

- 박스 모델

 

- 그리드 시스템

그리드 시스템은 레이아웃을 잡는데 사용하는 거예요.

예를 들자면, todo-card를 두 줄로 보여주고 싶을 때처럼, 가로, 세로를 나누어 화면 배치를 만져주는 거죠!

 

+ flex로 그리드 잡기

        .wrap{
            /* 그리드 시스템 */
            display: flex; 
            /* display : flex : 카드 하나하나의 영역을 유동적으로 바꿔준다. */
        }

        .todo-list {
            border: 1px solid gray;
            border-radius: 5px;
            margin: 1%;
            padding: 2%;
        }

    <div class="wrap">
        <div class="todo-list">
            <h3>고양이 밥주기</h3>
            <p>고양이 물, 사료 챙겨주기</p>
            <button>완료</button>
        </div>

        <div class="todo-list">
            <h3>장보기</h3>
            <p>토마토, 계란, 초콜렛 사기</p>
            <button>완료</button>
        </div>
    </div>

 

3) CSS 사칙연산

CSS도 연산이 됩니다! 이번에는 button의 크기를 연산 해보겠습니다.

 

- calc()

 

(연산 순서)

-> 왼쪽에서 오른쪽으로,

-> 곱셈, 나눗셈을 먼저, 덧셈, 뺄셈은 그 다음에!

-> 괄호가 있으면 괄호 안쪽을 먼저 계산

 

더 많은 연산은 MDN 파일을 참고 하면 됩니다!

https://developer.mozilla.org/ko/docs/Web/CSS

CSS: Cascading Style Sheets | MDN

---

JavaScript 기초 1 - DOM을 조작하는 방법

 

1) Document로 DOM에 접근하기

 

- document.getElementByClassName

: 클래스명으로 DOM 요소에 접근합니다.

const wraps = document.getElementsByClassName("wrap");
console.log(wraps);

+ HTMLCollection -> 유사배열

: Array의 내장 함수를 쓸 수 없는 배열

 

- document.getElementById

const title = document.getElementById("title");
// 자바스크립트에서는 어떤 객체의 속성에 접근할 때 .을 이용해 접근할 수 있어요.
// title이라는 요소의 style 속성에 접근하려면 아래와 같이 title.style로 접근할 수 있습니다!
// style 안에 있는 속성에 접근할 때도 마찬가지예요. style.backgroundColor로 배경색 속성에 접근할 수 있어요.
title.style.backgroundColor = "yellow";

 

- document.getElementsByTagName

	function sayHello (event) {
            console.log("hello");             
         }

         const buttons = document.getElementsByTagName("button");

        // 이 구문은 X! html collection은 유사 배열이기 때문에 array의 내장함수를 쓸 수 없어요!
        //buttons.map(b => {
            //console.log(b);
        //});        

        for (let i=0; i< buttons.length; i++){
            // .addEventListener()로 클릭 이벤트를 연결해줍니다. 
            buttons[i].addEventListener("click", sayHello);
        }

-> 버튼을 눌렀을 때 onclick 이벤트를 발생 시켜 보는 코드

-> addEventListener() 말고도 onclick()을 사용하는 방법도 있습니다!

 

2) Document에 DOM 요소 추가하기

 

- document.createElement()

: 요소는 만들기만 하면 알아서 DOM에 삽입되지 않기 때문에 만들고 -> DOM에 넣어줘야 합니다.

	// 새 요소를 만들어요.
        const new_div = document.createElement("div");

        // 한 눈에 확인해볼 수 있도록 스타일을 조금 추가해줄게요. 그냥 div는 눈에 안보일테니까요!
        new_div.style.backgroundColor = "green";
        new_div.style.width = "100px";
        new_div.style.height = "100px";

        // 요소를 body에 추가해줍시다.
        document.body.appendChild(new_div);
        // or document.body.append(new_div)

 

+ script를 body 맨 아래에 넣는 이유

script를 body 보다 위에 놓으면 오류가 발생합니다.

왜냐하면 style은 요소가 다 만들어진 후 변경이 되어야 하기 때문입니다!

(HTML은 위에서 아래로 코드를 읽어 나가기 때문입니다.)

 

+ append와 appendChild의 차이점

---

JavaScript 기초 2 - ES6 (ECMA Script 6)

 

ES6란 자바스크립트 표준 문법 중 하나로 가장 보편화된 친구입니다!

 

1) let, const와 scope(범위)

 

- 스코프(Scope)란?

: 어떤 변수를 선언했을 때, 그 변수를 사용할 수 있는 유효범위를 스코프라고 불러요.

즉, 변수에 접근할 수 있는 범위

 

- var : 함수 단위(Function Level Scope)

- let : 블록 단위(Block Level Scope. 변수)

: 값이 변할 수 있는 수!

- const : 블록 단위(Block Level Scope. 상수)

: 값이 변할 수 없는 수!

function scope(){
	const a = 0;
	let b = 0;
	var c = 0;

	// {} 증괄호 안에 든 내용을 블럭이라고 표현해요.
	
	if(a === 0){
		const a = 1;
		let b = 1;
		var c = 1;
		console.log(a, b, c);
	}
	// 앗! c는 값이 변했죠? 
	// 그렇습니다. var는 함수 단위라서 if문 밖에서 선언한 값이 변했어요.
	// let과 const로 선언한 겂은 어떤가요? if문 안쪽 내용이 바깥 내용에 영향을 끼치지 않죠?
	console.log(a, b, c);
}

 

2) 함수

: 함수는 function do_something() { ... } 처럼 생긴 친구들을 말합니다.

어떤 코드의 묶음이고, do_something()처럼 ()를 붙여주면 미리 만들어둔 코드 묶음이 실행되는 거예요.

내장 함수는 우리가 만들지 않아도 자바스크립트가 쓰기 편하라고 미리 만들어둔 코드 묶음들이에요!

 

- 함수 선언식

function do_something() { ... }

- 함수 표현식

// 함수 이름은 생략해도 괜찮아요! - > 익명함수
let do_something = function [함수 이름]() { ... }

- 화살표 함수

// 화살표 함수는 함수 표현식의 단축형입니다.
// function까지 생력이 되었죠!
let do_something = () => { ... }

 

3) Class

: 객체 지향 프로그래밍에서 클래스는 특정 객체를 생성하기 위해 변수와 함수를 정의하는 일종의 틀을 말해요.

객체를 정의하기 위한 상태와 함수로 구성되어 있죠! 객체 단위로 코드를 그룹화하고 쉽게 재사용하려고 사용합니다.

 

- 클래스를 구성하는 것

: 클래스 안에는 객체를 정의하기 위한 상태(property)와 함수가 있습니다.

class Cat {
  	// 생성자 함수
  	constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
	}
}

// 여기서 new는 키워드예요. 새로운 무언가를 만들기 위해서 생성자 함수와 함께 씁니다.
// 네, new와 생성자 함수는 세트예요 :) (소근 
let cat = new Cat('perl');
cat.showName();
console.log(cat);

+ 생성자 함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화(초기값을 설정)하는 역할을 합니다.

+ 함수 : 어떤 일을 하는 함수입니다.

 

- 클래스를 상속 하려면?

: 클래스를 상속한다는 건, 이미 만들어 둔 어떤 클래스를 가지고 자식 클래스를 만드는 것입니다.

class Cat {
	// 생성자 함수
  	constructor(name) {
		// 여기서 this는 이 클래스입니다.
		this.name = name; 
	}

	// 함수
	showName(){
		console.log(this.name);
		return this.name;
	}
}

// extends는 Cat 클래스를 상속 받아 온단 뜻입니다.
class MyCat extends Cat {
	// 생성자 함수
  	constructor(name, age) {
		// super를 메서드로 사용하기
		super(name); 
		this.age = age; 
	}
	
	// 부모 클래스가 가진 것과 같은 이름의 함수를 만들 수 있습니다.
	// 오버라이딩한다고 해요.
	showName(){
		console.log(this.name);
		// super를 키워드로 사용하기
		return '내 고양이 이름은 '+super.showName()+'입니다.';
	}
	
	showAge(){
		console.log('내 고양이는 '+this.age+'살 입니다!');
	}
}

let my_cat = new MyCat('perl', 4);
my_cat.showName();
my_cat.showAge();

 

+ super 키워드

 

-> 메소드로 사용할 수 있다.(constructor 안에서)

    -> 부모의 constructor를 호출하면서 인수를 전달한다.

    -> this를 쓸 수 있게 해준다

-> 키워드로 사용할 수 있다.

    -> 부모 클래스에 대한 필드나 함수를 참조할 수 있다.

 

4) =과 ==과 ===

 

- (=)

: 할당을 뜻합니다. / 어떤 변수에 값을 할당 할 때 쓴다.

 

- (==)

: 등차입니다. / 유형을 비교하지 않는 등차입니다. 변수 값을 기반으로 비교합니다.

 

- (===)

: 등차입니다. / 유형을 비교하는 등차입니다. 엄격한 비교를 합니다.

 

5) Spread 연산자(Spread 문법) -> 전개 연산자

: 어떤 객체 안에 있는 요소들을 객체 바깥으로 꺼내주는 연산자(문법)

(껍데기를 벗겨주는 역할을 한다.)

let array = [1,2,3,4,5];
// ... <- 이 점 3개를 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array]은 array에 있는 항목을 전부 꺼내 
// 새로운 배열([] => 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
let new_array = [...array];

console.log(new_array);
// -> [1, 2, 3, 4, 5]

6) 조건부 삼항 연산자

: 삼항 연산자는 if문의 단축 형태입니다.

 

+ 사용법 : 조건 ? 참인 경우 : 거짓인 경우

let info = {name: "mean0", id: 0};

let is_me = info.name === "mean0"? true : false;

console.log(is_me);

---

JavaScript 기초 3 - Array 내장 함수

 

1) map

: 배열에 속한 항목을 변환할 때 많이 사용합니다. 

어떤 배열에 속한 항목을 원하는 대로 변환하고, 변환한 값을 새로운 배열로 만들어줍니다

즉, 원본 배열은 값이 변하지 않는다.

const array_num = [0, 1, 2, 3, 4, 5];

const new_array = array_num.map((array_item) =>{ 
	return array_item + 1;
});
// 새 배열의 값은 원본 배열 원소에 +1 한 값입니다.
console.log(new_array);
// 원본 배열은 그대로 있죠!
console.log(array_num);

 

2) filter

: 어떤 조건을 만족하는 항목들만 골라서 새 배열로 만들어주는 함수입니다.

원본 배열은 변하지 않고, 원하는 배열을 하나 더 만들 수 있습니다.

const array_num = [0, 1, 2, 3, 4, 5];

// forEach(콜백함수)
const new_array = array_num.filter((array_item) => {
	// 특정 조건을 만족할 때만 return 하면 됩니다!
	// return에는 true 혹은 false가 들어가야 해요.
	return array_item > 3;
});

console.log(new_array);

 

3) concat

: 배열과 배열을 합치거나 배열에 특정 값을 추가해주는 함수입니다! 원본 배열은 변하지 않아요!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

const merge = array_num01.concat(array_num02);

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);
// 제거 되지 않고 그대로 있습니다!

+ concat은 중복 항목을 제거해주지 않아요! 그래서 다른 내장함수와 함께 사용해서 제거해야 합니다!

const array_num01 = [0, 1, 2, 3];
const array_num02 = [3, 4, 5];

// Set은 자바스크립트의 자료형 중 하나로, 
// 중복되지 않는 값을 가지는 리스트입니다. :)!
// ... <- 이 점 3개는 스프레드 문법이라고 불러요.
// 배열 안에 있는 항목들(요소들)을 전부 꺼내준다는 뜻입니다.
// 즉 [...array_num01]은 array_num01에 있는 항목을 전부 꺼내 
// 새로운 배열([] 이 껍데기가 새로운 배열을 뜻하죠!)에 넣어주겠단 말입니다!
const merge = [...new Set([...array_num01, ...array_num02])];

// 중복 항목(숫자 3)이 제거되었나요? 아니면 그대로 있나요? :)
console.log(merge);
// 중복된 값이 제거 되어 있습니다!

 

4) from

- 배열로 만들고자 하는 것이나 유사배열을 복사해서 새로운 배열로 만들 때

- 새로운 배열을 만들 때 (초기화 한다고도 표현해요.) 

주로 사용합니다.

 

+ 유사배열이란?

: [ 어떤 값들... ] 이 모양으로 생겼지만 배열의 내장 함수를 사용하지 못하는 친구들입니다.

DOM nodelist 같은 게 유사배열이에요.

// 배열화 하자!
const my_name = "mean0";
const my_name_array = Array.from(my_name);
console.log(my_name_array);
// -> ['m', 'e', 'a', 'n', '0']

// 길이가 문자열과 같고, 0부터 4까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const text_array = Array.from('hello', (item, idx) => {return idx});

console.log(text_array);
-> [0, 1, 2, 3, 4]

// 새 배열을 만들어 보자!(=> 빈 배열을 초기화한다고도 해요.)
// 길이가 4고, 0부터 3까지 숫자를 요소로 갖는 배열을 만들어볼거예요. 
const new_array = Array.from({length: 4}, (item, idx)=>{ return idx;});

console.log(new_array);
// -> [0, 1, 2, 3]

 

+ 퀴즈1

배열에서 고양이가 몇마리인 지 세기 - map 사용

const animals = ["강아지", "고양이", "햄스터", "강아지", "고양이", "고양이", "토끼"];

let count = 0
animals.map((item, i)=>{
    if(item === "고양이"){
        count++
    }
})

console.log(count) // 3

 

+ 퀴즈2

배열에 고양이가 몇마리인 지 세기 - filter 사용

const animals = ["복슬 강아지", "검정 고양이", "노란 햄스터", "강아지", "노랑 고양이", "고양이", "흰 토끼"];

let count = animals.filter((item, i)=>{
    return item.indexOf("고양이") != -1){
    // indexOf는 파라미터로 넘겨준 텍스트가 몇번째 위치에 있는 지 알려주는 함수
    // 파라미터로 넘겨준 텍스트가 없다면 -1을 반환합니다.
    // 즉 고양이라는 단어가 포함되어 있는 지 확인하는 구문입니다.
    }
}).length

console.log(count)

 

+ 퀴즈3

두 배열을 합쳐보자! - concat 사용

const dogs = ["검은 강아지", "노란 강아지", "흰 강아지"];
const cats = ["검은 고양이", "복슬 고양이", "노란 고양이"];

const animals = dogs.concat(cats)
console.log(animals)

// spread 연산자 사용한 방법
const animals2 = [...dogs, ...cats]
console.log(animals2)