성준영 / webservice-practices

Go to a project
Toggle navigation Toggle navigation pinning
성준영
e515a55c 1 parent de2381b3

테이블 만들기 css

Inline Side-by-side
Showing 6 changed files with 125 additions and 0 deletions
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>페이지네이션</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div class="pagination">
<a href="#" class="direction"><span class="arrow">&lsaquo;</span> 이전</a>
<a href="#">11</a>
<a href="#">12</a>
<a href="#">13</a>
<a href="#">14</a>
<a href="#">15</a>
<a href="#">16</a>
<a href="#">17</a>
<a href="#">18</a>
<a href="#">19</a>
<a href="#">20</a>
<a href="#" class="direction">다음 <span class="arrow">&rsaquo;</span></a>
</div>
</body>
</html>
\ No newline at end of file
a {
padding: 10px 12px 10px 12px;
margin: 5px -1px 5px -1px;
background-color: dodgerblue;
text-decoration : none;
color: white;
}
a:hover{
color: hotpink;
background-color: midnightblue;
}
.direction {
color: yellow;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS ex03</title>
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<div id="board">
<div id="header">
<div class="row">
<div class="col number">번호</div>
<div class="col title">제목</div>
<div class="col date">날짜</div>
<div class="col name">작성자</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="col number">10</div>
<div class="col title">10번째 게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
<div class="row">
<div class="col number">10</div>
<div class="col title">10번째 게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
<div class="row">
<div class="col number">10</div>
<div class="col title">10번째 게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
</div>
</div>
</body>
</html>
\ No newline at end of file
#board {
width: 80%;
margin: 0 10% 0 10%;
}
#header {
background-color: hotpink;
overflow: auto;
}
.row {
width: 100%;
overflow: auto;
border-bottom: 1px solid gainsboro;
}
div.number {
width: 5%;
text-align: center;
}
div.title {
width: 40%;
}
div.date {
width: 20%;
text-align: center;
}
div.name {
width: 20%;
text-align: center;
}
#header > .row > .col {
float: left;
margin: 10px;
font-weight: bold;
color: white;
}
#content > .row > .col {
float: left;
margin: 10px;
}