테일윈드
mx-auto - margin x값 모두 auto (가운데 정렬)
img 크기비율 - aspect-[ / ] object-cover w-full
그리드 - grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3
평소에는 1개씩, md사이즈일 때 2개씩, xl일 때 3개씩 정렬함
inset-0 : 4방향 모두 0;
애니메이션 : before:transition before:duration-300
a태그는 inline-block이라 overflow가 안 먹을 수 있기 때문에 display를 block으로 바꿔준다
띄어쓰기 X _로 표기
Grid - 여러 요소를 규칙적으로 놓을 때 필요
- 행(row): 가료방향 줄
- 열(column): 세로방향 줄
- Grid Container : display:grid를 준 부모 박스
- Grid item : 컨테이너 안에 있는 자식 박스들
display: grid;
- 블록 요소처럼 한 줄을 차지하는 그리드 컨테이너
display: inline-grid;
- 내용 크기만큼만 차지하는 인라인 그리드
grid-template-columns: 100px 100px 100px;
grid-template-columns: 1fr 1fr 1fr;
Flex vs Grid
- grid: 2차원 (가로x세로)
- flex: 1차원 (한 방향 위주)
css 까먹은 거
overflow: hidden;
ㄴ 넘치는 컨텐츠 가리기
