TypeScript

Record Type

• 인덱스 시그니처(Index Signature): 대괄호로 객체 접근 방법

type humanInfo = {
 	[name: string]: number 
}

• Record Type으로 작성

type humanInfo = Record<string, number>

• 인덱스 시그니처가 name이라는 key의 의도를 명확히 알려줘 구문 관점에서 더 좋다.

• 인덱스 시그니처는 key로 문자열을 사용하지 못하지만 Record Type은 가능하다.

type names = '사람' | '고기' | '식물'

type humanInfo = Record<names, number>

CSS

Flex

• flex 속성

// flex : flex-grow flex-shrink flex-basis
#main div { 
  -webkit-flex: 1; /* Safari 6.1+ */ 
  -ms-flex: 1; /* IE 10 */ 
  flex: 1; 
}

• flex-grow: flexible item들이 차지할 너비들에 대한 증가형 숫자를 지정
• flex-shrink: flexible item들이 차지할 너비들에 대한 감소형 숫자를 지정
• flex-basis: item의 길이를 지정
• auto: 1 1 auto와 같다.
• initial: 0 1 auto와 같다.
• none: 0 0 auto와 같다.
• inherit: 부모 요소로부터 값을 상속 받는다.

Grid

fr

• 그리드 컨테이너 내의 공간 비율을 분수(fraction)

.grid {
    display: grid;
    grid-template-columns: auto 100px 1fr 2fr;
}

repeat() 함수

• 반복되는 값을 설정

grid-template-columns: repeat(3, 1fr 2fr);  /* 1fr 2fr 1fr 2fr 1fr 2fr */

minmax() 함수

• 최솟값, 최댓값 범위 내에서 값을 유연하게 처리

grid-template-rows: repeat(2, minmax(20px, auto));

grid-template-columns & rows

• column (열) 과 rows (행)의 크기를 지정

grid-template-columns: 200px 200px 500px;
// 3개의 열이 200px, 200px, 500px로 나뉜다.

grid-template-rows: repeat(3, 1fr)
// 3개의 행이 1fr, 1fr, 1fr로 나뉜다.

auto-fill

• column의 개수를 미리 지정하지 않고 설정된 너비가 허용하는 한 최대한 셀을 채운다.

// 20%이므로 한 행에 5개의 item이 들어간다.
// 만얄 공간이 남으면 남은자리는 비원둔다.
// |[  ][  ][  ][  ]     |
.container {
	grid-template-columns: repeat(auto-fill, minmax(20%, auto));
}

auto-fit

• auto-fill 예제에서 남은 자리를 item들이 채운다.

grid-column, grid-row

• 행과 열의 범위를 결정한다.

.item:nth-child(1) {
	grid-column: 1 / 3; // 첫번째 요소는 1번 부터 3칸을 차지함.
	grid-row: 1 / 2; // 2칸 차지
}

justify-items, align-items

• justify-items: 아이템들을 가로축 정렬
• align-items: 아이템들을 세로축 정렬

참고
https://studiomeal.com/archives/533
https://developer-talk.tistory.com/296
https://webdir.tistory.com/349 [WEBDIR]