게시판 디자인 - TABLE과 CSS를 이용한!

여전히, 한글 글꼴에 대한 흡족한 스타일 작성은 쉽지만은 않습니다만, HTML과 CSS만을 이용한 테이블 디자인으로 아래와 같은 게시판 폼을 만들 수 있습니다. IE7, FireFox2등에서 제공되는 입력폼, 버튼의 디자인이 이전에 비해 한결 나은 모습을 보이기 때문에, 이미지를 이용한 버튼제작도 크게 불필요해 보입니다. <style type="text/css">
TABLE.style01{ width:100%; border-width:2px; border-color:#999999; border-collapse:collapse; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; table-layout:fixed; }
TR, TD, SELECT, INPUT, DIV, TEXTAREA{ font-family:sans-serif, 돋움; font-size:11px; color:#737373; } TR, TD{ padding:5px 5px 5px 5px; }
TEXTAREA{
scrollbar-face-color: #EFEFEF;
scrollbar-shadow-color: #FFFFFF;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #DFDFDF;
scrollbar-darkshadow-color: #DFDFDF;
scrollbar-track-color: #ffffff; scrollbar-arrow-color: #000000;
}
TD.bDot{ border-bottom-style:dotted; border-bottom-width:1px; border-bottom-color:#999999; }
TD.tName{background-color:#DCDCDC; text-align:center; font-weight:bold; color:#333333; }
DIV.mContent{ overflow:hidden; word-break:break-all; width:100%; }
INPUT.cButton{ width:70px; }
</style> TABLE.style01{ width:100%; border-width:2px; border-color:#999999; border-collapse:collapse; padding: 0px 0px 0px 0px; margin: 0px 0px 0px 0px; table-layout:fixed; } 게시판의 가로 사이즈는, 사용하는 곳에 따라 가변폭이며, CSS에서 일괄적으로 변경하는 방법을 사용합니다. 참고로, 테이블의 첫번째 라인의 셀에 가로 사이즈(width)를 지정해 주되, 2번째 셀에 지정해주지 않는 방법을 이용했습니다. 따라서, 가로 사이즈를 변경시키면, 리스트의 제목셀, 본문의 문번 표기셀, 글 쓰기의 제목입력셀이 유동적으로 변경됩니다. 끝으로, 포함된 컨텐츠에 따라, 테이블 레이아웃이 흐트러지지 않도록 table-layout:fixed 를 사용했습니다. (FireFox v2.0의 경우 문제가 없으나, IE7의 경우 필요한 코드입니다.) 테이블 태그에는 다음과 같이 사용합니다. <table class="style01" rules="rows" frame="hsides"> DIV.mContent{ overflow:hidden; word-break:break-all; width:100%; } 본문보기 및 뎃글보기에 사용된 코드입니다. URL과 같은 띄어쓰기가 없는 장문의 내용이 입력되는 경우 및 악의적인 장문의 내용이 입력되면 줄바꾸기가 되지 않아 레이아웃이 무너지는 경우가 있습니다. 이 경우, IE에서는 word-break:break-all을 사용하면 문제없이 줄바꿈이 됩니다만, Netscape 및 FireFox의 경우는 적용되지 않습니다. 이를 위해 overflow:hidden을 사용하면, 가로크기의 한도를 넘어서는 내용은 보여주지 않도록 하여 박스레이아웃을 유지할 수 있습니다. (주, IE의 경우는 word-break 속성에 의해 줄바꿈이 되기 때문에 문제가 없으나, FireFox의 경우, 레이아웃은 유지하나 내용을 볼 수 없게 됩니다.) 내용이 들어가는 셀에 다음과 같은 코드로 사용합니다. <TD><Div class="mContent">Content ... Content ...</Div></TD>