🎈 로컬 스토리지(Local Storage)

• 로컬 스토리지는 HTML5에서 추가된 저장소
• 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스
• 사용자가 직접 지우지 않는이상 절대 지워지지 않음
• URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음

📝과제 : https://bighuni.github.io/JS-Study/Assignment/1회차

[회고]

• 1회차 과제인 로컬 스토리지를 활용하여 간단한 메모장을 만들었었는데, 한 가지 메모 내용만 저장하고, 화면 전환 없이 바로 해당 메모를 삭제할 수 있는 기능 등을 보완하기 위해 html, css & js 전반적인 코드를 다시 뜯어내고 getItem과 setItem, JSON의 stringify로 값이나 객체를 문자열로 변환하고, liMaker()함수를 호출하여 li 엘리먼트에 텍스트 값을 넣어 Item 목록인 ul을 추가할 것

• 기입할 내용을 저장할 수 있도록 저장하기 버튼을 누르면 메모 내용이 아래 리스트처럼 나열될 수 있도록 의도하기

• 초기화 버튼을 누르면 기존에 기입한 메모들 삭제 기능 추가하기

[UI]

🎈 자바스크립트 클래스 정리

• 생성자 함수
• 프로토타입
• 클래스 문법
• 클래스 정의 방식 비교(생성자 함수 vs 클래스)
• 클래스 호이스팅

[정리]

1. 클래스 정의

1-1. 생성자 함수

함수를 통해서 new 연산자와 함께 호출해서 빈 객체를 생성하여 반환한다. 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성시킬 수 있다. 새로운 객체(인스턴스)를 만들고 사용자가 요구하는 함수들을 구현할 수 있게 해주는데, 생성자 함수에 의해 생성된 객체를 인스턴스(Instance)라 한다.

const player = new Object();

player.name = 'Choi';
player.sayWinner = function () {
    console.log('Ladies and gentlemen, Champion is ' + this.name);
};

player.sayWinner();

Ladies and gentlemen, Champion is Choi

1-1-1. 객체 리터럴에 의한 객체 생성 방식

필히 객체 생성자 함수를 사용해 빈 객체를 생성하는 것은 아니다. 객체를 생성하는 방법에는 객체 리터럴이 있고, 이 방법이 직관적이고 간편하다. 하지만, 단 하나의 객체만 생성하기 때문에 동일한 프로퍼티를 갖는 객체들을 생성해야 하는 경우에는 같은 프로퍼티를 계속해서 작성해야 하기 때문에 비효율적이다.

const rabbit = {
    type: '토끼',
    name: '빙키',
    sound: '깡총',
    say() {
        console.log(this.sound);
    }
};

console.log(rabbit.say());

const frog = {
    type: '개구리',
    name: '개리',
    sound: '개굴',
    say() {
        console.log(this.sound);
    }
};

console.log(frog.say());

깡총
개굴

위 코드에서 rabbit 객체와 frog 객체는 프로퍼티 구조가 동일하다. 객체 상태 데이터인 type, name, sound 프로퍼티 값은 다르지만, say 메서드는 같다. 이렇게 프로퍼티 구조가 같음에도 불구하고 매번 기술할 때마다 동일한 프로퍼티와 메서드를 나타내야 한다는 점이 물론, 한 두개의 객체를 표현할 때에는 번거롭지 않지만, 수 많은 객체를 생성해야 한다는 문제를 해결하기는 어렵다.

1-1-2. 생성자 함수에 의한 객체 생성 방식

흔히 문서 파일로 생성하기 위해 복사하여 사용하는 템플릿처럼 생성자 함수를 이용하여 프로퍼티 구조가 동일한 객체들을 여러 개 생성할 수 있는 방식이다.

function Animal(type, name, sound) {
  this.type = type;
  this.name = name;
  this.sound = sound;
  this.say = function() {
    console.log(this.sound);
  };
}

const rabbit = new Animal('토끼', '빙키', '깡총');
const frog = new Animal('개구리', '개리', '개굴');

rabbit.say();
frog.say();

깡총
개굴

생성자 함수는 C++, JAVA와 같은 클래스 기반 객체지향 언어와는 다르게 형식이 정해져 있지 않아서 일반 함수와 동일한 방법으로 정의할 수 있지만, new 연산자와 함께 호출하고 함수의 첫 글자는 대문자로 기술하는 것이 일반적인 관례이다.

1-2. 프로토타입

프로토타입은 사전 그대로 원형을 의미한다. 같은 생성자로부터 만들어진 객체들은 모두 원래의 모습인 이 원형 객체를 공유한다. 위 생성자 함수의 예제코드에서 살펴보았듯이 객체 rabbit과 frog가 동일한 say() 메서드를 수행하고 있는데, 이처럼 같은 객체 생성자 함수를 사용할 때 함수 또는 값을 재사용 할 수 있습니다. 이것이 바로 프로토타입이다.

프로토타입은 부모(상위) 객체의 역할을 하는데 다른 객체에 프로퍼티를 공유할 수 있다. 프로토타입을 상속받은 자식(하위) 객체는 부모 객체의 프로퍼티를 자신의 것으로 사용할 수 있다.

생성자 함수는 기본적으로 prototype 프로퍼티를 가지고 있는데, 이는 함께 만들어지는 프로토타입을 말하고, 프로토타입도 constructor라는 프로퍼티를 가져 생성자 함수를 말한다. 고로 둘의 관계는 뗄 수 없는 짝꿍의 개념이다.

• 생성자 함수의 prototype 프로퍼티 ⇒ 프로토타입
• 프로토타입의 constructor 프로퍼티 ⇒ 생성자 함수

자바스크립트는 프로토타입을 기반으로 상속을 구현해서 불필요한 중복을 제거하는데, 코드 재사용이 개발에 엄청난 효율성을 가져다 주기 때문에 이 점이 매우 중요하다.

1-3. 클래스 문법

1-3-1. Syntax Sugar(문법적 설탕)

자바스크립트는 프로토타입 기반의 객체지향 언어이다. 따라서 클래스가 필요 없어도 생성자 함수와 프로토타입을 통해 객체지향 언어에서 사용하는 상속을 사용할 수 있다. 하지만, C#과 자바와 같은 다른 클래스 기반의 언어에 익숙한 프로그래머들은 위 기반의 방식에 혼란을 느낄 수 있었다.

ES6부터 도입된 클래스는 다른 클래스 기반의 언어에 익숙한 프로그래머들에게 자바스크립트 학습에 대한 도움을 줄 수 있도록 매우 비슷한 객체 생성 프로세스를 제시한다. 그렇다고 해서 자바스크립트가 기존의 프로토타입 기반의 객체지향 모델을 져버리지는 않고, 기존 프로토타입 기반의 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 해주는 편의문법(문법적 설탕)이라고 볼 수 있다.

주의해야할 점은 클래스와 생성자 함수간 차이점은 분명 존재한다.

• new 연산자 없이 호출하면 클래스에서는 에러가 발생하고, 생성자 함수에서는 일반 함수로서 호출된다.
• 상속을 지원하는 extend와 super 키워드를 클래스에서는 지원, 생성자 함수에서는 미지원한다.
• 클래스 내 모든 코드에는 strict mode가 지정되어 있으며, 이를 해제할 수 없다. 반면, 생성자 함수는 strict mode가 지정되어 있지 않다.

간단히 요약해보면, 클래스가 생성자 함수보다 더욱 엄격하며 생성자 함수에서 제공하지 않는 기능을 제공한다는 점이다.

1-3-2. 클래스 사용

클래스는 class 키워드를 사용하여 정의할 수 있는데, 생성자 함수와 동등하게 첫 번째 글자를 대문자로 사용하는 파스칼 케이스를 사용하는 것이 일반적이다. 물론 파스칼 케이스를 사용하지 않아도 에러가 발생하지는 않는다.

class Player {}

1-3-3. 표현식

클래스를 표현식으로 정의할 수 있다는 얘기는 클래스가 값으로 사용할 수 있다는 것이다. 이는 클래스가 일급 객체의 특징을 갖는다는 것을 의미한다. 아래는 일급 객체의 특징을 나타낸다.

• 함수는 무명의 리터럴로 생성할 수 있다. (런타임에 생성이 가능하다.)
• 변수나 객체 및 배열 등과 같은 자료구조에 저장할 수 있다.
• 함수의 매개변수에 전달할 수 있다.
• 함수의 반환값으로 사용할 수 있다.

더욱 자세하게 살펴보면, 클래스는 함수이다. 따라서 클래스를 값처럼 사용할 수 있다.

class Player {}

console.log(typeof Player);

function

클래스는 함수와 마찬가지로 이름을 가질 수 있는 기명 클래스 표현식과 갖지 않을 수 있는 익명 클래스 표현식으로 나타낼 수 있다.

const Player = class {};  // 익명 클래스 표현식

const Player = class myClass {}; // 기명 클래스 표현식

1-4. 정의 방식 비교

생성자 함수는 function 뒤에 함수명을 적는 반면, 클래스는 class 키워드 뒤에 클래스명을 적어 정의한다.

1-4-1. 생성자 함수

var Player = (function () {

function Player(name) {
    this.name = name;
    }

// 프로토타입 메서드
Player.prototype.sayWinner = function () {
    console.log('Ladies and gentlemen, Champion is ' + this.name);
    };

// 정적 메서드
Player.sayWinner = function () {
    console.log('Champion!');
    };

return Player;
}());

Player.sayWinner();

Champion!

1-4-2. 클래스

class Player {

constructor(name) {
    this.name = name;
    }

// 프로토타입 메서드
sayWinner() {
    console.log('Ladies and gentlemen, Champion is ${this.name}');
    }

// 정적 메서드
static sayWinner() {
    console.log('Champion!');
    }
}

Player.sayWinner();

Champion!

2. 클래스 호이스팅

앞선 5단원 var의 호이스팅 부분에서도 언급을 하였지만, 클래스의 선언문으로 정의한 클래스는 소스코드 평가 과정에서 실행하기 이전에 먼저 평가되어 함수 객체를 생성하는데 이것이 바로 호이스팅이다.

쉽게 말해서, 모든 선언문을 먼저 찾아내서 실행하고 난 뒤에 이후 모든 선언문을 제외한 소스코드부터 순차적으로 실행하는데, 이 때 클래스 선언문이 최상단으로 끌어올려져 동작하는 것을 의미한다.

이렇게 생성된 함수 객체는 생성자 함수로서 호출할 수 있는 함수인데 프로토타입과 더불어 같이 생성된다. 생성자 함수와 프로토타입은 어느 하나 단독으로 존재할 수 없고 항상 같이 존재하기 때문이다.

주의해야할 점은 클래스는 정의하기 이전에 참조할 수 없다.

console.log(Player);

class Player {}

클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생하는데, 주의점으로 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다.

var, let, const, function, class 등의 키워드를 사용해서 선언된 모든 식별자는 호이스팅이 되는데 그 이유는 모든 선언문은 런타임 이전에 먼저 실행되기 때문이다.

[참고자료]

https://ko.javascript.info/class

https://ko.javascript.info/constructor-new

https://www.zerocho.com/category/JavaScript/post/573c2acf91575c17008ad2fc

https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Details_of_the_Object_Model

https://blinders.tistory.com/90

https://velog.io/@dasol-jeong/%EC%83%9D%EC%84%B1%EC%9E%90-%ED%95%A8%EC%88%98-vs-%ED%81%B4%EB%9E%98%EC%8A%A4

🎈 캐러셀 슬라이더(Carousel slider) 과제

• 여러 개의 이미지(그림, 사진, 영상 등)을 슬라이드 형태로 순환하며 보여주는 방식
• 보여지는 이미지 혹은 그림 유무
• 슬라이드를 이동할 수 있는 버튼 유무
• 마지막 슬라이드(5번째) 이후 다음 버튼 클릭 시 첫 번째 슬라이드(1번째)로 돌아오기

📝과제 : https://bighuni.github.io/JS-Study/Assignment/2주차

[정리]

• div.slide_content는 float: left로 붙여 놓는다. 이를 감싸는 div.slide_list는 슬라이드를 모두 합한 넓이를 가져야 슬라이드가 가로 일렬로 늘어서게 된다.

• div.slide_box를 overflow-x: hidden으로 주어 슬라이드 한 개만 보여지게 만든다.

• translate3d로 슬라이드를 이동하면서 다음 이미지를 확인한다.

[회고]

• *JavaScript를 활용하여 간단한 캐러셀 슬라이드를 만들었는데, 버튼을 이용하여 다음 이미지를 불러와서 마지막 5번째 슬라이드에서 다음 버튼을 눌렀을 때, 다시 첫 슬라이드 이미지로 돌아오는 것을 구현하였다. 더욱 보완해야할 점은 이를 다시 첫 번째 슬라이드로 돌아오게끔 하는 것이 아니라 다음 버튼을 클릭하면 첫 번째 이미지로 넘어가는 것처럼 자연스럽게 구현할 필요성을 느꼈고, 이전 버튼을 클릭하면 이미지를 불러오지 않는 문제 등을 개선할 필요성을 느꼈다. *

[구현]

🎈 로컬 스토리지(Local Storage)

• 로컬 스토리지는 HTML5에서 추가된 저장소
• 키-밸류 스토리지의 형태, 쉽게 말해 브라우저 상의 데이터베이스
• 사용자가 직접 지우지 않는이상 절대 지워지지 않음
• URL을 기준으로 저장되기 때문에 웹페이지 주소가 다른 곳에서는 정보가 저장되어 있지 않음

📝과제(리팩토링 후) : https://bighuni.github.io/JS-Study/Assignment/1회차

[정리]

• const LOCAL_DATA = "Contents"; => 저장할 데이터의 key 값
• function hiddenAndGreeting(name) {···} => input 태그에 이름 입력 후 input 태그를 감추고, 텍스트가 나타나게 해주는 함수
• function onClick() { localStorage.removeItem(LOCAL_DATA); ··· } => 버튼 클릭 시, 데이터 삭제 이벤트 발생
• function onSubmit(e) {···} => input 태그에 입력 시, lacalStorage의 value 값으로 저장
• function askForContents() {···} => input 태그 보이게 설정, 인사 텍스트와 버튼은 숨김
• function loaded() {···} => 브라우저의 localStorage에 데이터가 있을 때와 없을 때를 구분하여 실행 시켜줄 함수

[회고]

• *로컬 스토리지를 활용하여 정말 간단한 메모장을 만들게 되었는데, 메모지에 내용을 입력 후 Key, Value에 내용이 추가되는 것을 확인할 수 있었고 화면을 새로고침하거나 페이지를 닫고 다시 열었을 때 내용이 그대로 살아있음을 확인하였다. 더 보완해야할 점은 지금은 한 가지 메모 내용만 저장할 수 있어서 다수의 메모 내용을 저장하고, 화면 전환 없이 바로 해당 메모를 삭제할 수 있는 기능, 기록한 시간(Date) 등의 기능 추가 및 사용자 인터페이스를 좀 더 보완해야겠다고 느꼈다. *

[구현]

[리팩토링]

• 링크 : https://velog.io/@big_huni/%EB%A6%AC%ED%8C%A9%ED%86%A0%EB%A7%81-%EB%A1%9C%EC%BB%AC-%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80

크리스마스

🎈 링크 : https://bighuni.github.io/Merry-Christmas-with-snow/Merry-Christmas-with-snow/

[목적]

파이썬은 1989년 12월 크리스마스를 심심하지 않게 보내려고 네덜란드 귀도 반 로섬(Guido van Rossum)이 혼자 만들었다고 한다..

나 또한 이 정신을 본 받아 대훈 허(Daehun Heo)도 HTML, CSS, JavaScript 친구들과 함께 이번 2021년 12월 크리스마스를 심심하지 않게 보내려고 만들었다..!

[회고]

❤ 스타일

• body의 height 값으로 100vh 설정함으로써 웹 브라우저의 높이와 일치

• 단색의 배경의 단조로움을 피하기 위해 원형 그라이데이션(redial-gradient) 함수 사용

• 원형 그라이데이션(redial-gradient) 속성 값으로 중심 아래쪽이 원형의 중심이 되도록 'ellipse at bottom' 사용

• '애니메이션 snow' 지정으로 투명도, transform 값을 부여하여 위에서 아래로 이동하는 눈 표현(snow 10s linear infinite)

• 눈이 단조롭게 내리는 것을 피하기 위해 snow 클래스의 'nth-of-type()' 선택자를 이용하여 여러 개 눈들 각각 별도로 값 지정

💚 주의사항

• 웹 브라우저 크기를 조정 시 눈이 화면 밖으로는 내리지 않는 것을 볼 수 있는데, 최초 화면일 때의 눈을 내리게 하는 랜덤 수치의 값이 유지되고 있기 때문에 새로고침을 하게 되면, 재계산하여 바뀐 화면 크기에서도 잘리지 않고 볼 수 있게 된다.

*처음에 만들기 전까지 쓸쓸하고, 고독한 심정으로 묵묵히 코딩을 하기 시작했는데, 어느 덧 다 만들고 보니 뿌듯하고, 의미있는 크리스마스를 보낸 것 같아 행복하다..! (너 진짜 행복한 거 맞지..?) 👊🏻 *

🎈 Switch 조건문

• if else 문의 boolean값보다 문자열, 숫자값처럼 다양한 case에 실행할 코드 블록을 결정할 때 사용

[switch 조건문]

• 쉽게 말해서, 자료를 평가하여 그 값과 일치하는 case 문으로 실행에 옮긴다.

[소스 코드] switch(자료) { case 조건 A: break

case 조건 B: break

default: // default 키워드 생략 가능 break }

[소스 코드] switch(input % 2) { case 0: alert('짝수입니다.') break

case 1: alert('홀수입니다.') break

default: alert('숫자가 아닙니다.') break }

• break 키워드 : switch 조건문이나 반복문을 빠져나가기 위해 사용

• switch(조건문) : 값을 비교하여 해당 case로 이동

[switch 조건문 -> if 조건문 변환]

[소스 코드]

switch(true) { case hour < 11: alert('아침 식사 시간입니다.') break

case hour < 14: alert('점심 식사 시간입니다.') break

default: alert('저녁 식사 시간입니다.') break }

[조건부 연산자]

• 불 표현식 ? 참일 때의 결과 : 거짓일 때의 결과
  
• 자바스크립트에서 항을 3개 갖는 연산자는 조건부 연산자가 유일(= 삼항 연산자)

[소스 코드] const input = prompt('숫자를 입력해주세요.', '') const number = Number(input)

const result = (number >= 0) ? '0 이상 숫자' : '0 보다 작은 숫자' alert(result)

• 24 입력 시 => 0 이상의 숫자
• -75 입력 시 => 0 보다 작은 숫자

[짧은 조건문]

• 논리합 연산자(||)를 사용한 짧은 조건문 불 표현식 || 불 표현식이 거짓일 때 실행할 문장

• 논리곱 연산자(&&)를 사용한 짧은 조건문 결과가 거짓인 불 표현식 && 불 표현식이 참일 때 실행할 문장

🎈 조건문

• 프로그램의 흐름을 변경할 때 사용

[if 조건문]

• 자바스크립트에서 가장 일반적인 조건문으로 활용
  
• 조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용
  
• 조건이 한 문장이라면 중괄호 생략 가능
  
• 사용하는 조건 = 불 자료형(boolean)
  1. 비교 연산자(==, ===, !=, ...)
  2. 논리 연산자(||, &&, !)
     

📌 if 조건문을 이해하려면 비교 연산자와 논리 연산자를 확실히 학습한 후 진행
[소스 코드] <script>

// 변수 선언 const date = new Date() const hour = date.getHours()

// if 조건문 if(hour < 12) { alert('오전입니다.'); }

if(hour >= 12) { alert('오후입니다.'); }

</script>

[if else 조건문]

• if 조건문 뒤에 else 구문을 붙여서 사용

  
  

• if 조건문 참(true)일 경우 실행,

• else 구문*은 거짓(false) 일 경우 실행

  
  

• 정반대 조건을 검사할 때, if 조건문 2번 사용하지 않아도 된다는 장점 => 성능 향상

  
  

[소스 코드] if(boolean 표현식) { "참일 때 실행할 문장" } else { "거짓일 때 실행할 문장" }

[중첩 조건문]

• 조건문 안에 조건문 중첩
  

[소스 코드] if(boolean 표현식1) { if(boolean 표현식2) { "표현식2가 참일 때 실행할 문장" } else { "표현식2가 거짓일 때 실행할 문장" }

} else { if(boolean 표현식3) { "표현식3이 참일 때 실행할 문장" } else { "표현식3이 거짓일 때 실행할 문장" } }

[if else if 조건문]

• 겹치지 않는 3가지 이상의 조건으로 나눌 때 사용
  

[소스 코드] if(hour < 10) { alert('아침 식사 시간입니다.')

} else if(hour < 14) { alert('점심 식사 시간입니다.')

} else { alert('저녁 식사 시간입니다.') }

🎈 핵심포인트

🍀 if 조건문 : 조건에 따라 코드 실행 or 실행하지 않도록 하는 사용 구문

🍀 else 구문 : if 조건문 거짓일 때 if 뒤에 사용

🍀 중첩 조건문 : 조건문에서 { 기호 중첩 사용

🍀 if else if 조건문 : 중첩 조건문에서 중괄호 생략, 겹치지 않는 3가지 이상 조건 사용

⭕ 초보자들이 하기 쉬운 실수 : 값 비교를 위해 if 문의 동등 연산자(==)를 사용해야 할 곳에 대입 연산자(=)로 잘못 사용

⭕ 간단한 if / else 문을 삼항 연산자를 이용하여 표현

• 표현식 ? 반환값1 : 반환값2

Grid

• 다양한 레이아웃을 구현 📝실습 : https://bighuni.github.io/front-end-school/Training/211108_Grid/

• Flex에 이어 Grid를 학습하게 되었다. 둘의 내용이 겹치는 부분이 있지만, 궁극적인 차이가 존재한다.

• Flex = 한 방향의 레이아웃(1차원) Grid = 두 방향의 레이아웃(2차원)

• 파이어폭스 개발자 도구에서 그리드를 명확하게 보여주는 기능때문에 그리드를 처음 학습할 때는 파이어폭스가 유용했지만, 이제 크롬 개발자 도구에도 이 기능이 생겼다..!

• Flex와 마찬가지로 부모는 Grid Container, 자식은 Grid item

• grid-template-columns : 열의 넓이 grid-template-rows : 행의 높이

• repeat (적용할 트랙의 갯수, 반복할 수치)

• grid-template-columns: repeat(3, 1fr); = grid-template-columns: 1fr 1fr 1fr;

• 1:1:1 비율의 열 의미

• 셀 영역 지정 grid-column : 1 / span 2 -> 2칸 차지 grid-column : 1 / 4 = 1 / span 3 -> 3칸 차지

• 높이 vh단위는 100분의 1을 의미 => 브라우저 높이 값이 1200px일때, 1vh = 12px

• height: 100vh = body의 부피는 화면 전체를 차지

• grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); => 영역 설정

• width: 100%; height: 100%; => 이미지 크기 설정

• 각 first ~ sixth 클래스 모두 칸 설정 grid-column: 1/4; => 첫째 칸부터 가로 3칸까지 grid-row: 1/3; => 첫째 칸부터 세로 2칸까지

• ul 안에 각 이미지 파일 li 정렬 <li class="first"><img src="images_grid/1.jpg" alt=""></li>

🙇🏻‍♂️ 스프린트 회고 (19:00 ~ 21:00)

• 임동준 코치님을 1차 워크샵 이후 두 번째 만나뵙게 되었다. 저번과 마찬가지로 스프레드 시트 내용에 답하기 위해 회고그룹 19번 팀원분들이랑 다시 조우하게 됐는데, 어색했던 첫 만남보다 더 친해지기도 했고, 대화도 많이 나누면서 회고 과정을 거쳤다.

• 🎈1순위 : 학습 및 복습 과정을 통해 정리된 내용, 회고 과정을 벨로그에 포스팅 하기

• 🎈2순위 : 깃허브 1일 1커밋!🍀

• 🎈3순위 : HTML/CSS 서적 공부

• 회고 결과 => 임동준 코치님 주도 하에 스프린트 회고하는 것 이외에 매주 주말에 모여서 각자 학습한 것에 대한 회고 과정과 따로 프로젝트를 선정해서 코드리뷰를 하는 것으로 방향을 잡았다.

• 평일 9 to 6 수업을 듣고 있는데, 주말에 조금은 나만의 휴식을 취할 수 있도록 하고, 평일에 학습 효과를 올리기 위해서 적절한 수면 및 생활패턴을 유지, 다음 스프린트 회고까지 잘 준수해보자..! 🤙🏻

Flex

• 콘텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합

• 처음 뵙게 된 한재현 강사님의 강의를 들었다. 이호준 강사님과 같이 정말 잘 가르쳐주셨고, 수강생분들이 하신 질의응답을 너무 잘 받아주셨다. 무엇보다 수업이 유쾌하고, 리액션이 활발하셔서 졸음이 오지 않는다는...! 👦🏻

[Position 보충]

• Absolute는 본래 위치에 계속 있음
• sticky는 나온지 얼마 안되 '-webkit-'과 같은 브라우저 지원을 위한 벤더 프리픽스가 필요함

[Flex]

• display : flex;로 선언

• 부모는 container, 자식은 item

• 자신의 직계자식까지만 영향

• 축 방향 : [가로] *row, row-reverse * [세로] *column, column-reverse *

• justify-content로 배열 위치, 아이템 간격 조정

• justify는 메인축 방향, align은 수직 방향

• <br> 태그는 스크린 리더가 읽다가 끊어버리므로 줄바꿈 이용 자제

• wrap을 사용하여 줄바꿈

• order 값은 순서 값이 아니라 우선순위 (- 음수 값은 값이 낮아질수록 우선순위가 앞섬)

• blue, green, yellow를 flex 설정

• background: black;, justify-content: space-between; 로 정렬

• 위 이미지는 오른쪽 사이드가 세로 역방향이기 때문에 right_side를 flex-direction: column-reverse 설정

• 메인축의 end 위치, 수직축의 중앙정렬이 필요

• justify-content: flex-end와 align-items: center 필요

• 개구리를 해당 위치에 보내기 위해서 다음과 같은 코드 구성

• display: flex; flex-direction: row-reverse; align-items: end; justify-content: center;

• flex에 대한 개념과 실습을 'flexbox froggy' 사이트를 통해 잘 이해하고, 익숙해지는데 많은 도움을 받았다..! 확실히 가시화된 화면을 통해 학습하는 효과는 제일인 것 같다👍🏻

제 1회 자신만의 캐릭터 그리기 경진대회

강사님께서 '나만의 캐릭터 만들기 경진대회'를 개최하셨다. 수업에서 배웠던 CSS 이론 지식을 총동원해서 어쨋든 결과물을 만들어내야 하는건데 난 학습 진도가 느려서 이제와서 완성해보았다...

디자인쪽에 소질이 없는 난.. 곰을 그리고 싶었는데, 그냥 라이언이 되버린 느낌이랄까...? 😥

캐릭터명은 '샤이베어🐻' 인데, 막상 결과물을 보니까 정말 이름대로 부끄러워진다... 앞으로 더 디자인 감각과 실력을 올려야지..

🎈미션 : 기존에 없는 나만의 캐릭터를 CSS로 구현해서 만들기

📝과제 : https://bighuni.github.io/front-end-school/Assignment/211104_Character/

[회고]

• 먼저, html 구성에서 전체를 포괄하는 클래스명은 shybear

• 하부 클래스로 face, ear, eye, nose, flush, mouth

• content로 <h1> 와 <p>로 내용을 기입

• body의 백그라운드 색으로 캐릭터를 돋보이고, 조금 귀엽게 보이고 싶어서 틸그린(#008080) 느낌의 색상을 고름

• shybear 클래스만 position을 relative로 두고, 나머지는 모두 absolute

• top, left, width, height의 값을 수시로 변경 및 조절하면서 감각을 어느 정도 익힘

• 처음에는 선, 도형이 겹쳐지는걸 어떻게 조절할지 몰랐는데, z-index로 우선순위를 둬서 바꾸면 된다는 것을 알게됨

• border-radius 값을 조절하면서 원하는 모양의 원으로 깎아내리는데 시간을 많이 소비함

• transform: rotate(10deg); 으로 눈썹의 기울기 조정

• text-align: center; 로 텍스트 중앙 정렬

• font-family: "IM_Hyemin-Bold";로 h1태그와 p태그 내용 폰트 설정

• 마지막은 hover로 포인팅 기울기 장치 설정

*다른 미래님들 만드신 작품들 보니까 음영도 넣으시고, 3D 구현까지 하셨다.. 난 아직 갈 길이 멀지만 조급해 하지말고, 꾸준히 나만의 학습 속도와 리듬으로 진득하게 나아가기...! 💪🏻 *

🔎 CSS

• 폭포수로 떨어진다는 의미의 'Cascade'와 웹 페이지 스타일을 정리한 'Style Sheets' = CSS에서 스타일이 적용될 때, 우선순위를 갖고 적용

박스모델

• width와 height : 가로와 세로 길이
• margin과 padding : 여백의 크기
• border : 테두리

[padding과 margin, border]

• padding : 본문 내용과 border 사이의 여백
• border : 선(굵기, 스타일)
• margin : border과 바깥과의 여백

• selector{ margin: 10px, 15px, 20px, 25px; } 12시, 3시, 6시, 9시 방향 적용

• selector{ margin: 10px, 20px, 25px; } 10px top, 20px 좌우로, 25px bottom으로 적용

• margin 값이 -(음수)이면, 다른 구역 침범

Overflow

• 버튼 안에 이미지를 넣을 때, 이미지가 버튼 크기보다 크다면 overflow:hidden 속성 추가

• button { overflow:hidden; width:100px; height:30px; {

• 버튼의 크기만큼 이미지를 잘라버림

• visible : Overflow 기본값, 콘텐츠 자르지 않음

• hidden : 콘텐츠 요소를 크기만큼 잘라버림, 스크롤바 제공 ❌

• scroll : 콘텐츠 요소를 크기만큼 잘라버림, 잘려진 부분 스크롤바 제공 ⭕

Font

• font-family : 글꼴 변경 가능

• font-size : 글꼴 크기 가능

• font-weight : 글꼴 굵기 가능

Opacity

• *요소 투명도 지정 *

• 0.0 ~ 1.0 사이의 숫자 지정, 만약 값이 0.5라면 투명도는 50%

Box

• box-sizing : 박스의 크기 기준 정함

• display : 박스의 성질 지정, 요소 어떻게 보여질 지

• inline : 줄바꿈 ❌, width와 height, margin-top, margin-bottom 값을 지정

• block : 항상 줄바꿈 ⭕, width, height, margin, padding 등 모든 값을 지정

• inline-block : 'inline' 처럼 한 줄에 여러 요소가 존재할수 있음, width, height, margin, padding 등 모든 값을 지정할 수 있음. inline, block 속성의 특징이 함께 존재

• contents : 선택한 요소의 내용 앞이나 뒤에 콘텐츠를 붙임

• flex : 레이아웃을 다룰 때 하나의 행 또는 열을 다룸 (1차원 레이아웃)

• grid : 2차원 레이아웃을 설정하는데 사용

Text

• line-height : 글자 높이 지정

• letter-spacing : 글자 사이 간격 조절

• text-align : 텍스트 정렬

• left : (기본값) 왼쪽 정렬 right, center : 오른쪽, 가운데 정렬 justify : 양쪽 정렬

• 1번 글은 text_initial, 2번 글은 text_justify로 양쪽 여백의 크기를 맞추기 위해 기존 정렬과 다른 양쪽 정렬

• 가로, 세로 정렬은 padding, margin 속성을 추가하여 사용

• text-indent : 텍스트 시작 전 빈공간 설정(들여쓰기 공간)

• text-decoration : 텍스트에 붙는 라인 꾸며주기(스타일 용도보단 <a>태그 기본 스타일 제거)

Position 🌟

웹 페이지에서 html 태그, id, class 박스 등의 위치 지정하는 속성

• 페이지 레이아웃 결정

• [static] : (기본값), html 쓴 태그 순으로 위치 지정 <굳이 기입❌, 부모 객체 position 속성값과 다를때 사용>

• [relative] : 자신이 있어야 하는 위치 기억

• position: relative; 주고 left: 50px; 입력하면 => **본인의 static 자리에서 왼쪽으로 50px 위치

• *

• [absolute] : 'ma way !' 기준점이 html, 기본적으로 왼쪽 상단을 본래 위치라고 생각하지만, (relative, absolute, fixed 등) *부모 요소가 있다면 가장 가까운 부모 박스 내 기준을 잡음 *

• [fixed] : 스크롤 올리거나 내릴 때, 특정 박스 고정

• [sticky] : 부모의 스크롤 박스 안에서 고정

• [z-index] => 숫자가 높을수록 우선순위 👆🏻

• z-index: 0; = 자신의 위치

Float

• 그림 따라 혹은 콘텐츠에 따라 흐르는 텍스트 레이아웃을 웹에서 구현하기 위함

• 블록은 가로 전체 공간차지, float은 해당 공간만큼만 차지

• [문제점] : 자식이 모두 float 속성일 때, 부모 요소가 못 알아봄

• [해결법]

1. 부모 요소에 overflow 속성 추가 2. 부모 높이값 직접 지정 3. 형제 요소에 clear 속성 사용 4. ::ater 가상요소

🔎 CSS

• 폭포수로 떨어진다는 의미의 'Cascade'와 웹 페이지 스타일을 정리한 'Style Sheets' = CSS에서 스타일이 적용될 때, 우선순위를 갖고 적용

• 지금까지 CSS3를 개발중이라고 하는데, 그리드 레이아웃 같은 경우 레벨1에도 도달하지 못했기 때문에 정확히 우리가 배우는 것을 CSS3라고 말할 수는 없다고 한다.

• 얼마 전, 고경희 저자님의 Do it! HTML/CSS 관련 교재를 사려고 찾아봤었다. 19년 말 개정판에는 책 제목이 'HTML5+CSS3 웹 표준의 정석' 이었는데, 올해 개정판에는 'HTML+CSS+자바스크립트'로 달라진 것을 알 수 있었는데, 이러한 점을 반영한 것으로 보인다.

  
  

• h1 { color:red; }

• h1 = 선택자(Selector) color = 프로퍼티(Property) red = 값(Value) color:red; = 선언(Declaration)

• <h1 id="one">hellow world</h1>

• body에 있는 <h1> 에 id를 입력하고, 선택자에 #one을 입력하면 해당 id의 CSS 적용 (단, id는 중첩해서 사용 불가 ❌)

• 각 브라우저에 적용되어 있는 기본 스타일을 초기화시키고, 원하는 디자인 쉽게 적용하기 위해서 reset.css 파일 적용

• 벤더 프리픽스 -webkit-은 크롬, 안드로이드, 사파리 등 웹키트 기반 브라우저 ex) -webkit-transition: all .5s;

선택자

• *{ }(범용 선택자) : 문서에 있는 모든 요소 스타일 적용

• h1, h2{ }(타입 선택자) : 동시에 여러 개 지정 가능

• .upper{ }, h1.upper(class 선택자) : .점 다음에 나오는 이름을 갖는 요소 스타일 적용

• #blue{ }(id 선택자) : # 다음에 나오는 이름 요소 스타일 적용

• h1[title^="good"]{ } : title 이란 속성에 'good'으로 시작하는 값 스타일 적용

• h1[title$="good"]{ } : title 이란 속성에 'good'으로 끝나는 값 스타일 적용

• #red { } : id="red" 인 것 찾아 스타일 적용

• .red { } : class="red" 인 것 찾아 스타일 적용

Class

• id속성과 마찬가지로 해당 요소 식별 시 사용

• id속성과 달리 한 페이지에 여러개 존재 가능

Id

• 한 페이지에 있는 해당 요소를 유일하게 식별

• 반드시 단 한개만 존재

• id 이름은 알파벳 또는 '_'로 시작

• id가 한 페이지에서 여러 개 존재한다면, 가장 최상단 id가 선택 적용

• 태그 이름, 클래스 이름, ID 이름 외에도 속성으로 접근할 수 있는 속성 선택자

• a:hover { }, p:nth-child(1)처럼 존재하지 않는 클래스지만, 클래스를 놓은것처럼 작동한다고 하여 가상클래스 선택자

• 가상 요소 선택자는 콜론이 2개, 마크업 없는 요소 삽입(after, before 등)

• ex) p::after { content: 'cm' }

  
  

• id > class > tag 순으로 style 우선순위 적용

• <style>
    h1 {color: black}
    .yellowgreen {color: yellowgreen}
    #four {color: skyblue}
  </style>
  </head>
  <body>
    <h1>h1의 첫번째</h1>
    <h1 id='two' class='yellowgreen'>h1의 두번째</h1>
    <h1 id='three' class='yellowgreen'>h1의 세번째</h1>
    <h1 id='four' class='yellowgreen'>h1의 네번째</h1>
  </body>
  

• 두번째, 세번째, 네번째는 h1 class에 있는 id 속성으로 'yellowgreen'이 적용되었는데, 우선순위에 따라 네번째 id가 더 우선순위가 높아 'skyblue'가 적용된 것을 확인할 수 있다.

• !important 는 절대적인 우선순위! 하지만, 우선순위 계산을 어렵게 만들기 때문에 인라인 스타일을 덮어 써야하는 불가피한 상황 제하고는 사용 자제 🙇🏻‍♂️

  
  

[우선순위 가중치]

• inline-style : 1000점 가중치

• id* : 100점 가중치

• class* : 10점 가중치

• 요소, 가상요소 선택자* : 1점 가중치

• section .sector #one {
    color: red; 
  }
  => 1점 + 10점 + 100점 = 111점
  

단위

Absolute(고정) : cm, mm, px 등

• px : 화소
• pt* : 포인트
• in* : 인치
• cm, mm* : 센티미터, 밀리미터

• px는 고정된 크기 지원하기 때문에 글자크기의 변화 용이, 기본 크기 = 16px

Relative(가변) : em, rem, vw, vh 등

• em : 배수 단위(부모 글자크기에 따라 달라짐)
• rem *: root em(최상위 요소의 크기에 따라 달라짐)
• vw, vh* : 화면비 백분율 단위

• 애니메이션 => px 주로 사용
• 반응형 웹 => 가변 단위 주로 사용(수정 용이)

시맨틱 HTML 구조

• 맨 처음 HTML 마크업을 할 때, 구조와 로직을 어떻게 구성하고, 짜야할지 막막했었는데 제코배 멘토분들이 직접 디자인해서 우리에게 좀 더 쉽게 이해시키려고 만드셨다니 감동이다...😭

• 앞으로 위 그림을 참고하면서 시맨팁 웹 구성을 위해 적절한 태그와 로직으로 코딩을 짤 수 있도록 노력해야겠다..!

🔎 DOM

• 문서 객체 모델(The Document Object Model, DOM)은 HTML, XML 문서의 프로그래밍 인터페이스

[Shadow DOM]

📌 Shadow DOM은 DOM의 구조를 가지고 있으나, 외부에 노출되지 않은 DOM을 말하며 DOM의 구조를 캡슐화할 때 사용

  <body> 
      <form action="./010.html" method="get">
          <label for="one">이름 : </label>
          <input type="text" name="id" id="one"><br>
          <label for="two">패스워드 : </label>
          <input type="password" name="pw" id="two"><br>
          <button type="submit">로그인</button>
      </form>
  </body>

 예시 -> <img src="img/a.jpg" alt="문구">