티스토리 뷰

코딩

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

Hello™ 2013. 7. 18. 09:00

아래는 전체 소스이다.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->

<title> New Document </title>


<style>

* {

margin:0px;

padding: 0px;

font-size:11px;

color:#898989;

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

}


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


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

.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; }



.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; }

</style>


</head>


<body>

<div id="body">

<div id="contents">


<div id="boardList">

<table width="100%" class="boardList" >

<colgroup>

<col width="5%">

<col width="5%">

<col width="7%">


<col width="*">

<col width="10%">

</colgroup>

<tr>

<th>코드</th>

<th>구분</th>

<th>영역</th>


<th>프로그램명</th>

<th>등록일</th>

</tr>


<tr>

<td>코드1</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

<tr>

<td>코드2</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

</table>

</div>


<br /><br /><br />


<div id="boardLineList">

<table width="100%" style="border-spacing:1px; border-collapse:separate;" class="boardLineList" summary="필드가 많아서 칸구분이 잘안될때 쓰는 표">

<colgroup>

<col width="5%">

<col width="5%">

<col width="7%">


<col width="*">

<col width="10%">

</colgroup>

<tr>

<th>코드</th>

<th>구분</th>

<th>영역</th>


<th>프로그램명</th>

<th>등록일</th>

</tr>

<tr>

<td>코드1</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

<td>코드2</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

</table>

</div>


</div>

</div>

</body>

</html>





화면 IE10


크롬 28 




하나씩 볼까?
페이지는 UTF-8로 인코딩 되어있음
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

그 다음 주석처리된 호환성모드
<!-- <meta http-equiv="X-UA-Compatible" content="IE=edge" /> -->

그리고 스타일.
이건 다음번 포스팅에서.~


** 막상 다 써놓고 보니 수정할게 생긴다.

위 소스처럼 table 해서 테이블에 대한 고정값을 넣고, 하단 테이블 생성에서 style="border-spacing:1px; border-collapse:separate;" 이런식으로 하면 나중에 수정할때 더 복잡해지니까.. (내가 생각해 보는 스타일은 최대한 html에서의 변경을 피하고, 전체적으로 컨트롤 하는 편이 낫다고 봄) 

아래 빨간색 처럼 변경하는게 나을듯하다.


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

.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; }

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


.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; }

.boardLineList.table {border-spacing:1px; border-collapse:separate;}



<div id="boardList">

<table width="100%" class="boardList table">

<colgroup>

<col width="5%">

<col width="5%">

<col width="7%">


<col width="*">

<col width="10%">

</colgroup>

<tr>

<th>코드</th>

<th>구분</th>

<th>영역</th>


<th>프로그램명</th>

<th>등록일</th>

</tr>


<tr>

<td>코드1</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

<tr>

<td>코드2</td>

<td>구분</td>

<td>영역</td>


<td>프로그램명</td>

<td>등록일</td>

</tr>

</table>

</div>




저작자표시