테일윈드, display:grid;

·2026년 1월 21일

코딩

목록 보기
32/48

테일윈드

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;
ㄴ 넘치는 컨텐츠 가리기

0개의 댓글