성준영 / 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
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>페이지네이션</title>
6 + <link rel="stylesheet" type="text/css" href="./style.css">
7 +</head>
8 +<body>
9 +<div class="pagination">
10 + <a href="#" class="direction"><span class="arrow">&lsaquo;</span> 이전</a>
11 + <a href="#">11</a>
12 + <a href="#">12</a>
13 + <a href="#">13</a>
14 + <a href="#">14</a>
15 + <a href="#">15</a>
16 + <a href="#">16</a>
17 + <a href="#">17</a>
18 + <a href="#">18</a>
19 + <a href="#">19</a>
20 + <a href="#">20</a>
21 + <a href="#" class="direction">다음 <span class="arrow">&rsaquo;</span></a>
22 +</div>
23 +</body>
24 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +
2 +a {
3 + padding: 10px 12px 10px 12px;
4 + margin: 5px -1px 5px -1px;
5 + background-color: dodgerblue;
6 + text-decoration : none;
7 + color: white;
8 +}
9 +
10 +a:hover{
11 + color: hotpink;
12 + background-color: midnightblue;
13 +}
14 +
15 +.direction {
16 + color: yellow;
17 +}
...\ No newline at end of file ...\ No newline at end of file
1 +<!DOCTYPE html>
2 +<html lang="en">
3 +<head>
4 + <meta charset="UTF-8">
5 + <title>CSS ex03</title>
6 + <link rel="stylesheet" type="text/css" href="./style.css">
7 +</head>
8 +<body>
9 +<div id="board">
10 + <div id="header">
11 + <div class="row">
12 + <div class="col number">번호</div>
13 + <div class="col title">제목</div>
14 + <div class="col date">날짜</div>
15 + <div class="col name">작성자</div>
16 + </div>
17 + </div>
18 +
19 + <div id="content">
20 + <div class="row">
21 + <div class="col number">10</div>
22 + <div class="col title">10번째 게시물</div>
23 + <div class="col date">2015-09-11</div>
24 + <div class="col name">리지</div>
25 + </div>
26 + <div class="row">
27 + <div class="col number">10</div>
28 + <div class="col title">10번째 게시물</div>
29 + <div class="col date">2015-09-11</div>
30 + <div class="col name">리지</div>
31 + </div>
32 + <div class="row">
33 + <div class="col number">10</div>
34 + <div class="col title">10번째 게시물</div>
35 + <div class="col date">2015-09-11</div>
36 + <div class="col name">리지</div>
37 + </div>
38 + </div>
39 +</div>
40 +</body>
41 +</html>
...\ No newline at end of file ...\ No newline at end of file
1 +#board {
2 + width: 80%;
3 + margin: 0 10% 0 10%;
4 +}
5 +
6 +#header {
7 + background-color: hotpink;
8 + overflow: auto;
9 +}
10 +
11 +.row {
12 + width: 100%;
13 + overflow: auto;
14 + border-bottom: 1px solid gainsboro;
15 +}
16 +
17 +div.number {
18 + width: 5%;
19 + text-align: center;
20 +}
21 +div.title {
22 + width: 40%;
23 +}
24 +div.date {
25 + width: 20%;
26 + text-align: center;
27 +}
28 +div.name {
29 + width: 20%;
30 + text-align: center;
31 +}
32 +
33 +#header > .row > .col {
34 + float: left;
35 + margin: 10px;
36 + font-weight: bold;
37 + color: white;
38 +}
39 +
40 +#content > .row > .col {
41 + float: left;
42 + margin: 10px;
43 +}