임호준 / WebPractice

Go to a project
Toggle navigation Toggle navigation pinning
임호준
0a2656e2 1 parent 1e1f21ca

0328 실습

Inline Side-by-side
Showing 6 changed files with 265 additions and 0 deletions
1 +h1.h1_1{
2 + background-color: pink;
3 + text-align: center;
4 + color: white;
5 + border-radius: 10px;
6 + font-size: 50px;
7 + font-family: serif;
8 +}
9 +#description{
10 + width: 800px;
11 + margin-left: 10px;
12 + border: 1px solid yellow;
13 + border-left: 30px solid yellow;
14 + padding-left: 10px;
15 + padding-top: 10px;
16 + padding-bottom: 10px;
17 + text-indent: 10px;
18 + text-align: justify;
19 +}
20 +ol{
21 + list-style-type: none;
22 +}
23 +li.li_1{
24 +/*float:left*/
25 + display:inline-block;
26 + text-align: center;
27 + width: 300px;
28 + background-color: gray;
29 + margin-left: 10px;
30 + padding: 20px;
31 +
32 +}
33 +li.li_1:hover{
34 + background-color: black;
35 +}
1 +body{
2 + text-align: center;
3 +}
4 +a{
5 + color: white;
6 + background-color: gray;
7 + border-right: 1px solid white;
8 + padding:20px;
9 +}
10 +a.direction{
11 + color: yellow;
12 + background-color: gray;
13 + border-right: 1px solid white;
14 + width: 20px;
15 +}
16 +a.current{
17 + color: white;
18 + background-color: blue;
19 + border-right: 1px solid white;
20 +}
21 +a:hover{
22 + background-color: black;
23 +}
1 +table{
2 + border-collapse: collapse;
3 + padding: 20px;
4 +}
5 +th{
6 + padding: 20px;
7 +}
8 +tr{
9 +
10 + border-bottom: 2px solid gray;
11 +}
12 +td{
13 + padding: 20px;
14 +}
15 +#number{
16 + text-align: center;
17 + color: white;
18 + background-color: green;
19 +}
20 +#title{
21 + text-align: left;
22 + color:white;
23 + background-color: green;
24 +}
25 +#date{
26 + text-align: center;
27 + color: white;
28 + background-color: green;
29 +}
30 +#user{
31 + text-align: center;
32 + color: white;
33 + background-color: green;.
34 +}
35 +td.number{
36 + text-align: center
37 +}
38 +td.title{
39 + text-align: left;
40 + color:blue;
41 +}
42 +td.date{
43 + text-align: center;
44 +}
45 +td.user{
46 + text-align: center;
47 +}
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 +
4 +<head>
5 + <link rel="stylesheet" href="css/ex06.css">
6 + <meta charset="utf-8">
7 + <title>1</title>
8 +
9 +</head>
10 +
11 +<body>
12 + <h1 class="h1_1">트와이스</h1>
13 + <p>
14 + <img src="twice.png">
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 +
29 + <li >설명</li>
30 + <div id="description">
31 + 트와이스는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해9명의 최종 멤버들이 선발되었으며, 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고,20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다.
32 +</div>
33 + <li>소속사 <a href="http://www.jype.com/" target="_blank"> jyp 엔터테이먼트 </a> </li>
34 + <li>앨범</li>
35 + <ol > <br>
36 + <li class="li_1"> <a href=""> THE STORY BEGINS </a></li>
37 + <li class="li_1"><a href="http://www.jype.com/ "> PAGE TWO </a></li>
38 + <li class="li_1"><a href="http://www.jype.com/ "> TWICEcoaster:LANE 1</a></li>
39 + </ol>
40 + </ul>
41 + </p>
42 +
43 +</body>
44 +
45 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + <title>practice6</title>
6 + <link rel="stylesheet" href="css/ex06.css">
7 + <style media="screen">
8 +
9 + </style>
10 + </head>
11 + <body>
12 + <div class="pagination">
13 + <a href="#" class="direction"><span class="arrow">&lsaquo;</span>이전</a>
14 + <a href="#">11</a>
15 + <a href="#">12</a>
16 + <a href="#">13</a>
17 + <a href="#">14</a>
18 + <a href="#" class="current">15</a>
19 + <a href="#">16</a>
20 + <a href="#">17</a>
21 + <a href="#">18</a>
22 + <a href="#">19</a>
23 + <a href="#">20</a>
24 + <a href="#" class="direction">다음<span class="arrow">&rsaquo;</span></a>
25 + </div>
26 +
27 +
28 + </body>
29 +</html>
1 +<!DOCTYPE html>
2 +<html lang="ko">
3 + <head>
4 + <meta charset="utf-8">
5 + <title>practice7</title>
6 + <link rel="stylesheet" href="css/ex07.css">
7 + <style media="screen">
8 +
9 + </style>
10 + </head>
11 + <body>
12 + <table>
13 + <tr>
14 + <th id="number">번호</th>
15 + <th id="title">제목</th>
16 + <th id="date">날짜</th>
17 + <th id="user">작성자</th>
18 + </tr>
19 + <tr>
20 + <td class="number">10</td>
21 + <td class="title">10번째게시물</td>
22 + <td class="date">2015-09-11</td>
23 + <td class="user">리지</td>
24 + </tr>
25 + <tr>
26 + <td class="number">9</td>
27 + <td class="title">9번째게시물</td>
28 + <td class="date">2015-09-11</td>
29 + <td class="user">리지</td>
30 + </tr>
31 + <tr>
32 + <td class="number">8</td>
33 + <td class="title">8번째게시물</td>
34 + <td class="date">2015-09-11</td>
35 + <td class="user">리지</td>
36 + </tr>
37 + <tr>
38 + <td class="number">7</td>
39 + <td class="title">7번째게시물</td>
40 + <td class="date">2015-09-11</td>
41 + <td class="user">리지</td>
42 + </tr>
43 + <tr>
44 + <td class="number">6</td>
45 + <td class="title">6번째게시물</td>
46 + <td class="date">2015-09-11</td>
47 + <td class="user">리지</td>
48 + </tr>
49 + <tr>
50 + <td class="number">5</td>
51 + <td class="title">5번째게시물</td>
52 + <td class="date">2015-09-11</td>
53 + <td class="user">리지</td>
54 + </tr>
55 + <tr>
56 + <td class="number">4</td>
57 + <td class="title">4번째게시물</td>
58 + <td class="date">2015-09-11</td>
59 + <td class="user">리지</td>
60 + </tr>
61 + <tr>
62 + <td class="number">3</td>
63 + <td class="title">3번째게시물</td>
64 + <td class="date">2015-09-11</td>
65 + <td class="user">리지</td>
66 + </tr>
67 + <tr>
68 + <td class="number">2</td>
69 + <td class="title">2번째게시물</td>
70 + <td class="date">2015-09-11</td>
71 + <td class="user">리지</td>
72 + </tr>
73 + <tr>
74 + <td class="number">1</td>
75 + <td class="title">1번째게시물</td>
76 + <td class="date">2015-09-11</td>
77 + <td class="user">리지</td>
78 + </tr>
79 +
80 +
81 +
82 +
83 +
84 + </table>
85 + </body>
86 +</html>