Tailwind의 컨테이너 내에서 교체된 요소를 배치하는 방법은 무엇입니까?

• “ bg-스카이-300 ” 클래스는
  컨테이너의 배경색을 하늘색으로 설정합니다.
• “ 그리드 ” 클래스는 그리드 레이아웃을 활성화합니다.
• “ 그리드 행-3 ” 클래스는 그리드의 행 번호를 3으로 설정합니다.
• “ 그리드 흐름 열 ” 클래스는 열에서 그리드 항목의 흐름을 정의합니다.
• “ m-5 ” 클래스는 컨테이너 주변에 5단위의 여백을 추가합니다.
• “ 스페이스-y-4 ” 클래스는 컨테이너 내의 하위 요소 사이에 4 단위의 수직 간격을 추가합니다.
• “ p-4 ” 클래스는 컨테이너 내부의 콘텐츠에 4단위의 패딩을 추가합니다.
• “ 사이에 정당화 ” 클래스는 컨테이너 내의 하위 요소를 정렬하고 균등하게 분배합니다.

요소에서:

• “ 개체 없음 ” 클래스는 요소에 어떤 위치도 적용하지 않고 컨테이너의 기본 위치에 요소를 표시합니다.
• “ 객체 왼쪽 상단 ” 클래스는 요소를 컨테이너의 왼쪽 상단 모서리에 배치합니다.
• “ 개체 왼쪽 ” 클래스는 요소를 컨테이너의 왼쪽 가장자리에 정렬하고 수직 중앙에 유지합니다.
• “ 객체 왼쪽 하단 ” 클래스는 요소를 컨테이너의 왼쪽 하단 모서리에 배치합니다.
• “ 객체 상단 ” 클래스는 컨테이너의 위쪽 가장자리에 요소를 배치하고 가로 중앙에 설정합니다.
• “ 물체 중심 ” 클래스는 요소를 컨테이너 중앙에 배치하고 수평 및 수직 중앙에 유지합니다.
• “ 물체 바닥 ” 클래스는 컨테이너의 아래쪽 가장자리에 요소를 배치하고 가로 중앙에 유지합니다.
• “ 개체 오른쪽 상단 ” 클래스는 요소를 컨테이너의 오른쪽 상단 모서리에 배치합니다.
• “ 객체 권리 ” 클래스는 요소를 컨테이너의 오른쪽 가장자리에 배치하고 수직 중앙에 유지합니다.
• “ 객체 오른쪽 하단 ” 클래스는 해당 컨테이너의 오른쪽 하단 모서리에 요소를 배치합니다.

산출

위의 웹 페이지에서 교체된 모든 요소의 콘텐츠가 성공적으로 배치되었음을 확인할 수 있습니다.

결론

Tailwind의 컨테이너 내에 교체된 요소를 배치하려면 ' 개체-<위치/측면> ” 유틸리티는 이미지와 같은 원하는 요소와 함께 사용됩니다. 사용자는 교체된 요소의 위치를 ​​지정하기 위해 'object-' 유틸리티에서 특정 위치 또는 측면, 즉 왼쪽, 오른쪽 또는 중앙을 정의해야 합니다. 이 문서에서는 Tailwind CSS의 컨테이너 내에서 교체된 요소를 배치하는 방법을 설명했습니다.