링크의 상태에 대하여
링크는 하단과 같은 4가지 형태를 가지고 있습니다. 각각 상태에 따라 시각적으로 다른 형태를 가질수있습니다.
|
방문하지 않은 링크 |
a:link{} |
|
|
방문했던 링크 |
a:visited{} |
|
|
마우스 오버한 상태의 링크 |
a:hover{} |
a:link와 a:visited 뒤에 와야합니다. |
|
마우스 누른 상태에 링크 |
a:active{} |
a:hover 뒤에 와야합니다. |
예문
<style>
a:link {
color: green;
}/* unvisited link */
a:visited {
color: red;
}/* visited link */
a:hover {
color: black;
}/* mouse over link */
a:active {
color: blue;
} /* selected link */
</style>
표의 특징에 대하여
표에 대한 html의 기본 디자인은 표 전체의 테두리와 셀사이에 여백이 기본적으로 지정되어 있습니다.
이 여백을 무시하려면 <table> 태그에서 border-collapse의 값으로 collapse를 주면 됩니다.
예문
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style>
table{
border:2px solid gray;
border-collapse: collapse;
}
th{
background-color: #423211;
font-weight:bold;
}
th,td{
border:1px solid gray;
padding:3px;
}
</style>
</head>
<body>
<table>
<tr>
<th>번호</th>
<th>교제과목</th>
<th>교제과목수</th>
</tr>
<tr>
<td>01</td>
<td>국어</td>
<td>5</td>
</tr>
<tr>
<td>02</td>
<td>영어</td>
<td>7</td>
</tr>
<tr>
<td>03</td>
<td>수학</td>
<td>3</td>
</tr>
<tr>
<td>04</td>
<td>과학</td>
<td>7</td>
</tr>
</table>
</body>
</html>
'IT > CSS' 카테고리의 다른 글
| box-sizing에 대해 알아봅시다. (0) | 2015.03.13 |
|---|---|
| 배경 설정하기 (0) | 2015.03.12 |
| 폰트(텍스트) 활용하기 (1) | 2015.03.10 |
| css로 텍스트 꾸미기 (2) | 2015.03.09 |
| css 선택자의 조합 (1) | 2015.03.09 |