이 블로그에서는 Tailwind의 여러 요소 사이에 동일한 공간을 할당하는 아이디어를 제공합니다.
Tailwind에서 여러 요소 사이에 동일한 공간을 할당하는 방법은 무엇입니까?
사용자는 '를 사용하여 요소 사이에 동일한 간격을 할당할 수 있습니다. 공간-{x/y}-{크기} ” 유틸리티 클래스. 사용자는 정수 값을 지정하여 x축이나 y축에 공간을 추가할 수 있습니다. 간격 유틸리티는 웹 페이지를 매력적으로 만들기 때문에 필요합니다. 웹페이지의 요소 간 간격이 적절하지 않으면 사용자의 관심을 끌 수 없습니다.
그리드 요소 사이에 동일한 공간을 할당하는 코드 예제를 살펴보겠습니다.
방법 1: X축에 공간을 할당합니다.
x축에 동일한 간격을 지정하면 요소의 오른쪽과 왼쪽에 동일한 간격이 지정됩니다. x축에 공간을 할당하려면 다음 구문을 사용하십시오.
공간 - 엑스 - { 크기 }
크기는 임의의 정수 값일 수 있습니다.
x축에 동일한 공간을 할당하려면 아래 코드를 고려하세요.
< 몸 >< div 수업 = 'mx-4 그리드 그리드-cols-4 space-x-4' >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 1 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 2 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 삼 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 4 div >
div >
몸 >
이 코드에서는:
- “ mx-4 ” x축(오른쪽 및 왼쪽)에 4px의 여백을 추가합니다.
- “ 그리드 ” 클래스는 그리드를 생성합니다.
- “ 그리드-열-4 ” 그리드에 4개의 열을 만듭니다.
- “ 스페이스-x-4 ” 그리드 요소 사이에 4px 공간을 추가합니다.
- “ bg-녹색-400 ” 배경색을 녹색으로 설정합니다.
- “ h-16 ” 높이를 16px로 설정합니다.
- “ 반올림-lg ”는 모서리를 둥글게 만들고 테두리 반경이 커집니다.
- “ 국경-2 ” 요소 주위에 2px 테두리를 만듭니다.
- “ 국경-녹색-800 ” 테두리를 진한 녹색으로 만듭니다.
산출
위 코드로 생성된 출력을 미리 봅니다.
요소 사이에 4px 간격이 할당된 것을 볼 수 있습니다.
방법 2: y축에 공간을 할당합니다.
위의 코드를 약간만 변경하면 위의 방법과 유사하게 y축에 간격을 지정할 수 있습니다. y축(상단 및 하단)을 따라 공간을 할당합니다. 이에 대한 구문은 다음과 같습니다.
아래 코드를 구현하여 y축을 따라 공백을 추가할 수 있습니다.
< 몸 >< div 수업 = 'mx-4 my-4 space-y-4' >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 1 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 2 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 삼 div >
< div 수업 = 'bg-green-400 h-16 둥근-lg 테두리-2 테두리-녹색-800' > 4 div >
div >
몸 >
이 코드에서는:
- “ mx-4 ” 출력을 더욱 최적화하기 위해 요소의 왼쪽과 오른쪽에 4px 여백을 추가합니다.
- “ 내-4 ” y축(상단 및 하단)에 4px 여백을 추가합니다.
- “ 스페이스-Y-4 '는 y축(상단 및 하단)에 4px의 공간을 추가합니다.
산출
위의 코드를 저장하고 생성된 웹페이지를 미리 보면 다음과 같은 간격이 표시됩니다.
그것은 요소들 사이에 동일한 공간을 할당하는 것입니다.
결론
Tailwind에서 여러 요소 사이에 동일한 공간을 할당하려면 사용자는 ' 공간-{x/y}-{크기} ” 유틸리티 클래스를 선택하고 요구 사항에 따라 정수 값을 크기로 지정합니다. 요소 사이의 간격이 동일하면 출력의 확장성이 향상되고 시청자는 웹페이지에 계속해서 참여할 수 있습니다. 이 게시물에서는 Tailwind의 여러 요소 사이에 동일한 공간을 할당하는 방법을 제공했습니다.