2017-1-WebServiceProgramming / Practice-Materials

Go to a project
Toggle navigation Toggle navigation pinning
신수용
285788dc 1 parent dcab6504

05 CSS example files

Inline Side-by-side
Showing 8 changed files with 364 additions and 0 deletions
1 +a {
2 + text-decoration: none;
3 + color: #2f58c2;
4 +}
5 +h1 {
6 + font-size: 3em;
7 + text-align: center;
8 + border: 2px solid #dd2c7c;
9 + background-color: #e442a8;
10 + width: 90%;
11 + border-radius: 10px;
12 + margin: 30px auto;
13 +}
14 +
15 +h1 > a {
16 + text-decoration: none;
17 + color: #fff;
18 +}
19 +
20 +#main-img {
21 + width: 100%
22 +}
23 +
24 +blockquote {
25 + border: 1px solid #f1f5a9;
26 + border-left: 30px solid #f1f5a9;
27 + padding: 10px;
28 + margin-left: 0px;
29 +}
30 +ul > li {
31 + margin: 10px;
32 +}
33 +
34 +span.type {
35 + font-size: 1.1em;
36 + margin-right: 2em;
37 + font-weight: bold;
38 +}
39 +
40 +.highlight {
41 + color: #e80859;
42 +}
43 +
44 +ol {
45 + margin: 1px 0;
46 + padding: 0;
47 + width: 100%;
48 +}
49 +
50 +ol > li {
51 + list-style: none;
52 + width: 200px;
53 + float: left;
54 + text-align: center;
55 + padding: 0 10px;
56 + line-height: 130px;
57 + background: #eee;
58 + margin: 10px 5px;
59 +}
1 +html{
2 + color: #000;
3 + background: #fff;
4 + padding: 20px 0;
5 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +.pagination {
9 + text-align: center;
10 + margin: 20px auto;
11 +}
12 +
13 +.pagination span.arrow{
14 + color: #246d9c;
15 + text-decoration: none;
16 + margin: 0.2em;
17 +}
18 +
19 +.pagination a{
20 + color: #246d9c;
21 + text-decoration: none;
22 + font-weight: bold;
23 + font-size: 14px;
24 + padding: 0.5em;
25 + margin: 0 1px 0 0;
26 + border-radius: 50%;
27 +}
28 +
29 +.pagination a.current {
30 + color: #8a1c5e;
31 +}
32 +
33 +.pagination a.direction{
34 + color: #246d9c;
35 +}
36 +
37 +.pagination a:hover,
38 +.pagination a.current:hover {
39 + background: gold;
40 + text-decoration: none;
41 + font-weight: bold;
42 +}
1 +html{
2 + color: #000;
3 + background: #fff;
4 + padding: 20px 0;
5 + font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +.pagination {
9 + text-align: center;
10 + margin: 20px auto;
11 + font-size: 0;
12 +}
13 +
14 +.pagination span.arrow{
15 + color: gold;
16 + text-decoration: none;
17 + margin: 0.2em;
18 +}
19 +
20 +.pagination a{
21 + color: #fff;
22 + background: #888;
23 + text-decoration: none;
24 + font-weight: bold;
25 + font-size: 14px;
26 + padding: 1em;
27 + margin: 0 1px 0 0;
28 +}
29 +
30 +.pagination a.current {
31 + background-color: #246d9c;
32 +}
33 +
34 +.pagination a.direction{
35 + color: gold;
36 +}
37 +
38 +.pagination a:hover,
39 +.pagination a.current:hover {
40 + background: #444;
41 + color: gold;
42 + text-decoration: none;
43 + font-weight: bold;
44 +}
1 +html{
2 + color:#000;
3 + background:#fff;
4 + padding:20px 0;
5 + font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
6 +}
7 +
8 +#board {
9 + width:100%;
10 + border-color:#888;
11 + border-width:2px;
12 + border-top-style:solid;
13 + border-bottom-style:solid;
14 + margin:0;
15 + padding:0;
16 +}
17 +
18 +div.row{
19 + border-color:#ccc;
20 + border-width:1px;
21 + border-top-style:solid;
22 + border-bottom-style:solid;
23 + overflow:auto;
24 +}
25 +
26 +div.col {
27 + text-align: center;
28 + margin: 1em;
29 + float: left;
30 +}
31 +div.number{
32 + width:50px;
33 +}
34 +
35 +div.title{
36 + color: #0b6cb3;
37 +}
38 +
39 +
40 +
41 +div.name{
42 + width:50px;
43 + float:right;
44 +}
45 +
46 +div.date{
47 + width:80px;
48 + float:right;
49 +}
50 +
51 +#header {
52 + background: olive;
53 + color: white;
54 + font-weight: bold;
55 +}
56 +
57 +#header div.title {
58 + color: white;
59 +}
1 +<!DOCTYPE html>
2 +<html>
3 +<head>
4 + <meta charset='utf-8'>
5 + <title>실습 CSS 01</title>
6 + <link rel="stylesheet" type="text/css" href="css/ex01.css" />
7 +</head>
8 +<body>
9 + <h1>
10 + <a href="http://twice.jype.com/">
11 + 트와이스
12 + </a>
13 + </h1>
14 + <img src="images/Twice.jpg">
15 + <ul>
16 + <li>구성원</li>
17 + <ul>
18 + <li> 지효 </li>
19 + <li> 나연 </li>
20 + <li> 정연 </li>
21 + <li> 모모 </li>
22 + <li> 사나 </li>
23 + <li> 미나 </li>
24 + <li> 다현 </li>
25 + <li> 채영 </li>
26 + <li> 쯔위 </li>
27 + </ul>
28 + <li> 설명:
29 + <blockquote>
30 + 트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
31 + 2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
32 + 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
33 + </blockquote>
34 + </li>
35 + <li>소속사:
36 + <a href="http://www.jype.com/" target="blank">
37 + JYP 엔터테인먼트
38 + </a>
39 + </li>
40 + <li>
41 + 앨범
42 + <ol>
43 + <li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
44 + <li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
45 + <li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
46 + </ol>
47 + </li>
48 + </ul>
49 +</body>
50 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>실습 5-2</title>
6 + <link href="./css/ex02-1.css" rel="stylesheet" type="text/css">
7 +</head>
8 +
9 +<body>
10 + <div class="pagination">
11 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
12 + <a href="#">11</a>
13 + <a href="#">12</a>
14 + <a href="#">13</a>
15 + <a href="#">14</a>
16 + <a href="#" class="current">15</a>
17 + <a href="#">16</a>
18 + <a href="#">17</a>
19 + <a href="#">18</a>
20 + <a href="#">19</a>
21 + <a href="#">20</a>
22 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
23 + </div>
24 +</body>
25 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 +<meta charset="utf-8">
5 + <title>실습 3-3</title>
6 + <link href="./css/ex03.css" rel="stylesheet" type="text/css">
7 +</head>
8 +
9 +<body>
10 + <div id="board">
11 + <div id="header">
12 + <div class="row">
13 + <div class="col number">번호</div>
14 + <div class="col title">제목</div>
15 + <div class="col date">날짜</div>
16 + <div class="col name">작성자</div>
17 + </div>
18 + </div>
19 +
20 + <div id="content">
21 + <div class="row">
22 + <div class="col number">10</div>
23 + <div class="col title">10번째게시물</div>
24 + <div class="col date">2015-09-11</div>
25 + <div class="col name">리지</div>
26 + </div>
27 + <div class="row">
28 + <div class="col number">9</div>
29 + <div class="col title">9번째게시물</div>
30 + <div class="col date">2014-08-21</div>
31 + <div class="col name">권보아</div>
32 + </div>
33 + <div class="row">
34 + <div class="col number">8</div>
35 + <div class="col title">8번째게시물</div>
36 + <div class="col date">2014-05-27</div>
37 + <div class="col name">산다라</div>
38 + </div>
39 + <div class="row">
40 + <div class="col number">7</div>
41 + <div class="col title">7번째게시물</div>
42 + <div class="col date">2014-03-15</div>
43 + <div class="col name">설현</div>
44 + </div>
45 + <div class="row">
46 + <div class="col number">6</div>
47 + <div class="col title">6번째게시물</div>
48 + <div class="col date">2013-12-25</div>
49 + <div class="col name">수지</div>
50 + </div>
51 + <div class="row">
52 + <div class="col number">5</div>
53 + <div class="col title">5번째게시물</div>
54 + <div class="col date">2013-10-01</div>
55 + <div class="col name">수영</div>
56 + </div>
57 + <div class="row">
58 + <div class="col number">4</div>
59 + <div class="col title">4번째게시물</div>
60 + <div class="col date">2010-10-01</div>
61 + <div class="col name">한승연</div>
62 + </div>
63 + <div class="row">
64 + <div class="col number">3</div>
65 + <div class="col title">3번째게시물</div>
66 + <div class="col date">2012-10-01</div>
67 + <div class="col name">정니콜</div>
68 + </div>
69 + <div class="row">
70 + <div class="col number">2</div>
71 + <div class="col title">2번째게시물</div>
72 + <div class="col date">2011-10-01</div>
73 + <div class="col name">김태희</div>
74 + </div>
75 + <div class="row">
76 + <div class="col number">1</div>
77 + <div class="col title">1번째게시물</div>
78 + <div class="col date">2010-12-01</div>
79 + <div class="col name">이민정</div>
80 + </div>
81 + </div>
82 +
83 + </div>
84 +</body>
85 +</html>