이세구 / 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
a {
text-decoration: none;
color: #2f58c2;
}
h1 {
font-size: 3em;
text-align: center;
border: 2px solid #dd2c7c;
background-color: #e442a8;
width: 90%;
border-radius: 10px;
margin: 30px auto;
}
h1 > a {
text-decoration: none;
color: #fff;
}
#main-img {
width: 100%
}
blockquote {
border: 1px solid #f1f5a9;
border-left: 30px solid #f1f5a9;
padding: 10px;
margin-left: 0px;
}
ul > li {
margin: 10px;
}
span.type {
font-size: 1.1em;
margin-right: 2em;
font-weight: bold;
}
.highlight {
color: #e80859;
}
ol {
margin: 1px 0;
padding: 0;
width: 100%;
}
ol > li {
list-style: none;
width: 200px;
float: left;
text-align: center;
padding: 0 10px;
line-height: 130px;
background: #eee;
margin: 10px 5px;
}
html{
color: #000;
background: #fff;
padding: 20px 0;
font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
.pagination {
text-align: center;
margin: 20px auto;
}
.pagination span.arrow{
color: #246d9c;
text-decoration: none;
margin: 0.2em;
}
.pagination a{
color: #246d9c;
text-decoration: none;
font-weight: bold;
font-size: 14px;
padding: 0.5em;
margin: 0 1px 0 0;
border-radius: 50%;
}
.pagination a.current {
color: #8a1c5e;
}
.pagination a.direction{
color: #246d9c;
}
.pagination a:hover,
.pagination a.current:hover {
background: gold;
text-decoration: none;
font-weight: bold;
}
html{
color: #000;
background: #fff;
padding: 20px 0;
font: 14px/28px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
.pagination {
text-align: center;
margin: 20px auto;
font-size: 0;
}
.pagination span.arrow{
color: gold;
text-decoration: none;
margin: 0.2em;
}
.pagination a{
color: #fff;
background: #888;
text-decoration: none;
font-weight: bold;
font-size: 14px;
padding: 1em;
margin: 0 1px 0 0;
}
.pagination a.current {
background-color: #246d9c;
}
.pagination a.direction{
color: gold;
}
.pagination a:hover,
.pagination a.current:hover {
background: #444;
color: gold;
text-decoration: none;
font-weight: bold;
}
html{
color:#000;
background:#fff;
padding:20px 0;
font: 14px/20px "맑은 고딕", "Malgun Gothic", "굴림", "Gulim", Verdan, Arial, Tahoma;
}
#board {
width:100%;
border-color:#888;
border-width:2px;
border-top-style:solid;
border-bottom-style:solid;
margin:0;
padding:0;
}
div.row{
border-color:#ccc;
border-width:1px;
border-top-style:solid;
border-bottom-style:solid;
overflow:auto;
}
div.col {
text-align: center;
margin: 1em;
float: left;
}
div.number{
width:50px;
}
div.title{
color: #0b6cb3;
}
div.name{
width:50px;
float:right;
}
div.date{
width:80px;
float:right;
}
#header {
background: olive;
color: white;
font-weight: bold;
}
#header div.title {
color: white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>실습 CSS 01</title>
<link rel="stylesheet" type="text/css" href="css/ex01.css" />
</head>
<body>
<h1>
<a href="http://twice.jype.com/">
트와이스
</a>
</h1>
<img src="images/Twice.jpg">
<ul>
<li>구성원</li>
<ul>
<li> 지효 </li>
<li> 나연 </li>
<li> 정연 </li>
<li> 모모 </li>
<li> 사나 </li>
<li> 미나 </li>
<li> 다현 </li>
<li> 채영 </li>
<li> 쯔위 </li>
</ul>
<li> 설명:
<blockquote>
트와이스(2015년 10월 20일 ~ 현재)는 대한민국의 9인조 걸 그룹으로, JYP 엔터테인먼트 소속이다.
2015년 5월 5일부터 두 달동안 진행된 서바이벌 프로그램 Mnet 《SIXTEEN》을 통해 9명의 최종 멤버들이 선발되었으며,
2015년 10월 19일 타이틀곡 "OOH-AHH하게" 뮤직비디오와 음원을 공개하고, 20일 첫 번째 EP 앨범 《THE STORY BEGINS》 발매와 동시에 데뷔 쇼케이스로 데뷔하였다. 2016년 4월 25일 두 번째 EP 앨범 《PAGE TWO》를 발매하였고, 데뷔 1주년인 2016년 10월 24일 세 번째 EP 앨범 《TWICEcoaster : LANE 1》을 발매하였다.
</blockquote>
</li>
<li>소속사:
<a href="http://www.jype.com/" target="blank">
JYP 엔터테인먼트
</a>
</li>
<li>
앨범
<ol>
<li><a href="https://ko.wikipedia.org/wiki/THE_STORY_BEGINS">THE STORY BEGINS</a></li>
<li><a href="https://ko.wikipedia.org/wiki/PAGE_TWO">PAGE TWO</a></li>
<li><a href="https://ko.wikipedia.org/wiki/TWICEcoaster_:_LANE_1">TWICEcoaster : LANE 1</a></li>
</ol>
</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>실습 5-2</title>
<link href="./css/ex02-1.css" rel="stylesheet" type="text/css">
</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>실습 3-3</title>
<link href="./css/ex03.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="board">
<div id="header">
<div class="row">
<div class="col number">번호</div>
<div class="col title">제목</div>
<div class="col date">날짜</div>
<div class="col name">작성자</div>
</div>
</div>
<div id="content">
<div class="row">
<div class="col number">10</div>
<div class="col title">10번째게시물</div>
<div class="col date">2015-09-11</div>
<div class="col name">리지</div>
</div>
<div class="row">
<div class="col number">9</div>
<div class="col title">9번째게시물</div>
<div class="col date">2014-08-21</div>
<div class="col name">권보아</div>
</div>
<div class="row">
<div class="col number">8</div>
<div class="col title">8번째게시물</div>
<div class="col date">2014-05-27</div>
<div class="col name">산다라</div>
</div>
<div class="row">
<div class="col number">7</div>
<div class="col title">7번째게시물</div>
<div class="col date">2014-03-15</div>
<div class="col name">설현</div>
</div>
<div class="row">
<div class="col number">6</div>
<div class="col title">6번째게시물</div>
<div class="col date">2013-12-25</div>
<div class="col name">수지</div>
</div>
<div class="row">
<div class="col number">5</div>
<div class="col title">5번째게시물</div>
<div class="col date">2013-10-01</div>
<div class="col name">수영</div>
</div>
<div class="row">
<div class="col number">4</div>
<div class="col title">4번째게시물</div>
<div class="col date">2010-10-01</div>
<div class="col name">한승연</div>
</div>
<div class="row">
<div class="col number">3</div>
<div class="col title">3번째게시물</div>
<div class="col date">2012-10-01</div>
<div class="col name">정니콜</div>
</div>
<div class="row">
<div class="col number">2</div>
<div class="col title">2번째게시물</div>
<div class="col date">2011-10-01</div>
<div class="col name">김태희</div>
</div>
<div class="row">
<div class="col number">1</div>
<div class="col title">1번째게시물</div>
<div class="col date">2010-12-01</div>
<div class="col name">이민정</div>
</div>
</div>
</div>
</body>
</html>