- 노션 프로젝트 팀원들 리뷰
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- 노션 프로젝트 팀원 코드 리뷰
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- ToDoLIst 과제 리뷰 반영
- 고양이 사진첩 과제 수행 중
- 로토님 특강
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- 고양이 사진첩 과제 수행 중
오늘도 수고했어.
- core time 참석
- 데일리 스크럼
- js 강의 수강
- todo list 리뷰 반영
- 고양이 사진첩 과제 완료
To do list Drag&Drop
- window.requestIdleCallback()
- 이 개념을 소개한 이유는 드래그 앤 드롭 할 때마다 API 호출이 되면 좋지 않으니까 API 호출 이벤트를 특정 시점에 동시에 수행하기 위한 방법을 찾다가….
- UI가 바쁘지 않을 때 이 함수를 실행해라!(특정 브라우저에는 적용 x)
- Web Workers(웹 어커)
- js는 싱글스레드로 동작하기 때문에 API 호출 이벤트가 밀릴 수도 있음
- 메인 스레드 외부에서 동작하므로 위에 싱글스레드로 인한 이벤트가 밀리는 문제 등을 방지할 수 있음
바닐라 JS로만 프로젝트 진행 시 좋은점
다른 라이브러리나 프레임워크가 어떻게 동작할 것이다
와 같은 이해력을 키우는데 도움- 화면을 독립적으로 동작하는 컴포넌트에 대해 생각하고 만드는 것에 대한 훈련
- 화면을 선언적으로 생각하여 확장가능하고 버그를 덜 만드는 UI 프로그래밍에 대해 익힘
상태, 상태 변화에 의한 데이터 흐름 중심
으로 UI를 표현하고 이를 통해 화면의 변화를 생각하고 추적- 명령형에 비해 선언적 프로그래밍이 유지보수도 쉬움 ⇒ 제이쿼리 같은 경우 이벤트 발생 후 UI가 수정될 때 이벤트가 여러군데에서 일어나므로 나중에 유지보수가 어려움
CSS - Float
-
border ⇒ 따로 border color를 지정하지 않으면 기존 color를 참조
-
float 사용 시 항상 clear하는 것이 필수
.container .item:nth-child(4) { clear:left; } .float { float: left; }
-
element::after
- element의 내부 요소의 마지막에 가상의 요소를 만들어 css 속성을 추가할 수 있는 선택자
- content 필수
-
float 사용시 형제 element 중에 float을 사용하지 않는 element가 있으면 문제 발생 ⇒ 다른 페이지 영역을 사용하기 때문에 겹침
-
inline
- width와 height를 가질 수 없음
-
inline elemnet도 float을 사용하면 display가 block으로 수정 됨
CSS - Position
- fixed
- body 말고도 transform, perspective(3차원 원근 효과)속성이 적용된 조상 element를 기준으로 삼기도 한다.
- z-index
- postion의 값의 static을 제외한 relative, absolute, fixed, sticky 값이 있어야 함
- display의 flex 및 grid의 자식 element(flex item 및 grid item)에서 사용 가능
- 쌓임 맥락 ⇒ x,y,z 축에서 z축을 기준으로 element가 더 위에 있냐 아래에 있냐를 개념화 한 것
- inline을 block으로
- position의 absoulte와 fixed 값을 사용하게 되면 display block으로 수정
CSS - Flex Containers 1
- inline-flex
flex
는 수직으로 정렬(자기자신은block
)되려하고 가로 너비가 최대한 넓어지려고 함inline-flex
는 수평으로 정렬(자기자신은inline
)되려하고 가로 너비가 최대한 좁아지려고 함
- flex-shrink
- 기본값은 1
- item의 감소 너비 비율을 설정
CSS - Flex Containers 2
- align-items
- baseline 값 ⇒ item 안의 문자를 기준으로 정렬
- align-content
- align-items가 1줄에 대한 정렬이라면 align-content는 2줄 이상의 모든 item의 정렬을 가능하게 함
CSS - Flex Items
- flex-grow
- 증가되는 너비의 비율
- flex-container에서 어느정도 비율을 차지할지를 설정
- flex-item의 width 값을 제외한 너비의 비율
- flex-shirink
- 감소 너비 비율
- 0으로 설정하면 줄어드려하지 않음
- flex-basis
- 요소의 기본 너비를 설정
- width 값이 있어도 무시
- flex
- flex: grow shrink basis;
- flex 값을 사용할 때 basis 값을 생략하면 초기값이
auto
가 들어가는 것이 아니라0
이 들어가기 때문에 grow 관련해서 문제가 발생할 수 있음
- order
- align-self
- item을 개별단위로 관리할 수 있음
- auto를 하게되면 flex-container에서 상속받음
CSS - Grid Containers 1
- grid-template-rows
- 행의 개수 및 높이 지정
- repeat에서 1fr를 사용하려면 cotainer 또는 item에 높이값이 지정되 있어야 함, 비율만 정하는 것이므로 눈에 잘 보이지가 않음
- grid-template-columns
- 열의 개수 및 너비 지정
- fr ⇒ fraction(공간 비율)
- repeat(열의 개수, 공간 비율), grid-template-rows에서도 사용 가능
- grid-auto-rows, grid-auto-columns
- 위에 두 속성이
명시적
으로 사용자가 범위를 지정해주었다면 그 외의 범위를 처리하기 위해 사용하는암시적
속성
- 위에 두 속성이
- grid-auto-flow: dense
- 빈 공간이 생겼을 때 자리를 매우기 위해 사용하는 속성
- row가 기본값, column으로 하면 열축을 기준으로 쌓여감
row
,dense
,col
,col dense
CSS - Grid Containers 2
- justify-content(행 축, 수평), align-content(열 축, 수직)
grid container
영역의 정렬을 위한 속성- flex와 비슷
- 속성 값의 이름이 조금 다름(기본 값은 normal, start, end, center, space-between, space-around, space-evenly)
- cell
- item 한개의 영역을 가르키는 용어
- justify-items, align-items
cell 영역
의 정렬을 위한 속성- space 관련 값은 없음
CSS - Grid Containers 3
- grid-area
- 영역 이름 설정
- .container header {grid-area: header;}
- grid-template-areas
grid-area
를 통해 설정한 이름이 있는 영역을 통해 배치를 하는 속성.
대신none
사용 가능
- grid-gap
- 영역간의 간격 수정.
- grid-gap: 10px 40px; ⇒ 행간 간격 10px, 열간 간격 40px
- grid-row-gap, grid-column-gap으로 개별 설정 가능
- 위에 속성에서 grid는 제거해도 됨(gap, row-gap, column-gap)
CSS - Grid Items 1
- line
- 개발자 도구를 통해 line을 확인할 수 있음
- grid-row-start: n
- 행에서 n번 line부터 시작하겠다는 의미
- grid-row-end: n과 함께 사용, n까지 영역을 차지
- grid-column-start, grid-column-end도 동일
span 2
⇒ 두개의 영역을 확장 해라단축 속성
⇒ grid-row: 시작 숫자 / 끝 숫자, grid-column: 시작 숫자 / 끝 숫자
CSS - Grid Items 2
- justify-self, align-self
- 셀안의 item 외부에 빈 공간이 있어야 함 ⇒ 정렬은 빈 공간이 있어야 하므로 당연한 이야기
- cell의 개별 정렬이 가능하게 함
- normal 값을 사용하고 width, height가 auto이면 최대한 늘어나게 함
CSS - Grid Functions, Units (1)
- minmax
- grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr); ⇒ 첫 번째 열의 item의 최소 너비는 100px, 최대 너비는 1fr, 두번째 열도 마찬가지
명시적, 암시적
영역 둘 다 사용가능- auto 값을 설정하면 그 영역의 고유 height 및 width 값으로 설정 됨
- fit-content
- fit-content(300px) ⇒ text 크기에 맞추어 width나 height를 300px 까지만 넓힐 것임
CSS - Grid Functions, Units (2)
- min-content
- grid-template-columns: repeat(4, min-content);
- 최소 너비 기준(
문장에서 가장 긴 단어
)으로 너비를 확장 - 한글은 한글자가 기준(그리드단위? ⇒
위?
가 기준) ⇒word-break: keep-all
을 통해단어 단위
로 기준 변경
- max-content
- item이 가질 수 있는 최대 너비를 기준으로 너비를 확장
- auto-fit
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- 스크린이 커지고 작아질때 마다 브라우저가 유동적으로 개수를 수정
auto-fit
은 지정할 수 있는minmax의
최대 너비,auto-fill
은minmax의
는 최소 너비를 기준으로 개수 정함
오늘도 수고했어.
- js 강의 수강
오늘도 수고했어.