[Html]새로 안 css + 단위

- 단위
절대단위 : in, cm, mm, pt, pc가 있으며 출력장치(모니터)의 물리적 속성을 아는 경우 효율적
상대단위 : em, ex, px, %가 있으며 기종간, 플랫폼 간의 호환성을 유지하는데 유리
fr : fraction, 분수 유연함
em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함
ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함
px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐
%  : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐
pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위

.item : nth-child { ... }
가상 선택자

order: (number);
순서 바꾸기

flex-grow: (number);
빈 공간 채우는 비율

display: grid;
grid-template-columns: 40% 60%;
	4:6으로 그리드 생성(gap 사용 시 화면 바깥으로 밀려남)
grid-template-columns: 4fr 6fr;
grid-gap: 1rem;
	4:6으로 갭 포함하여 그리드 생성(안밀려남)
grid-template-columns: repeat(3, 1fr);
	1:1:1 비율 3열
grid-auto-rows: 200px;
	행 하나의 길이 200px 고정
grid-auto-rows: minmax(200px, auto);
.item:nth-child(1)
{
grid-column: 3 (3열로 이동)
grid-column: 1/4; (1열부터 3열까지 차지하도록 설정)
}

source: 1분코딩, https://www.youtube.com/watch?v=eprXmC_j9A4

이걸 이제야 알다니