이 문서에서는 웹 페이지에 배치된 요소의 배치를 제어하는 데 사용할 수 있는 유틸리티를 보여줍니다.
배치된 요소의 배치를 제어하는 데 사용되는 순풍 유틸리티?
가로 또는 세로 축 모두에 배치된 요소의 배치를 특별히 처리하는 Tailwind CSS 유틸리티는 “ 탑 | 오른쪽 | 바닥 | 왼쪽 '. 다른 유틸리티와 마찬가지로 위치 지정 요소를 다양한 위치에 설정할 수 있는 다양한 클래스도 제공하며 이러한 클래스 중 일부는 다음과 같습니다.
- 삽입-{placementValue}
- 시작-{placementValue}
- 상단-{placementValue}
- 종료-{placementValue}
- 하단-{placementValue}
- 왼쪽-{placementValue}
- 권리-{placementValue}
이제 더 나은 이해를 위해 이러한 클래스 중 일부를 사용하는 실용적인 예를 살펴보겠습니다.
예: Tailwind CSS 유틸리티를 사용하여 배치된 요소 배치
이 예에서 위에서 설명한 유틸리티는 아래와 같이 웹 페이지의 다른 위치에 배치된 요소를 배치하는 데 사용됩니다.
< 몸 수업 = '그리드 그리드-cols-3' >
< div 수업 = '상대 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch round' >
< div 수업 = 'absolute left-0 top-0 h-16 w-16 bg-blue-400 round p-4' > 항목 1 < / div >
< / div >
< div 수업 = '상대 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch round' >
< div 수업 = 'absolute inset-x-0 top-0 h-16 bg-blue-400 round p-4' > 항목 2 < / div >
< / div >
< div 수업 = '상대 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch round' >
< div 수업 = 'absolute inset-0 bg-blue-400 round p-4' > 항목 3 < / div >
< / div >
< div 수업 = '상대 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch round' >
< div 수업 = '절대 삽입-y-0 right-0 w-16 bg-blue-400 둥근 p-4' > 항목 4 < / div >
< / div >
< div 수업 = '상대 h-32 w-32 bg-orange-200 p-4 m-4 text-center justify-stretch round' >
< div 수업 = '절대 하단-0 오른쪽-0 h-16 w-16 bg-blue-400 둥근 p-4' > 항목 5 < / div >
< / div >
< / 몸 >
위 코드에 대한 설명:
- 먼저 5개의 부모 ' div ” 요소를 사용하고 다양한 Tailwind CSS 클래스를 적용하여 상대 위치, 높이, 너비, 배경, 패딩, 여백 등을 설정합니다.
- 다음으로 중첩된 ' div ” 각 부모 'div' 내부의 요소. 이 중첩된 'div' 요소에 대해 배치가 완료됩니다.
- 그런 다음 “tailwind CSS 클래스를 적용합니다. 순수한 ”, “ 시간 ”, “ ~ 안에 ”, “ bg ',' 피 ', 그리고 ' 둥근 '는 중첩된 ' div ' 요소.
- 그런 다음 중첩된 div 1부터 5까지 '의 새 클래스를 할당합니다. 왼쪽-0 상단-0 ”, “ 삽입-x-0 ”, “ 삽입-0 ”, “ 삽입-y-0 오른쪽-0 ', 그리고 ' 하단-0 오른쪽-0 ” 각각.
- 이러한 클래스는 왼쪽 위 모서리에 중첩된 div 요소의 위치를 설정하고, 위쪽 위치를 덮고, 전체 상위 공간을 덮고, 오른쪽을 덮고, 왼쪽 아래 위치를 각각 덮습니다.
실행 후 div 요소의 미리보기는 다음과 같습니다.
출력은 배치된 요소가 원하는 위치에 배치되었음을 보여줍니다.
결론
“ 탑 | 오른쪽 | 바닥 | 왼쪽 ” Tailwind 유틸리티는 웹 페이지에서 요소의 배치를 제어하는 데 사용됩니다. 여러 클래스를 사용하여 각 위치를 대상으로 지정한 다음 요구 사항에 따라 해당 위치에서 선택한 요소를 이동합니다. 이러한 클래스는 주로 왼쪽, 오른쪽, 아래쪽 및 위쪽에 배치된 요소를 배치합니다. 그들은 전체 영역을 커버하고 왼쪽 또는 상단과 같은 특정 방향을 커버하는 데 도움이 될 수 있습니다. 이 문서에서는 배치된 요소의 배치를 제어하는 데 사용할 수 있는 유틸리티를 성공적으로 설명했습니다.