게시판 리스트를 볼까 with css (2)

전체구조

<style>

* {

margin:0px;

padding: 0px;

font-size:11px;

color:#898989;

font-family: "wdu", "돋움";

}

/*

모든 태그에 대해서 공통으로 사용하겠다라는, 마진, 패딩, 폰트 등등..

*/

table { border:0; border-spacing:0px; border-collapse:collapse;}

/*

테이블을 이렇게 고정할꺼임 페이지에 <table>이 있을경우

*/

/* 목록 **************************************************************************************************************/

.boardList th { background-color:#dddddd; height:40px; color:#000000;}

.boardList td { height:16px; border-bottom:1px solid #e8e8e8; text-align:center; padding:8px 0 5px 0; }

.boardList .left { text-align:left; padding-left:5px; }

.boardList tr:hover, .boardList .overBg { background-color:#f7f7f7; }

.boardList .outBg { background-color:#ffffff; }

/*

class="boardList"

에서 td, tr등등 위 스타일대로 지정할것임

background-color : 바탕컬러, 높이값, 텍스트컬러

*/

.boardLineList th { background-color:#dddddd; height:40px; color:#000000; }

.boardLineList tr { background-color:#ffffff;}

.boardLineList td { height:16px; text-align:center; padding:8px 0 5px 0; word-wrap:break-word;}

.boardLineList .left { text-align:left; padding-left:5px; padding-right:5px; }

.boardLineList .right { text-align:right; padding-right:5px; padding-left:5px; height:20px;}

.boardLineList tr:hover, .boardLineList .overBg { background-color:#f7f7f7; }

.boardLineList .outBg { background-color:#ffffff; }

.boardLineList { background-color:#c5c5c5; }

/*

class="boardLineList"

에서 td, tr등등 위 스타일대로 지정할것임

background-color : 바탕컬러, 높이값, 컬러

word-wrap:break-word;

아마도 이걸 자주 사용할 듯 한데, 테이블에서 ffffffffffffffffffffffffffffffff 했을경우 테이블을 벗어나기 때문에 사이즈를 넘어가면 그냥 무조건 다음칸으로 즉 <br />한것처럼.

boardLineList .overBg { background-color:#f7f7f7; }

이건 마우스 오버 했을때 바탕색을 f7f7f7 로 바꾸기.

*/

</style>