전준호 / ex

Go to a project
Toggle navigation Toggle navigation pinning
전준호
986d0b8b 1 parent 5b40909b

css example

Inline Side-by-side
Showing 4 changed files with 306 additions and 0 deletions
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <meta charset="utf-8">
5 + <link rel="stylesheet" type="text/css" href="mystyle.css"/>
6 +
7 + <style>
8 +
9 + p.title {
10 + background-color: #F0F;
11 + color: #FFF;
12 + width: 50%;
13 + margin: 10px;
14 + height: 50px;
15 + font-size: 30px;
16 + border-radius: 10px;
17 + text-align: center;
18 + }
19 +
20 + img {
21 + width: 50%;
22 + margin-left: 10px;
23 + }
24 +
25 + div.content {
26 + border-left: 20px #8dc68d solid;
27 + outline: 1px #a0a0a0 solid;
28 + padding: 2px;
29 + width: 40%
30 + }
31 +
32 + a.album {
33 +
34 + text-decoration: none;
35 + }
36 +
37 + li.albumlist {
38 + list-style: none;
39 + float: left;
40 + width: 20%;
41 + height: 100px;
42 + padding-top: 70px;
43 + margin: 10px;
44 + background-color: #a0a0a0;
45 + text-align: center;
46 + }
47 +
48 + </style>
49 +</head>
50 +<body>
51 + <p class="title">
52 + 트와이스
53 + </p>
54 +
55 + <img src = "http://cfile30.uf.tistory.com/image/217F5C4B571DEB641CCE7B"/>
56 +
57 + <ul>
58 + <li>구성원
59 + <ul>
60 + <li>지효</li>
61 + <li>나연</li>
62 + <li>정연</li>
63 + <li>모모</li>
64 + <li>사나</li>
65 + <li>미나</li>
66 + <li>다현</li>
67 + <li>채영</li>
68 + <li>쯔위</li>
69 + </ul>
70 + </li></br>
71 + <li>설명:
72 + <div class="content">
73 + 트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹이다. 팀명의 의미는 눈으로 한 번, 귀로 한 번 감동을 준다는 뜻이다.
74 + Mnet의 서바이벌 프로그램 SIXTEEN을 통해 멤버를 뽑았으며, 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위가 선발되어 지금의 트와이스 멤버로 활동하고 있다.
75 + 데뷔년도인 2015년부터 2016년에 걸쳐 엄청난 기록과 폭발적인 성장세를 보이며 대한민국 최고의 아이돌 그룹 중 하나로 자리매김하고 있다.
76 + </div>
77 + </li></br>
78 + <li>소속사:
79 + <a href = "http://www.jype.com/common/ArtistMain.aspx?LDiv=">
80 + JYP 엔터테인먼트
81 + </a>
82 + </li></br>
83 + <li>앨범
84 + <ul>
85 + <li class="albumlist">
86 + <a class="album" href = "https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">
87 + THE STORY BEGINS
88 + </a>
89 + </li>
90 + <li class="albumlist">
91 + <a class="album" href = "https://ko.wikipedia.org/wiki/PAGE_TWO">
92 + PAGE TWO
93 + </a>
94 + </li>
95 + <li class="albumlist">
96 + <a class="album" href = "https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_2">
97 + TWICEcoaster : LANE 1
98 + </a>
99 + </li>
100 + </ul>
101 +
102 + </li>
103 + </ul>
104 +</body>
105 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <link rel="stylesheet" type="text/css" href="mystyle.css" />
5 + <meta charset="utf-8">
6 + <style>
7 + div.pagination {
8 +
9 + }
10 +
11 + a {
12 + background-color: #a0a0a0;
13 + color: #FFFFFF;
14 + padding: 10px;
15 + margin: 1px;
16 + text-decoration: none;
17 + float: left;
18 + }
19 +
20 + a:hover {
21 + background-color: #606060;
22 + color: #FFFF00;
23 + }
24 +
25 + a.direction {
26 + color: #FFFF00;
27 + }
28 +
29 + a.current {
30 + background-color: #1E90FF;
31 + }
32 +
33 + </style>
34 +</head>
35 +<body>
36 +</br>
37 + <div class="pagination">
38 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
39 + <a href="#">11</a>
40 + <a href="#">12</a>
41 + <a href="#">13</a>
42 + <a href="#">14</a>
43 + <a href="#" class="current">15</a>
44 + <a href="#">16</a>
45 + <a href="#">17</a>
46 + <a href="#">18</a>
47 + <a href="#">19</a>
48 + <a href="#">20</a>
49 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
50 + </div>
51 +</body>
52 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <link rel="stylesheet" type="text/css" href="mystyle.css" />
5 + <meta charset="utf-8">
6 + <style>
7 + div.pagination {
8 +
9 + }
10 +
11 + a {
12 + color: #1E90FF;
13 + padding: 10px;
14 + margin: 1px;
15 + text-decoration: none;
16 + float: left;
17 + }
18 +
19 + a:hover {
20 + background-color: #FF0;
21 + border-radius: 30px;
22 + }
23 +
24 + a.direction {
25 + }
26 +
27 + a.current {
28 + color: #F0F;
29 + }
30 +
31 + </style>
32 +</head>
33 +<body>
34 +</br>
35 + <div class="pagination">
36 + <a href="#" class="direction"><span class='arrow'>&lsaquo;</span>이전</a>
37 + <a href="#">11</a>
38 + <a href="#">12</a>
39 + <a href="#">13</a>
40 + <a href="#">14</a>
41 + <a href="#" class="current">15</a>
42 + <a href="#">16</a>
43 + <a href="#">17</a>
44 + <a href="#">18</a>
45 + <a href="#">19</a>
46 + <a href="#">20</a>
47 + <a href="#" class="direction">다음 <span class='arrow'>&rsaquo;</span></a>
48 + </div>
49 +</body>
50 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +<head>
4 + <link rel="stylesheet" type="text/css" href="mystyle.css" />
5 + <meta charset="utf-8">
6 + <style>
7 + div#board {
8 + border-top: 2px solid #a0a0a0;
9 + border-bottom: 2px solid #a0a0a0;
10 + }
11 +
12 + div#header {
13 + color: #FFF;
14 + background-color: #bdb76b;
15 + }
16 +
17 + #header .coltitle {
18 + color: #FFF;
19 + }
20 +
21 + div.row {
22 + border-top: 1px solid #a0a0a0;
23 + border-bottom: 1px solid #a0a0a0;
24 + height: 35px;
25 + padding-top: 10px;
26 + }
27 +
28 + div.colnumber {
29 + float: left;
30 + width: 7%;
31 + text-align: center;
32 + }
33 +
34 + div.coltitle {
35 + float: left;
36 + width: 40%;
37 + color: #1E90FF;
38 + }
39 +
40 + div.coldate {
41 + float: left;
42 + width: 20%;
43 + text-align: center;
44 + }
45 +
46 +
47 +
48 + div.colname {
49 + text-align: center;
50 + }
51 +
52 + </style>
53 +</head>
54 +<body>
55 + <div id="board">
56 + <div id="header">
57 + <div class="row">
58 + <div class="colnumber">번호</div>
59 + <div class="coltitle">제목</div>
60 + <div class="coldate">날짜</div>
61 + <div class="colname">작성자</div>
62 + </div>
63 + </div>
64 +
65 + <div id="content">
66 + <div class="row">
67 + <div class="colnumber">10</div>
68 + <div class="coltitle">10번째게시물</div>
69 + <div class="coldate">2015-09-11</div>
70 + <div class="colname">쯔위</div>
71 + </div>
72 + <div class="row">
73 + <div class="colnumber">9</div>
74 + <div class="coltitle">9번째게시물</div>
75 + <div class="coldate">2014-08-21</div>
76 + <div class="colname">지효</div>
77 + </div>
78 + <div class="row">
79 + <div class="colnumber">8</div>
80 + <div class="coltitle">8번째게시물</div>
81 + <div class="coldate">2014-05-27</div>
82 + <div class="colname">나연</div>
83 + </div>
84 + <div class="row">
85 + <div class="colnumber">7</div>
86 + <div class="coltitle">7번째게시물</div>
87 + <div class="coldate">2014-03-15</div>
88 + <div class="colname">모모</div>
89 + </div>
90 + <div class="row">
91 + <div class="colnumber">6</div>
92 + <div class="coltitle">6번째게시물</div>
93 + <div class="coldate">2013-12-25</div>
94 + <div class="colname">사나</div>
95 + </div>
96 + </div>
97 + </div>
98 +</body>
99 +</html>