임호준 / 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
h1.h1_1{
background-color: pink;
text-align: center;
color: white;
border-radius: 10px;
font-size: 50px;
font-family: serif;
}
#description{
width: 800px;
margin-left: 10px;
border: 1px solid yellow;
border-left: 30px solid yellow;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
text-indent: 10px;
text-align: justify;
}
ol{
list-style-type: none;
}
li.li_1{
/*float:left*/
display:inline-block;
text-align: center;
width: 300px;
background-color: gray;
margin-left: 10px;
padding: 20px;
}
li.li_1:hover{
background-color: black;
}
body{
text-align: center;
}
a{
color: white;
background-color: gray;
border-right: 1px solid white;
padding:20px;
}
a.direction{
color: yellow;
background-color: gray;
border-right: 1px solid white;
width: 20px;
}
a.current{
color: white;
background-color: blue;
border-right: 1px solid white;
}
a:hover{
background-color: black;
}
table{
border-collapse: collapse;
padding: 20px;
}
th{
padding: 20px;
}
tr{
border-bottom: 2px solid gray;
}
td{
padding: 20px;
}
#number{
text-align: center;
color: white;
background-color: green;
}
#title{
text-align: left;
color:white;
background-color: green;
}
#date{
text-align: center;
color: white;
background-color: green;
}
#user{
text-align: center;
color: white;
background-color: green;.
}
td.number{
text-align: center
}
td.title{
text-align: left;
color:blue;
}
td.date{
text-align: center;
}
td.user{
text-align: center;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="css/ex06.css">
<meta charset="utf-8">
<title>1</title>
</head>
<body>
<h1 class="h1_1">트와이스</h1>
<p>
<img src="twice.png">
<ul>
<li>구성원</li>
<ul>
<li> 지효 </li>
<li> 나연 </li>
<li> 정연 </li>
<li> 모모 </li>
<li> 사나 </li>
<li> 미나 </li>
<li> 다현 </li>
<li> 채영 </li>
<li> 쯔위 </li>
</ul>
<li >설명</li>
<div id="description">
트와이스는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해9명의 최종 멤버들이 선발되었으며, 2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고,20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다.
</div>
<li>소속사 <a href="http://www.jype.com/" target="_blank"> jyp 엔터테이먼트 </a> </li>
<li>앨범</li>
<ol > <br>
<li class="li_1"> <a href=""> THE STORY BEGINS </a></li>
<li class="li_1"><a href="http://www.jype.com/ "> PAGE TWO </a></li>
<li class="li_1"><a href="http://www.jype.com/ "> TWICEcoaster:LANE 1</a></li>
</ol>
</ul>
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>practice6</title>
<link rel="stylesheet" href="css/ex06.css">
<style media="screen">
</style>
</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="#" class="current">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>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>practice7</title>
<link rel="stylesheet" href="css/ex07.css">
<style media="screen">
</style>
</head>
<body>
<table>
<tr>
<th id="number">번호</th>
<th id="title">제목</th>
<th id="date">날짜</th>
<th id="user">작성자</th>
</tr>
<tr>
<td class="number">10</td>
<td class="title">10번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">9</td>
<td class="title">9번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">8</td>
<td class="title">8번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">7</td>
<td class="title">7번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">6</td>
<td class="title">6번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">5</td>
<td class="title">5번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">4</td>
<td class="title">4번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">3</td>
<td class="title">3번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">2</td>
<td class="title">2번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
<tr>
<td class="number">1</td>
<td class="title">1번째게시물</td>
<td class="date">2015-09-11</td>
<td class="user">리지</td>
</tr>
</table>
</body>
</html>