CSS 열이란 무엇이며 어떻게 채우나요?

다양한 CSS 속성을 사용하여 웹 페이지의 열을 관리할 수 있는데 "column-fill"이 그 중 하나입니다. 열 채우기 CSS 속성은 여러 열의 콘텐츠 모양을 설정하는 데 사용됩니다. 예를 들어, 모든 열 사이에서 자연스럽게 흐르거나 균형을 이루어야 합니다.

경우에 따라 애플리케이션의 사용자 경험을 향상시키기 위해 모든 열에 동일한 콘텐츠를 설정해야 합니다.

문법

사용자는 다음 구문에 따라 열 채우기 CSS 속성을 사용할 수 있습니다.

열 채우기 CSS 속성 값

• auto - 콘텐츠를 자연스러운 흐름으로 설정합니다. 예를 들어 첫 번째 열을 채우고 콘텐츠를 두 번째 열에만 보냅니다.

• Balance - 모든 열에 동일한 내용을 설정하는 데 사용됩니다.

• Initial - 기본값인 "균형"을 설정합니다.

• Inherited - 상위 요소의 열 채우기 속성 값을 상속합니다.

예 1

아래 예에서는 두 개의 div 요소를 정의하고 텍스트 콘텐츠를 추가했습니다. 또한 두 div 요소 모두에 대해 고정 크기를 설정했습니다. 그런 다음 열 수를 2로 설정하고 열 패딩을 자동으로 설정했습니다.

출력에서 첫 번째 열을 먼저 채운 다음 두 번째 열만 채우는 것을 볼 수 있습니다. 첫 번째 열이 완전히 채워지지 않으면 내용은 첫 번째 열에 그대로 유지됩니다.

예 2

아래 예에서는 첫 번째 요소와 같이 두 개의 div 요소를 정의했습니다. 그 후 첫 번째 div 요소의 열 수는 4이고 두 번째 div 요소의 열 수는 3입니다.

또한 두 div 요소의 "column-fill" 속성에 "balance" 값을 설정했습니다. 출력에서 콘텐츠가 여러 열에 걸쳐 어떻게 균형을 이루고 있는지 확인할 수 있으며, 가득 차지 않은 열의 하단에도 공간이 있습니다.

사용자는 CSS 열 채우기 속성을 사용하여 여러 열 사이에 콘텐츠가 표시되는 방식을 설정하는 방법을 배웠습니다. "자동" 높이의 열 간에 콘텐츠를 균등하게 나누려면 균형 값을 사용하는 것이 좋습니다. 이렇게 하면 바닥 공간을 극복할 수 있습니다.

위 내용은 CSS 열이란 무엇이며 어떻게 채우나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!