<table>을 이용하여 게시판 레이아웃을 만들어보았습니다.
마우스를 hovor하면 tomato 색상이 나오고, 짝수 게시글에 대해서는 푸른 배경색이 되도록 스타일링 했습니다.
<style type="text/css" media="screen">
* { margin:0; padding:0
}
body { font-family: '맑은 고딕' 돋움; font-size:0.75em; color:#333
}
.tbl-ex{
margin:100px auto 0px auto;
}
.tbl-ex, .tbl-ex th , .tbl-ex td{
border:1px solid gray;
border-width: 1px 0;
border-collapse: collapse;
text-align: center;
padding:8px;
}
.tbl-ex th{
background-color: #999;
font-size: 1.1em;
color: #fff;
border-width:2px 0;
}
.tbl-ex td{
border-style:dotted;
}
.tbl-ex tr:hover td{
background-color: tomato;
cursor : pointer;
}
.even{
background-color: highlight;
}
</style>
<body>
<table class="tbl-ex">
<tr>
<th>형식</th>
<th>선택자 이름</th>
<th>스타일 적용 요소</th>
<th>호환성</th>
</tr>
<tr>
<td>a</td>
<td>HTML</td>
<td>모든 HTML에 적용</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
</tr>
<tr class="even">
<td>.classname</td>
<td>클래스</td
<td>클래스로 정의해 준 HTML 태그</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
</tr>
<tr>
<td>a.classname</td>
<td>종속 클래스</td>
<td>특정 HTML 태그에 종속된 클래스</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
</tr>
<tr class="even">
<td>#idname</td>
<td>아이디</td>
<td>아이디로 정의해준 HTML 태그</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
</tr>
<tr>
<td>a#idname</td>
<td>종속아이디</td>
<td>특정 HTML 태그에 종속된 아이디</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS1</td>
</tr>
<tr class="even">
<td>*</td>
<td>전체 선택</td>
<td>모든 HTML 태그에 적용</td>
<td>IE4, FF1,Safari 1, 크롬 1,오페라 3.5, CSS2</td>
</tr>
</table>
</body>
'웹 프로그래밍 > ------ CSS' 카테고리의 다른 글
| [CSS] float(2) - 레이아웃 ( Holy Grail Layout ) (1) | 2018.04.04 |
|---|---|
| [CSS] float(1) - 개념 (0) | 2018.04.04 |
| [CSS] 포지션( Position ) 개념 (0) | 2018.04.04 |
| [CSS 활용] 로그인 form 예제 (0) | 2018.04.04 |
| [CSS 활용] 상단 탭( TAB ) 예제 (0) | 2018.04.04 |
| [CSS] 폰트( 제곱표현, 말줄임 ) (0) | 2018.04.04 |
| [CSS] 복합 셀렉터 (0) | 2018.04.04 |