[TIL] 241017_CSS: Tailwind 익히기

w-값

• w-full: 너비를 100%로 설정하는 역할.
  • 부모 요소의 전체 너비를 차지하게 만들어서, 화면의 가로폭을 꽉 채우는 형태로 배치.
• w-1 = 4px

h-값

• h-screen: 높이를 화면 전체 높이만큼 설정.
  • 화면 크기(브라우저 창)의 100% 높이를 의미해서, 해당 컨테이너가 화면 전체를 덮도록 만드는데 유용함.
• h-1 = 4px

flex

• flex 박스 레이아웃을 활성화시키는 클래스.
• 요소들을 수평 또는 수직으로 정렬할 수 있게 만듬. 자식 요소들이 flex 컨테이너 안에서 정렬됨.

flex-col/row

• flex 컨테이너 안에서 자식 요소들을 열/행 방향으로 정렬하는 클래스.

items-start/center/end

• flex 컨테이너 안의 자식 요소들을 수직축을 기준으로 시작/중앙/끝에 배치.

justify-center

• flex 컨테이너 안의 자식 요소들을 수평축을 기준으로 중앙에 배치.

mt/mb/ml/mr-값

• margin-top/bottom/left/right
• Ex> mt-4 = 16px, 위쪽에 16px의 여백을 추가.

p/pt/pb/pl/pr/px/py-값

• padding-top/bottom/left/right/x축/y축
• Ex> p-4 = 16px, 모든 방향에 16px 패딩을 추가.

leading-값

• 텍스트의 줄 간격(line-height)을 조정할 때 사용하는 클래스.
• 줄과 줄 사이의 간격을 제어하는 역할.

주요 leading 클래스

• leading-none: 줄 간격을 텍스트 크기와 동일하게 설정.
• leading-tight: 기본 줄 간격보다 약간 좁게 설정.
• leading-snug: 기본 줄 간격보다 조금 넓게 설정.
• leading-normal: 기본 줄 간격.
• leading-relaxed: 기본 줄 간격보다 약간 더 넓게 설정.
• leading-loose: 기본 줄 간격보다 많이 넓게 설정.

숫자 leading 클래스

• leading-3: 줄 간격을 0.75 (텍스트 크기의 75%)로 설정.
• leading-4: 줄 간격을 1 (텍스트 크기와 동일)로 설정.
• leading-5: 줄 간격을 1.25배로 설정.
• leading-6: 줄 간격을 1.5배로 설정.
• leading-7: 줄 간격을 1.75배로 설정.
• leading-8: 줄 간격을 2배로 설정.