전준호 / 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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
<style>
p.title {
background-color: #F0F;
color: #FFF;
width: 50%;
margin: 10px;
height: 50px;
font-size: 30px;
border-radius: 10px;
text-align: center;
}
img {
width: 50%;
margin-left: 10px;
}
div.content {
border-left: 20px #8dc68d solid;
outline: 1px #a0a0a0 solid;
padding: 2px;
width: 40%
}
a.album {
text-decoration: none;
}
li.albumlist {
list-style: none;
float: left;
width: 20%;
height: 100px;
padding-top: 70px;
margin: 10px;
background-color: #a0a0a0;
text-align: center;
}
</style>
</head>
<body>
<p class="title">
트와이스
</p>
<img src = "http://cfile30.uf.tistory.com/image/217F5C4B571DEB641CCE7B"/>
<ul>
<li>구성원
<ul>
<li>지효</li>
<li>나연</li>
<li>정연</li>
<li>모모</li>
<li>사나</li>
<li>미나</li>
<li>다현</li>
<li>채영</li>
<li>쯔위</li>
</ul>
</li></br>
<li>설명:
<div class="content">
트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹이다. 팀명의 의미는 눈으로 한 번, 귀로 한 번 감동을 준다는 뜻이다.
Mnet의 서바이벌 프로그램 SIXTEEN을 통해 멤버를 뽑았으며, 나연, 정연, 모모, 사나, 지효, 미나, 다현, 채영, 쯔위가 선발되어 지금의 트와이스 멤버로 활동하고 있다.
데뷔년도인 2015년부터 2016년에 걸쳐 엄청난 기록과 폭발적인 성장세를 보이며 대한민국 최고의 아이돌 그룹 중 하나로 자리매김하고 있다.
</div>
</li></br>
<li>소속사:
<a href = "http://www.jype.com/common/ArtistMain.aspx?LDiv=">
JYP 엔터테인먼트
</a>
</li></br>
<li>앨범
<ul>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">
THE STORY BEGINS
</a>
</li>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/PAGE_TWO">
PAGE TWO
</a>
</li>
<li class="albumlist">
<a class="album" href = "https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_2">
TWICEcoaster : LANE 1
</a>
</li>
</ul>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta charset="utf-8">
<style>
div.pagination {
}
a {
background-color: #a0a0a0;
color: #FFFFFF;
padding: 10px;
margin: 1px;
text-decoration: none;
float: left;
}
a:hover {
background-color: #606060;
color: #FFFF00;
}
a.direction {
color: #FFFF00;
}
a.current {
background-color: #1E90FF;
}
</style>
</head>
<body>
</br>
<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>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta charset="utf-8">
<style>
div.pagination {
}
a {
color: #1E90FF;
padding: 10px;
margin: 1px;
text-decoration: none;
float: left;
}
a:hover {
background-color: #FF0;
border-radius: 30px;
}
a.direction {
}
a.current {
color: #F0F;
}
</style>
</head>
<body>
</br>
<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>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
<meta charset="utf-8">
<style>
div#board {
border-top: 2px solid #a0a0a0;
border-bottom: 2px solid #a0a0a0;
}
div#header {
color: #FFF;
background-color: #bdb76b;
}
#header .coltitle {
color: #FFF;
}
div.row {
border-top: 1px solid #a0a0a0;
border-bottom: 1px solid #a0a0a0;
height: 35px;
padding-top: 10px;
}
div.colnumber {
float: left;
width: 7%;
text-align: center;
}
div.coltitle {
float: left;
width: 40%;
color: #1E90FF;
}
div.coldate {
float: left;
width: 20%;
text-align: center;
}
div.colname {
text-align: center;
}
</style>
</head>
<body>
<div id="board">
<div id="header">
<div class="row">
<div class="colnumber">번호</div>
<div class="coltitle">제목</div>
<div class="coldate">날짜</div>
<div class="colname">작성자</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="colnumber">10</div>
<div class="coltitle">10번째게시물</div>
<div class="coldate">2015-09-11</div>
<div class="colname">쯔위</div>
</div>
<div class="row">
<div class="colnumber">9</div>
<div class="coltitle">9번째게시물</div>
<div class="coldate">2014-08-21</div>
<div class="colname">지효</div>
</div>
<div class="row">
<div class="colnumber">8</div>
<div class="coltitle">8번째게시물</div>
<div class="coldate">2014-05-27</div>
<div class="colname">나연</div>
</div>
<div class="row">
<div class="colnumber">7</div>
<div class="coltitle">7번째게시물</div>
<div class="coldate">2014-03-15</div>
<div class="colname">모모</div>
</div>
<div class="row">
<div class="colnumber">6</div>
<div class="coltitle">6번째게시물</div>
<div class="coldate">2013-12-25</div>
<div class="colname">사나</div>
</div>
</div>
</div>
</body>
</html>