이 게시물은 Tailwind에서 열 사이에 간격을 추가하는 전체 절차에 대해 자세히 설명합니다.

Tailwind에서 열 사이에 간격을 추가하는 방법은 무엇입니까?

Tailwind에서 열 사이에 간격을 추가하려면 내장된 ' 간격-{크기} ' 공익사업. 가로 및 세로 열 사이의 간격을 나타내는 정수 값을 지정합니다. 명시된 예제의 도움을 받아 이 작업을 실제로 수행해 봅시다.

프로젝트 파일 구조
“ 간격-{크기} ” 유틸리티는 주어진 파일 구조를 따르는 모든 Tailwind 프로젝트에서 구현할 수 있습니다.

첫 번째 예부터 시작하겠습니다.

예 1: 'gap-{size}' 유틸리티를 사용하여 행과 열 사이에 동일한 간격 추가
이 예제는 'gap-{size}' 유틸리티를 적용하여 주어진 열 사이에 가로 및 세로로 동일한 간격을 추가합니다.

HTML 코드
다음 코드의 개요:

위의 코드 라인에서:

• 먼저 기본 CSS 파일 “ /dist/output.css '를 기존 HTML 파일 ' index.html ”를 사용하여 <링크> ” 태그를 'head' 섹션에 추가합니다.
• 다음으로 'body' 섹션은 '를 사용하는 '

  ' 요소를 생성합니다. 글꼴 크기 ”, “ 글꼴 두께 ”, “ 텍스트 정렬 ”, “ 텍스트 장식 ', 그리고 ' 텍스트 색상 ” Tailwind 클래스, 각각.

• 그 후 '
  ' 요소가 추가되어 ' 그리드 ” 유틸리티를 사용하여 명시된 수의 그리드 레이아웃에 콘텐츠를 설정하고 “ 여유 ” 클래스를 사용하여 가로 여백을 설정하고 “ 갭 ” 열 사이에 지정된 간격을 추가하는 유틸리티.
• “
  ” 요소 본문 섹션에는 “ 테두리 폭 ' 그리고 ' 테두리 색상 ' 클래스, 각각.

산출
라이브 서버에서 위의 HTML 코드를 실행하고 출력을 분석합니다.

표시된 대로 출력은 두 차원의 열 사이에 지정된 간격을 적절하게 추가합니다.

예 2: 'gap-{size}' 유틸리티를 사용하여 행과 열 사이에 독립적으로 간격 추가
“ 간격-{크기} ” 유틸리티는 'x(horizontal)' 및 'y(vertical)' 치수를 사용하여 행에 대해 'gap-x-{size}'로 구현하고 열에 대해 'gap-y-{size}'를 추가할 수 있습니다. 개별적으로 그들 사이의 간격.

실제 구현을 봅시다.

HTML 코드
주어진 코드를 살펴보십시오.

여기서 “ 간격-x-{크기} ' 유틸리티는 행과 ' 간격-y-{크기} ”는 열 사이에 지정된 간격을 독립적으로 추가합니다.

산출

위의 결과는 행과 열 사이의 간격이 그에 따라 적용됨을 확인합니다.

결론

'Tailwind CSS'는 내장된 ' 간격-{크기} ” 유틸리티를 사용하여 열 사이에 간격을 추가합니다. 또한 ' 간격-x-{크기} ' 그리고 ' 간격-y-{크기} ” 유틸리티. 이 게시물에서는 Tailwind에서 열 사이에 간격을 추가하는 전체 절차를 제공했습니다.