반응형
블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 올라온 글

최근에 달린 댓글

최근에 받은 트랙백

글 보관함

카테고리

HTML5 CSS Columns Google

2012. 1. 27. 21:47 | Posted by 솔웅


반응형
Hey today I introduce Columns in CSS3.
You can just move below slider then the number of columns will be changed.
If you use Firefox then type number in TextBox then hit the enter key.
(It is not working on Internet Explorer and Opera Web browser.)

오늘은 CSS3의 Columns 나누기에 대해 소개해 드리겠습니다.
일단 이 기능은 인터넷 익스플로어랑 오페라 웹 브라우저에서는 작동하지 않습니다.
테스트 하시려면 FireFox나 Google Chrome 혹은 Sapari 브라우저를 사용하셔야 합니다.
구글 크롬이나 사파리의 경우 아래 슬라이드바를 움직이시면 Column 들이 변할겁니다. 2단이었던 것이 3,4,5,6 단 등으로 바뀔겁니다.
파이어폭스일 경우는요 슬라이드바가 안 나타나고 텍스트박스가 나올겁니다.
여기에 숫자를 입력하고 엔터키를 치시면 됩니다.

Columns

-webkit-column-count: 2; 
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

In March 1936, an unusual confluence of forces occurred in Santa Clara County.

A long cold winter delayed the blossoming of the millions of cherry, apricot, peach, and prune plum trees covering hundreds of square miles of the Valley floor. Then, unlike many years, the rains that followed were light and too early to knock the blossoms from their branches.

Instead, by the billions, they all burst open at once. Seemingly overnight, the ocean of green that was the Valley turned into a low, soft, dizzyingly perfumed cloud of pink and white. Uncounted bees and yellow jackets, newly born, raced out of their hives and holes, overwhelmed by this impossible banquet.

Then came the wind.

It roared off the Pacific Ocean, through the nearly uninhabited passes of the Santa Cruz Mountains and then, flattening out, poured down into the great alluvial plains of the Valley. A tidal bore of warm air, it tore along the columns of trees, ripped the blossoms apart and carried them off in a fluttering flood of petals like foam rolling up a beach.

This perfumed blizzard hit Stevens Creek Boulevard, a two-lane road with a streetcar line down its center, that was the main road in the West Valley. It froze traffic, as drivers found themselves lost in a soft, muted whiteout. Only the streetcar, its path predetermined, passed on...


Google Chrome 16.0.912.75 m  - Working well (O)
Internet Explorer 9.0.8.112        - Not working (X)
Opera 11.60                            - Not working (X)
Safari 5.1.2                             - Working well (O)
FireFox 9.0.1                          - Working Well? Well.... (O)

You can down load sample source file below.
소스를 분석하시려면 아래 샘플파일을 받아서 보시면 됩니다.



반응형