다중 열 웹 사이트 레이아웃에 CSS 열을 사용하는 방법

오랜 세월 동안 CSS 플로트는 까다 롭지 만 아직 웹 사이트 레이아웃을 만드는 데 필요한 구성 요소였습니다. 디자인에서 여러 열을 호출하면 float으로 변했습니다. 이 방법의 문제점은 웹 디자이너 / 개발자가 복잡한 사이트 레이아웃을 만들 때 놀라운 창의력을 발휘 했음에도 불구하고 CSS 플로트가 이런 방식으로 사용되지 않는다는 것입니다.

수레와 CSS 배치가 앞으로 몇 년 동안 웹 디자인 분야에 자리 잡게 될 것이지만, CSS 그리드와 플렉스 박스를 포함한 새로운 레이아웃 기술은 웹 디자이너에게 사이트 레이아웃을 만드는 새로운 방법을 제공하고 있습니다. 잠재적 인 가능성을 보여주는 또 다른 새로운 레이아웃 기법은 CSS 다중 열 (Columns)입니다.

CSS 컬럼은 몇 년 전부터 사용되어 왔지만 오래된 브라우저 (주로 Internet Explorer의 이전 버전)에서는 지원이 부족하여 많은 웹 전문가가 제작 스타일에서 이러한 스타일을 사용하지 못하게했습니다.

이전 버전의 IE에 대한 지원이 끝나면서 일부 웹 디자이너는 새로운 CSS 레이아웃 옵션, CSS 열 포함을 실험하고 있으며 이러한 새로운 접근법을 플로트보다 훨씬 더 많이 제어 할 수 있습니다.

CSS 열의 기본 사항

그 이름에서 알 수 있듯이 CSS 다중 열 (CSS3 다중 열 레이아웃이라고도 함)을 사용하면 내용을 설정된 수의 열로 나눌 수 있습니다. 가장 기본적인 CSS 속성은 다음과 같습니다.

열 개수
칼럼 갭

열 수의 경우 원하는 열의 수를 지정합니다. 열 간격은 열 사이의 간격이나 간격입니다. 브라우저는이 값을 사용하여 지정한 열 수로 콘텐츠를 균등하게 나눕니다.

실제로 CSS 다중 열의 일반적인 예는 신문 기사에서 볼 수있는 것과 비슷한 텍스트 콘텐츠 블록을 여러 열로 나눠 넣는 것입니다. 다음과 같은 HTML 마크 업이 있다고 가정 해보십시오 (예를 들어, 실제로는 한 단락의 시작 부분 만 넣었지만 실제로는이 마크 업에 여러 단락의 내용이있을 수 있습니다).


기사 제목
텍스트의 단락을 많이 상상해보십시오 …

다음 CSS 스타일을 작성했다면 :

.content {-moz-column-count : 3; -webkit-column-count : 3; 열 개수 : 3; -moz-column-gap : 30px; -webkit-column-gap : 30px; 기둥 간격 : 30px; }

이 CSS 규칙은 "내용"나누기를 세 개의 동일한 열로 나눕니다. 두 열 사이의 간격은 30 픽셀입니다. 3 대신 2 개의 열을 원하면 해당 값을 변경하면 브라우저는 해당 열의 새로운 너비를 계산하여 내용을 균등하게 분할합니다. 우리는 vendor-prefixed 속성을 먼저 사용하고, 접두사가 붙지 않은 선언을 사용합니다.

이것이 쉬운 것처럼,이 방법으로 사용하면 웹 사이트 사용에 의문의 여지가 있습니다. 예, 여러 개의 열을 여러 열로 나눌 수 있지만, 특히 열의 높이가 화면의 "접힌 부분"아래로 떨어지는 경우 웹에서 가장 좋은 독서 환경이 아닐 수 있습니다.

그런 다음 독자는 전체 내용을 읽으려면 위아래로 스크롤해야합니다. 여전히 CSS 칼럼의 핵심은 여기에서 보는 것만 큼 쉽기 때문에 일부 단락의 내용을 분할하는 것보다 훨씬 많은 작업을 수행 할 수 있습니다. 실제로 레이아웃에 사용할 수 있습니다.

CSS 열 레이아웃

콘텐츠 열이 3 개인 콘텐츠 영역이있는 웹 페이지가 있다고 가정 해 보겠습니다. 이것은 매우 전형적인 웹 사이트 레이아웃이며,이 3 개의 열을 얻으려면 일반적으로 들어있는 부분을 플로팅 (float)합니다. CSS 여러 열을 사용하면 훨씬 쉽습니다.

다음은 HTML 샘플입니다.

 
우리의 블로그에서
콘텐츠가 여기로 갈 것입니다 …
  열 너비 사용"열 개수"외에 사용할 수있는 또 다른 속성이 있으며 레이아웃 요구 사항에 따라 사이트에 실제로 더 나은 선택이 될 수 있습니다. 이것은 "열 너비"입니다. 이전에 보았던 것과 동일한 HTML 마크 업을 사용하여 CSS 대신 다음과 같이 할 수 있습니다.
 .content {-moz-column-width : 500px; -webkit-column-width : 500px; 열 너비 : 500px; -moz-column-gap : 30px; -webkit-column-gap : 30px; 기둥 간격 : 30px; } .content div {display : 인라인 블록; }
이것이 작동하는 방식은 브라우저가이 "열 너비"를 해당 열의 최대 값으로 사용한다는 것입니다. 브라우저 창 크기가 500 픽셀보다 작 으면이 세 부분이 하나의 열, 다른 열의 꼭대기 중 하나에 나타납니다. 이것은 모바일 / 소형 화면 레이아웃에 사용되는 일반적인 레이아웃입니다.
 






브라우저 너비가 지정된 열 간격과 함께 2 열에 맞도록 커지면 브라우저는 자동으로 단일 열 레이아웃에서 두 열로 이동합니다. 화면 너비를 계속 늘리면 3 열의 디자인이 각 열에 표시됩니다. 다시 말하지만, 이것은 반응이 빠르고, 멀티 기기 친화적 인 레이아웃을 얻는 가장 좋은 방법이며 레이아웃 스타일을 변경하기 위해 미디어 쿼리를 사용할 필요조차 없습니다!
 기타 열 속성
여기에 설명 된 속성 외에도 열 사이에 규칙을 만들 수있는 색상, 스타일 및 너비 값을 비롯한 "열 규칙"속성이 있습니다. 열을 구분하는 행이 필요한 경우 테두리 대신이 값이 사용됩니다.
 실험 시간
현재 CSS 다중 열 레이아웃이 잘 지원됩니다.접두어를 사용하면 94 % 이상의 웹 사용자가 이러한 스타일을 볼 수 있으며 지원되지 않는 그룹은 실제로 더 이상 지원하지 않는 Internet Explorer의 이전 버전 일뿐입니다.
이제는 이러한 수준의 지원으로 인해 CSS Columns를 실험하고 제작 준비가 완료된 웹 사이트에 이러한 스타일을 배치하지 않을 이유가 없습니다. 이 기사에서 제시된 HTML과 CSS를 사용하여 실험을 시작하고 다양한 값으로 놀아서 사이트의 레이아웃 요구 사항에 가장 적합한 것이 무엇인지 확인할 수 있습니다.