CSS3: 다단(Multi-Column) 만들기2

※ "CSS3: 다단(Multi-Column) 만들기1"에서 이어지는 강좌입니다.       `column-rule-style   해당 속성은 단의 구분선의 종류를 지정합니다. 속성값은 아래와 같습니다.(보다 자세한 사항은 본 카페 "스타일 시트 강좌"의 "테두리선 종류 지정" 강좌를 참조하십시오.)   1. none: 테두리선을 표시하지 않음(기본값)  2. hidden: 테두리선을 표시하지 않음 3. dotted: 테두리선을 원으로 된 점선으로 표시  4. dashed: 테두리선을 직선으로 된 점선으로 표시 5. solid: 테두리선을 실선으로 표시 6. double: 테두리선을 두 줄짜리 실선으로 표시 7. groove: 테두리선을 입체감있게 표시 8. ridge: 테두리선을 볼록하게 표시 9. inset: 테두리선 전체가 들어가 보이게 표시 10. outset : 테두리선 전체가 튀어나와 보이게 표시    div{ -webkit-column-count:3; -webkit-column-rule-style:dotted;   -moz-column-count:3; -moz-column-rule-style:dotted;   column-count:3; column-rule-style:dotted; }   위의 소스는 단의 개수를 3개로 지정하고 column-rule-style:dotted;으로 단의 구분선을 점선으로 지정한 것으로 아래의 예와 같이 단의 구분선이 점선으로 표시됩니다. 해당 속성도 역시 웹 브라우저별로 벤더 프리픽스를 사용해줘야 합니다.<img src="https://t1.daumcdn.net/cfile/cafe/2633764B56ADD50F0B" class="txc-image" style="FLOAT: none; CLEAR: none" data-filename="multicolumn4.jpg" actualwidth="685" exif="{}" border="0" hspace="1" vspace="1" width="685" id="A_2633764B56ADD50F0BFADA"/>         `column-rule-width   해당 속성은 단의 구분선의 넓이를 지정합니다. column-rule-width:2px; 이런 식으로 "px" 같은 단위(단위는 본 카페 "스타일 시트 강좌" 게시판의 "스타일 시트의 단위" 강좌를 참조하십시오.)로 속성값을 지정합니다. 그 외 다음의 키워드를 속성값으로 사용할 수 있습니다.   1. thin: 구분선을 가늘게 지정 2. medium: 구분선을 중간 정도의 넓이로 지정 3. thick: 구분선을 굵게 지정   div{ -webkit-column-count:3; -webkit-column-rule-style:dotted; -webkit-column-rule-width:2px;   -moz-column-count:3; -moz-column-rule-style:dotted; -moz-column-rule-width:2px;   column-count:3; column-rule-style:dotted; column-rule-width:2px; }   위의 소스는 단의 개수를 3개, 단의 구분선을 점선으로 각각 지정하고 column-rule-width:2px;으로 단의 구분선의 넓이를 2 픽셀로 지정한 것으로 아래의 예와 같이 단의 구분선이 2 픽셀만큼의 넓이로 표시됩니다. 해당 속성도 역시 웹 브라우저별로 벤더 프리픽스를 사용해줘야 합니다.<img src="https://t1.daumcdn.net/cfile/cafe/215D7A5056ADD78219" class="txc-image" style="FLOAT: none; CLEAR: none" data-filename="multicolumn5.jpg" actualwidth="685" exif="{}" border="0" hspace="1" vspace="1" width="685" id="A_215D7A5056ADD78219AEF9"/>         `column-rule-color   해당 속성은 단의 구분선의 색상을 지정합니다. column-rule-color:#0000ff; 이런 식으로 색상 기호나 column-rule-color:blue; 같이 색상 영어명 등으로 속성값을 지정합니다.    div{ -webkit-column-count:3; -webkit-column-rule-style:solid; -webkit-column-rule-color:#0000ff;   -moz-column-count:3; -moz-column-rule-style:solid; -moz-column-rule-color:#0000ff;   column-count:3; column-rule-style:solid; column-rule-color:#0000ff; }   위의 소스는 단의 개수를 3개, 단의 구분선을 solid 즉, 실선으로 각각 지정하고 column-rule-color:#0000ff;으로 단의 구분선의 색성을 파란색로 지정한 것으로 아래의 예와 같이 단의 구분선이 파란색으로 표시됩니다. 해당 속성도 역시 웹 브라우저별로 벤더 프리픽스를 사용해줘야 합니다.<img src="https://t1.daumcdn.net/cfile/cafe/2534DF3D56ADE3A508" class="txc-image" style="FLOAT: none; CLEAR: none" data-filename="multicolumn6.jpg" actualwidth="685" exif="{}" border="0" hspace="1" vspace="1" width="685" id="A_2534DF3D56ADE3A508F6DA"/>         `column-rule:   해당 속성은 위에서 살펴본 column-rule-style, column-rule-width, column-rule-color 속성을 일괄적으로 지정합니다 아래의 예와 같이 각 속성을 공백으로 구분해서 지정해주면 됩니다.   column-rule:double 5px #0000ff;   해당 속성도 역시 아래와 같이 웹 브라우저별로 벤더 프리픽스를 사용해줘야 합니다.   -webkit-column-rule:double 5px #0000ff; -moz-column-rule:double 5px #0000ff;   아래의 소스는 단의 개수를 3개로 지정하고 column-rule:double 5px #0000ff;로 단의 구분선의 종류를 duoble 즉, 두줄짜리 실선으로 구분선의 넓이는 5px, 구분선의 색상은 파란색으로 각각 일괄적으로 지정한 것으로 아래의 예와 같이 지정해준대로 표시됩니다.   div{ -webkit-column-count:3; -webkit-column-rule:double 5px #0000ff;   -moz-column-count:3; -moz-column-rule:double 5px #0000ff;   column-count:3; column-rule:double 5px #0000ff; } <img src="https://t1.daumcdn.net/cfile/cafe/274C194556ADE6A502" class="txc-image" style="FLOAT: none; CLEAR: none" data-filename="multicolumn7.jpg" actualwidth="685" exif="{}" border="0" hspace="1" vspace="1" width="685" id="A_274C194556ADE6A502F5D4"/>         `column-span   해당 속성은 요소를 여러 단에 걸쳐서 표시합니다. 속성값으로는 all을 사용하며 column-span:all과 같이 지정하면 만약 단을 3단으로 나누어준 경우 해당 속성을 사용하여 특정 부분만 3단이 아닌 여러 단에 걸쳐서 즉, 1단으로 표시할 수 있습니다. 이때 만약 4단으로 나누어줬으면 오로지 1단으로만 표시할 수 있으며 3단이나 2단으로는 표시할 수 없습니다. 아래는 해당 속성을 사용하여 특정 부분만 1단으로 표시한 예입니다.   ......................................................................................     <!DOCTYPE html> <html> <head> <meta charset="euc-kr" /> <title>공짜맨의 초보태그 HTML5, CSS3 강좌 예제^^</title> <style>  </style> </head> <body> <div class="multicolumn1"> 안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^ 안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^.안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^ 안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^ 안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^ 안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^안녕하십니까? 공짜맨입니다. 제 카페를 방문해 주셔서 진심으로 감사의 말씀 올립니다.^^ 공짜맨의 초보태그는 홈페이지 제작 강좌 전문 사이트입니다. 그 내용과 충실도 등에서 최고의 사이트임을 감히 자부하는 바입니다. 항상 건강하시고 행복하십시오.^^ </div> </body> </html>   ......................................................................................   .multicolumn1{ -webkit-column-count:3; -moz-column-count:3; column-count:3; } 위 부분은 .multicolumn1이라는 클래스로 지정된 부분을 column-count:3;으로 3단으로 나누었습니다.   .multicolumn2{ background-color:#E2E7FF; -webkit-column-span:all; -moz-column-span:all; column-span:all; } 위 부분은 .multicolumn2이라는 클래스로 지정된 부분을 background-color:#E2E7FF;로 하늘색 배경을 깔아주고 column-span:all;로 해당 부분의 단을 1단으로  표시합니다. 이때 배경색은 단순히 구분을 명확히 해주는 의미로 넣어준 것이고 해당 속성과는 관련이 없습니다. 해당 속성도 역시 웹 브라우저별로 벤더 프리픽스를 사용해줘야합니다.   그러면 아래의 예와 같이 3단으로 단의 구분이 이뤄지다가 column-span:all;로 지정해준, 하늘색 배경을 깔아준 ~로 지정된 부분의 텍스트는 3단이 아닌 1단으로 표시됩니다. <img src="https://t1.daumcdn.net/cfile/cafe/2213433E56ADEA7620" class="txc-image" style="FLOAT: none; CLEAR: none" data-filename="multicolumn8.jpg" actualwidth="685" exif="{}" border="0" hspace="1" vspace="1" width="685" id="A_2213433E56ADEA7620D383"/>   이상으로 다단(Multi-Column) 만들기에 대해서 살펴보았습니다. 지금까지 살펴본 내용들의 실행 결과는 아래의 예제 페이지에서 확인할 수 있으며 해당 페이지 예제의 소스는 첨부한 파일을 다운받으시면 됩니다.   `<A href="http://totosoro37.cafe24.com/html5lec/multicolumn.htm">http://totosoro37.cafe24.com/html5lec/multicolumn.htm</A> (클릭) ※크롬, 파이어폭스, 오페라 최신 버전에서 확인하세요.   `강좌 불펌 금지   <a href="javascript:checkVirus('grpid%3Dw05%26fldid%3DMpE2%26dataid%3D25%26fileid%3D6%26regdt%3D20160131183417')"><img src="https://t1.daumcdn.net/daumtop_deco/icon/icon.hanmail.net/editor/p_etc_s.gif" border="0" alt="첨부파일" class="vam"/> 다단(Multi-Column) 만들기.zip</a>