[CSS] 컬럼(column,열) 수를 지정하는 Multiple Column

문장을 읽을 때 줄이 너무 길어서 도중에 어떤 행을 읽고 있었는지 알 수 없게 될 수도 있습니다.

신문 기사와 같이 한줄의 길이를 적당히 나눈 컬럼이 있는 것이 더 쉽게 읽을 수 있습니다. 이 속성은 신문처럼 칼럼의 배치에 유효하게 사용할 수 있습니다.

속성

column-count	컬럼 수를 지정합니다.
column-gap	칼럼(열)의 간격을 지정합니다. 속성값은 픽셀(pixel) 또는 %(percentage)로 지정할 수 있습니다.
column-rule	컬럼 구분선의 스타일과 폭, 색상을 지정합니다.

column-count:3;

<html>
<style type="test/css">
.news {
   width: 510px;
   column-count: 3;
   -webkit-column-count:3;/*chrome・Safari用*/
   -moz-column-count:3;/*Firefox用*/
}
</style>

column-count: 3;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

An Uber spokeswoman said New Year's Eve 2014 was one of its busiest days. And the company has quadrupled its presence in the last year. It's now operating in over 260 cities across the world -- up from 66 in 2014.

But how much -- or how little -- might riders pay? That's unpredictable due to Uber's price algorithm, which charges riders inordinate sums of money during periods when its cars are most in demand. (Hello, New Years Eve!)

On Tuesday, the company issued a blog post explaining its surge pricing and providing timing guidelines (the highest fares are expected to be between 12:30 and 2:30 a.m., when Ubers are most in demand).

column-gap:35px;

<style type="test/css">
.news1 {
  margin-left:10px;
  margin-bottom:30px;
  width: 510px;
  padding:5px;
  column-count: 3;
  -webkit-column-count:3; 
 /*chrome・Safari用*/
  -moz-column-count:3;/*Firefox用*/
  column-gap:35px;
  -webkit-column-gap:35px;
 /*chrome・Safari用*/
  -moz-column-gap:35px;;/*Firefox用*/
  border:1px solid #00F
}

column-gap:35px;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.

column-rule:1px solid red;

<style type="test/css">
.news2 {
  margin-left:10px;
  margin-bottom:30px;
  width: 510px;
  padding:5px;
  column-count: 3;
  -webkit-column-count:3; 
 /*chrome・Safari用*/
  -moz-column-count:3;/*Firefox用*/
  column-rule:1px solid red;
  -webkit-column-rule:1px solid red; 
 /*chrome・Safari用*/
  -moz-column-rule:1px solid red;/*Firefox用*/
  border:1px solid red;
}

column-rule:1px solid red;

The controversial startup expects to service 2 million riders worldwide on New Year's Eve alone.