creating tic tac toe table.
- id 쓰는방법 (5번째 td 에만 사방에 border 적용시키는 id 값 적용)
<!DOCTYPE html>
<head>
<title>TTT board</title>
<style type="text/css">
h1{
text-align: center;
}
td {
width: 100px;
height: 100px;
}
table{
margin: auto;
}
.vertical {
border-left: 1px solid black;
border-right: 1px solid black;
}
.horizontal {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
#square{
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
<tr>
<td class="horizontal"></td>
<td id="square"></td>
<td class="horizontal"></td>
</tr>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
</table>
</body>
</html>
- 복합 클래스 쓰기
<!DOCTYPE html>
<html>
<head>
<title>TTT Board</title>
<style type="text/css">
h1 {
text-align: center;
}
table {
margin: auto;
}
td {
width: 100px;
height: 100px;
}
td:hover {
border: 1px solid grey;
}
.vertical {
border-left: 1px solid black;
border-right: 1px solid black;
}
.horizontal {
border-top: 1px solid black;
border-bottom: 1px solid black;
}
</style>
</head>
<body>
<h1>Tic Tac Toe</h1>
<table>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
<tr>
<td class="horizontal"></td>
<td class="vertical horizontal"></td>
<td class="horizontal"></td>
</tr>
<tr>
<td></td>
<td class="vertical"></td>
<td></td>
</tr>
</table>
</body>
</html>
