■ CSS 멀티 컬럼 속성을 사용하는 방법을 보여준다.
▶ test.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> div { margin : 20px; display : inline-block; } #multi { -webkit-column-count : 3; -webkit-column-gap : 20px; -webkit-column-rule : 1px dashed black; -moz-column-count : 3; -moz-column-gap : 20px; -moz-column-rule : 1px dashed black; } </style> </head> <body> <header> <h1>CSS3 멀티 컬럼 속성</h1> </header> <div> 신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다. 새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다. 3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다. 같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다. 그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다. 소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다. 소녀의 말에 너틀은 이 집에 방문한 것을 후회했다. 잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다. 그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다. </div> <div id="multi"> 신경정신과 치료차, 시골에 내려온 '프램턴 너틀'은 누이의 소개로 새플턴 부인을 기다리고 있었다. 새플턴 부인을 기다리는 동안 그녀의 조카, '베라'는 이모에 대한 비극적인 이야기를 시작했다. 3년 전, 베라의 이모부와 삼촌 두 명이 도요새 사냥을 떠났다가 늪에 빠져 실종되었다. 같이 갔던 갈색 스패니얼(새 사냥용 개)도 역시 돌아오지 않았다. 그날 이후, 이모는 그들이 돌아오기를 기다리며 매일 유리문을 열어놓았다. 소녀는 이따금 그들이 열린 유리문으로 들어올까 봐 두려워했다. 소녀의 말에 너틀은 이 집에 방문한 것을 후회했다. 잠시 후 '새플턴 부인'이 나왔고, 부인은 너틀에게 유리문을 열어두어도 괜찮겠냐고 물었다. 그녀는 남편과 동생들이 사냥을 나갔는데, 이제 돌아올 때가 됐다고 말했다. </div> </body> </html> |
※ 크롬과 파이어폭스는 지원하나 오페라와 인터넷 익스플로러는 지원하지 않는다.