초보자를위한 CSS 다중 열 레이아웃 자습서

CSS 다중 열 레이아웃 튜토리얼 소개 : 키 포인트

CSS 다중 열 레이아웃 모듈을 사용하면 개발자가 반응 형 멀티 열 레이아웃을 만들 수있어 다양한 화면 크기에서 좋은 결과를 얻을 수 있습니다. 속성은 열의 수를 지정하고

속성은 각 열의 너비를 지정합니다. 둘 다 또는 양수로 설정 될 수 있으며, 약어

속성을 ​​사용하여 동시에 설정할 수 있습니다.
• column-count 속성은 열 간격을 지정하고 속성은 약식 형식으로 열 사이에 분배기를 추가 할 수 있습니다. column-width 속성은 열을 채우기 위해 컨텐츠가 할당되는 방법을 결정하고, auto 속성은 요소가 여러 열에 걸쳐있는 방법을 제어합니다. columns 레이아웃이 모든 화면 크기에 잘 표시되기 위해서는
및
• 모두를 지정해야합니다. 미디어 쿼리를 사용하면 수평 스크롤 또는 과도한 열 길이와 같은 문제를 해결하는 데 도움이됩니다. 멀티 컬럼 기능을 지원하지 않는 레거시 브라우저는 단일 열 레이아웃으로 우아하게 다운 그레이드됩니다. column-gap column-rule 긴 텍스트 라인은 읽기가 더욱 힘들어 질 수 있으며 독자는 텍스트 내용 자체가 아닌 미스 링 라인에 더 많은 관심을 기울입니다. 이 문제는 다중 열 레이아웃을 사용하여 쉽게 해결할 수 있습니다. 다중 열 레이아웃은 인쇄 매체에서 매우 일반적입니다. CSS 다중 열 레이아웃 모듈의 기능을 통해 웹 사이트에서 동일한 다중 열 효과를 재현 할 수 있습니다. column-fill 웹 디자인에서 멀티 컬럼 레이아웃을 사용하는 데 어려움 중 하나는 문서 크기를 제어 할 수 없다는 것입니다. 이 튜토리얼에서는 다양한 화면 크기로 잘 수행되는 반응 형 멀티 컬럼 레이아웃을 만드는 방법을 알려 드리겠습니다. 우리는 기본부터 시작하여 점차 더 복잡한 개념을 배울 것입니다. column-span 브라우저 지원
접두사를 기꺼이 사용하려면 멀티 컬럼 레이아웃에 대한 브라우저 지원이 매우 좋습니다. CAN I 사용 웹 사이트의 통계에 따르면이 기능은 전 세계 브라우저의 95.32%에서 지원됩니다. 일부 브라우저 (예 : IE10, Edge 및 Opera Mini)는 다중 열 레이아웃을 완전히 지원합니다. Firefox 및 Chrome과 같은 다른 브라우저에는 접두사가 필요합니다.
• 이전 브라우저 (보통 IE9 이하)를 지원 해야하는 경우 이전 폴리 필드를 사용할 수 있습니다. 물론 브라우저가 다중 열 함수를 지원하지 않으면 레이아웃은 단일 열 레이아웃으로 우아하게 다운 그레이드됩니다. 따라서이 경우 PolyFill이 최선의 선택이 아닐 수 있습니다. column-count CSS 다중 열 레이아웃 모듈에는 여러 가지 속성이 있습니다. 다음 섹션에서는 하나씩 소개합니다. column-width
열 수와 열 너비

속성은 요소에 대해 설정할 열 수를 지정합니다. 당신은 그것을 또는 양수로 설정할 수 있습니다.

로 설정되면 열 수는

속성에 의해 결정됩니다. 양수로 설정되면 모든 열의 너비가 동일합니다.

column-width 속성은 요소의 각 열의 너비를 지정합니다. 이것은 엄격하게 따르지 않습니다. 예를 들어, 가용 공간이 충분하지 않은 경우 기둥이 좁을 수 있습니다. 이 속성은 또한 auto 값 또는 양수로 설정할 수 있습니다. auto로 설정되면 너비는 column-count 속성에 의해 결정됩니다. 여유 공간은 모든 열에 균등하게 분포됩니다.

또는 약어

속성을 ​​사용하여 동시에 두 값을 동시에 설정할 수 있습니다. 속성의 구문은 다음과 같습니다. columns 이 속성의 일부 사용 예는 아래에 나와 있으며 각 예제 옆의 설명과 함께 다음과 같습니다. columns 알 수 있듯이, 첫 번째

정의는 네 번째의 약어이고 두 번째 정의는 세 번째의 약어입니다. 기본적으로 정수가 유닛을 할당하지 않으면

<code class="language-css">.example {
  columns:  || 
}</code>

로 구문 분석됩니다.

이것은 지금까지 논의 된 기능을 보여주는 코드 펜 데모입니다. 창을 크기를 조정하면 다음을 알 수 있습니다.

속성은 항상 열의 수를 지정한 값과 동일하게 만듭니다. 변화하는 유일한 것은 열의 너비입니다.

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

columns 속성은 사용 가능한 공간에 따라 열 수를 자동으로 변경합니다. 열 수는 지정된 값보다 열 너비를 크게 만들어 조정됩니다. 또한 여유 공간이 충분하지 않은 경우 모든 열의 너비를 더 작은 값으로 조정할 수도 있습니다. column-count

속성은 허용 된 최대 열 수에 대한 한계로

값을 사용합니다.

가 카운트 한계를 초과하지 않으며

도 지정된 너비에 매우 가깝게 너비를 조정합니다.

열 간격 및 열 규칙
• column-count
속성을 ​​사용하면 열 사이의 공간의 양을 지정할 수 있습니다. 당신은 그것을 또는 길이 값으로 설정할 수 있습니다. 0 일 수 있지만 음수는 아닙니다. 로 설정하면 브라우저에서 정의 된 열 사이의 기본 간격을 사용합니다.
• column-width 속성은 열 사이에 분배기를 추가 할 수있는 약어입니다. 이것은 또는
속성을 ​​사용하는 것과 유사합니다. 이 속성은 다음 구문을 따릅니다
• columns의 경우 너비를 길이 (예 : )로 지정하거나 키워드를 사용할 수 있습니다 (예 : , 또는 ). column-count, , 와 같은 값을 허용합니다. 속성의 모든 유효한 값을 column-count로 사용할 수 있으며, 이는 유효한 색상 값이 될 수 있습니다. column-width 이것은 이러한 속성이 함께 사용되는 코드 펜 데모입니다. 열 채우기 및 열 범위

속성은 열을 채우기 위해 컨텐츠를 할당하는 방법을 결정합니다. 이 속성은 또는 로 설정할 수 있습니다. 로 설정하면 열이 순서대로 채워집니다.

를 사용하여 컨텐츠가 모든 열에 균등하게 분포되어 있는지 확인하십시오.

열 요소에 대해 고정 높이를 설정하면 Firefox가 자동으로 컨텐츠의 균형을 맞추는 것이 중요합니다. 그러나 다른 브라우저는 열을 순서대로 채우기 시작합니다.

속성은 요소가 여러 열에 파란하는 방법을 제어합니다. 두 가지 가능한 값이 있습니다 :

또는 .

로 설정되면 요소는 모든 열에 걸쳐 있습니다. 이 속성은 Firefox에서 지원되지 않습니다. column-span 이것은 모든 열에서 블록 쿼트 요소를 "스파링"하는 코드 펜 데모입니다. Firefox에서 Blockquote는 중간 열에서 끝나고 허용 가능한 폴백 일 수 있습니다. all 여러 열이있는 반응 형 레이아웃을 만듭니다 none all 이제 다른 속성과 가능한 값에 대해 배웠으므로 레이아웃을 반응하고 사용자 친화적으로 유지하는 방법에 중점을 두겠습니다.

및

는 고유 한 문제가 있습니다.

는 더 큰 장치의 열 수를 제어 할 수 있지만 더 작은 장치의 레이아웃이 중단됩니다. 마찬가지로,

는 더 작은 장치에서 열이 너무 좁지 않지만 더 큰 장치에서 많은 열을 초래할 것입니다.

모든 화면 크기에 레이아웃이 잘 표시되도록하려면 및 를 모두 지정해야합니다. 이런 식으로 열의 너비와 수를 제어 할 수 있습니다. 그러나 여전히 몇 가지 문제를 해결해야 할 수도 있습니다. 다음에 논의 할 것입니다. 수평 스크롤 를 수정하십시오 열에 고정 된 높이를 지정하면 뷰포트가 줄어들어 수평 스크롤 막대가 나타납니다. 내용은 수직으로 확장 될 수 없으므로 수평으로 자랍니다. 이 문제를 해결하려면 브라우저 크기를 조정하여 수평 스크롤 바가 처음으로 얼마나 넓게 나타나는지 확인할 수 있습니다. 그런 다음 미디어 쿼리를 사용하여 그 너비 아래 열의 높이를 로 설정할 수 있습니다. 다음은이를 수행하는 코드입니다.

이 코디 펜 데모는 문제와 가능한 솔루션 를 보여줍니다 창을 크기를 조정하여 두 예제 모두에 어떻게 반응하는지 확인하십시오.

너무 긴 열 column-count를 수정했습니다 열이 너무 길면 사용자는 모든 것을 읽기 위해 계속 위아래로 스크롤해야합니다. 이는 성가신 일입니다. 열의 높이가 뷰포트 높이 자체보다 크면 여러 열을 제거하는 것이 가장 좋습니다. 미디어 쿼리를 사용하여 다시 수행 할 수 있습니다 column-width 이 경우 뷰포트 너비로 인해 사용자가 더 이상 위아래로 스크롤 할 필요가없는 경우 여러 열만 사용합니다. column-count 여러 열과 미디어 쿼리가있는 데모를 봅니다 결론 column-width

CSS 멀티 컬럼 레이아웃 모듈에 대한이 입문 자습서 가이 기능에 익숙해지기를 바랍니다. 이러한 속성은 반응 형 디자인 도구 상자에 멋지게 추가 할 수 있으며, 오래된 브라우저를 지원 해야하는 경우 여러 열이 종종 단일 열로 우아하게 다운 그레이드됩니다.

CSS 다중 열 레이아웃의 경우 faq CSS에서 다중 열 레이아웃을 만드는 방법은 무엇입니까? column-count CSS에서 멀티 컬럼 레이아웃을 만드는 것은 매우 간단합니다. 속성을 ​​사용하여 레이아웃에서 원하는 열 수를 지정할 수 있습니다. 예를 들어, 세 개의 열을 원한다면 다음을 쓸 수 있습니다.

<code class="language-css">.example {
  columns:  || 
}</code>

이 예에서

는 열로 나누려는 요소의 클래스입니다. .container 속성은 요소의 내용을 지정된 수의 열로 자동으로 나눕니다. column-count CSS의 열 사이의 간격을 제어하는 ​​방법은 무엇입니까?

속성을 ​​사용하면 열 사이의 공간을 제어 할 수 있습니다. 이 속성에 대해 설정 한 값은 간격의 폭입니다. 예를 들어, 열 사이에 20px 간격을 원한다면 다음을 쓸 수 있습니다.

CSS에서 다른 너비의 열을 만들 수 있습니까?

불행히도 CSS 다중 열 레이아웃 모듈은 너비가 다른 열을 지원하지 않습니다. 속성으로 생성 된 모든 열의 너비가 동일합니다. 그러나 Flexbox 또는 Grid와 같은 다른 CSS 기술을 사용하여 너비의 열의 열을 생성 할 수 있습니다. column-gap CSS에서 열 폭을 제어하는 ​​방법은 무엇입니까?

당신은

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

속성을 ​​제어 열 너비에 사용할 수 있습니다. 이 속성은 열의 최적 폭을 지정하지만 브라우저는 콘텐츠에 맞게 필요한 경우 너비를 조정합니다. 예를 들어, 열 너비를 200px로 설정하려면 다음을 쓸 수 있습니다.

CSS에서 열 규칙을 만드는 방법은 무엇입니까?

속성을 ​​사용하면 열 사이의 규칙이나 줄을 만들 수 있습니다. 규칙의 너비, 스타일 및 색상을 지정할 수 있습니다. 예를 들어, 1px 솔리드 블랙 규칙을 만들려면 다음을 쓸 수 있습니다. column-count CSS의 열 인터럽트를 제어하는 ​​방법은 무엇입니까?

속성을 ​​사용하면 열 인터럽트를 제어 할 수 있습니다. 요소 내의 인터럽트를 방지하기 위해이 속성을

로 설정할 수 있습니다. 예를 들면 : column-width

반응 형 디자인으로 다중 열 레이아웃을 사용할 수 있습니까?

<code class="language-css">.example {
  column-rule:  ||  || 
}</code>

예, 반응 형 디자인으로 다중 열 레이아웃을 사용할 수 있습니다. 미디어 쿼리를 사용하여 뷰포트 폭에 따라 열 수를 조정할 수 있습니다. 예를 들어, 작은 화면에 하나의 열과 큰 화면에 3 개의 열을 표시 할 수 있습니다.

CSS에서 열을 채우는 방법은 무엇입니까?

기본적으로 열은 순서대로 채워집니다. 이는 먼저 첫 번째 열을 채우고 두 번째 열 등을 채우는 것을 의미합니다. 그러나

속성을 ​​사용 하여이 동작을 변경할 수 있습니다. 이 속성을 column-rule로 설정하면 브라우저는 열을 골고루 채우려고합니다.

칼럼을 교차하는 방법?

<code class="language-css">.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}</code>

속성을 ​​통해 요소는 여러 열을 스패티시킬 수 있습니다. 이 속성을

로 설정하여 요소가 모든 열을 파악할 수 있습니다. 예를 들면 :

break-inside
CSS 멀티 컬럼 레이아웃에 대한 브라우저 호환성 문제가 있습니까? avoid 대부분의 최신 브라우저는 CSS 다중 열 레이아웃을 지원하지만 구현에는 약간의 차이가있을 수 있습니다. 다른 브라우저에서 레이아웃을 테스트하여 예상대로 작동하는지 확인하는 것이 가장 좋습니다. 다양한 CSS 속성에 대한 브라우저 지원을 확인하는 데 사용할 수있는 도구를 사용할 수도 있습니다.

위 내용은 초보자를위한 CSS 다중 열 레이아웃 자습서의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!