코드:
결과보기 »
<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>CSS3 Multi-column Layout</title> <style> div { margin: 30px 0; -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; } #line { -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 5px; -moz-column-rule-width: 5px; column-rule-width: 5px; -webkit-column-rule-color: #6495ED; -moz-column-rule-color: #6495ED; column-rule-color: #6495ED; } </style> </head> <body> <h1>column-rule-color 속성을 이용한 라인의 색상 설정</h1> <div id="origin"> <h4>칼럼 레이아웃의 원래 모습이에요!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim magna et iaculis molestie. Vivamus semper gravida magna, non imperdiet nisl viverra vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tristique cursus dui at facilisis. Maecenas mollis dui tortor, non elementum libero condimentum vulputate. Phasellus eget sagittis felis. Quisque ornare et risus ac sodales. Phasellus malesuada efficitur mattis. In hac habitasse platea dictumst. Ut enim sem, placerat id sagittis tristique, posuere ac mi. Cras et efficitur magna. Vestibulum in nulla feugiat, sodales libero quis, molestie urna. Praesent laoreet at augue in interdum. Duis et mauris at lacus tempus fringilla.</p> </div> <div id="line"> <h4>column-rule-color 속성으로 칼럼 사이에 들어갈 라인의 색상을 정의했어요!</h4> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean dignissim magna et iaculis molestie. Vivamus semper gravida magna, non imperdiet nisl viverra vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc tristique cursus dui at facilisis. Maecenas mollis dui tortor, non elementum libero condimentum vulputate. Phasellus eget sagittis felis. Quisque ornare et risus ac sodales. Phasellus malesuada efficitur mattis. In hac habitasse platea dictumst. Ut enim sem, placerat id sagittis tristique, posuere ac mi. Cras et efficitur magna. Vestibulum in nulla feugiat, sodales libero quis, molestie urna. Praesent laoreet at augue in interdum. Duis et mauris at lacus tempus fringilla.</p> </div> </body> </html>
