[TIL]2022.09.28

오늘 한 일

스터디 준비하면서 function 다시 공부 O
인공지능 딥러닝 컴c 듣기 O
DOM구조 이해 유튜브 O 
flex와 grid 유튜브 X
DOM구조 이해 - 정리하기 O
flex와 grid -정리하기 O
Flex 연습 게임 - Flexbox Froggy O
리액트 기초 완강 X
알고리즘 손코딩 X
드림코딩 js기초 듣기 X


오늘 느낀 것

알고리즘 빨리 끝나라

for...in 루프는

객체의 모든 열거가능한 속성에 대해 반복합니다.

for ... in은 객체의 모든 iterable한 속성에 대해 반복
(눈에 안 보이는 것들도 객체가 가지고 있으면 다 반복)

for...of 구문은 <컬렉션> 전용.
컬렉션이란?
Array, Set, Map, String

forEach는 배열 핸들링 할 때
[출처]https://blog.naver.com/comalone/222815761611

 

flex – 컨테이너에 적용 – 자식들이 변함

flex – direction : 배치 방향

flex – wrap : 너비에 따라 아래로 떨어짐

justfy-content: 정렬 방법 가로

align-content: 여러줄들 사이의 간격을 지정

align-items: 정렬 방법 flex-start flex-end center baseline stretch

 

-------------------

각각 정렬하는 방법 (자식한테 줌)

 

align-self 아이템 중에 골라서 걔만 바꿔줌

flex-direction과 flex-wrap이 자주 같이 사용되기 때문에, flex-flow가 이를 대신

flex: grow(팽창지수) shrink(수축지수) basis(기본크기)

flex-grow: 여백을 나눠 가짐

flex-shrink: 수축

flex-basis: flex box의 기본크기

flex 비율

order：순서

 

grid – 컨테이너에 적용 – 자식들이 변함

grid-template-columns: 단위로 나눠 줌 fr repeat(3,1fr)

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

grid-template-columns: 200px 1fr 첫 번째는 200으로 고정

grid-auto-rows: 아이템들의 높이가 달라도 박스의 높이는 같아짐

grid-auto-rows : mixmax(200em, auto); 최소한200씩은 가져가고 넘치면 알아서 늘어남

grid-gap : 사이 여백

justfy-items : 박스별로 정렬 양 옆

align-items : 박스별로 정렬 위 아래

 

-------------------

각각 정렬하는 방법 (자식한테 줌)

justfy-self

align-self

컬럼 – 열, 로우 - 행

grid-column: 차지하는 가로 너비 1부터4 = 1/4; 시작점도 지정 가능, 서로 침범도 가능

grid-row: 차지하는 세로 너비 2/4;

 

DOM & EVENT

 

DOM = html 문서를 트리 형식으로 하나의 개체를 노드라 함

element , node차이

element = (html태그)

node 텍스트, 주석 공백 줄바꿈 태그 포함

 

 

이벤트 버블링, 이벤트 위임

 

버블링 – 이벤트가 거슬러 올라가 focus,blur,mouseenter,mouseleave 제외

focusin,focusout,mouseover,mouseout 으로 대체

 

이벤트 위임 각 li에 이벤트를 주는데 만약 li가 100개가 된다면 복잡해짐

부모인 ul에 핸들러로 이벤트를 위임함

 

타겟과 커런트타겟

타겟 – 이벤트를 발생시키는 요소

커런트타겟 – 이벤트 핸들러

 

내일 할 일

오전 알고리즘 손코딩
알고리즘 테스트 
flex와 grid 유튜브 
리액트 기초 완강 
드림코딩 js기초 듣기 
스터디 228p까지