4주 3일차 - 복습

1. 리뷰

1.1 좋았던 점

• 자료구조와 알고리즘 공부계획을 세우기 힘들었는데 이전 페어분께 도움을 받아서 대강의 큰 틀을 잡을 수 있었다.

1.2 아쉬웠던 점

• 낭비한 시간들

1.3 notes

태어났으니까 사는거지, 잘 할려고 하지마, 그냥 하기나 해.

2. 배운 것

• flex의 자식요소에 적용하는 속성들 복습
• 정규표현식 유효성 검증 함수 과제 파일에서 정상작동 시키기
• 딥다이브 8장 제어문 마크다운 정리

3. 내용 정리

DOM web api

• prependChild() , insertafter() 라는 메서드는 존재하지 않는다. !prependChild !insertafter
• 이벤트리스너의 첫번째 인수로 들어갈 이벤트 이름은 window객체의 on~~메서드들에서 on만 빼고 적어주면 된다. 두번째 인수는 콜백함수로 들어갈 미리 선언한 이벤트 핸들러 함수명을 넣거나 익명함수를 선언하면 된다.

css - flex: item에 적용하는 속성들

• flex-basis : 요소가 최소한으로 반드시 가져야 하는 크기. 해당 크기보다 작은 경우 지정값으로 커진다. 해당 크기보다 큰 경우 큰 상태로 유지.
• flex-grow : 요소가 flex-basis 의 기본값에서 커질 수 있는 비율을 지정. 기본값은 0 이고, 이 경우 아무 변화가 없다.(늘어나지 않음) 1 이상의 값을 줄 경우 flex-basis 만큼 요소가 공간을 차지하고 남은 여백을 해당 flex-grow 에 지정한 비율만큼 차지함.
• flex-shrink : flex-basis 에서 얼마나 줄어들 수 있는지의 비율을 지정. 기본값은 1 이며, 줄어들 수 있음을 의미함. 기본값이 1이므로 화면 영역이 컨텐츠보다 작아지면 컨텐츠도 따라서 줄어들며, 0 을 줄 경우 줄어들지 않음. 따라서 여러 요소들 중 고정된 크기를 가져야 되는 요소엔 flex-shrink: 0; 을 주고 유동적으로 크기가 변하는 요소는 별도로 값을 지정하지 않으면 된다.
• flex : flex-grow, flex-shrink, flex-basis 순서로 세가지 속성을 한번에 지정 가능한 단축속성이다. flex-shrink와 flex-basis의 값은 기본값으로 줄 경우 생략 가능하다.
• align-self : 교차축에서 개별 아이템의 정렬 방식을 지정. container(부모 요소)에 지정한 align-items 는 부모 요소 안의 모든 자식 요소에게 교차축 방면에서의 정렬 방식을 지정하지만 align-self 속성의 경우는 개별 아이템 하나의 교차축 방면 정렬 방식을 지정하여, align-items 의 속성값보다 우선된다. 기본값은 align-items 의 속성을 상속받는 auto 이다.
• order : 아이템의 시각적인 순서를 정하는 속성이다. 하지만 실제로 html이 변경되는 것이 아니라 화면에 보여지는 모습만 달라지는 것이기 때문에 스크린리더 등에서는 order로 지정한 속성값이 무시된다. 기본값은 0이고 음수 입력도 가능하며, 더 작은 숫자가 더 높은 우선순위를 가진다. 따라서 기본값인 0보다 -1이 더 우선순위가 높고 -1보다 -2가 더 우선순위가 높다.

4. 할 일

• 솔로과제
• 딥다이브 스터디