1. 리스트로 메뉴 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>리스트로 메뉴 만들기</title>
<style>
ul{
background : olive;
margin : 0;
padding : 0;
width : 560px;
}
ul li{
list-style-type : none;
color : white;
display : inline-block;
margin : 5px;
padding : 0px 15px;
}
ul li:hover{
color : violet;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>Espresso</li>
<li>Cappuccino</li>
<li>Cafe Latte</li>
<li>F.A.Q</li>
</ul>
</body>
</html>2. 성적표 출력
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>표 응용</title>
<style>
table{
border-collapse: collapse;
}
td,th{
text-align : left;
width : 100px;
height : 20px;
padding : 5px;
}
thead,tfoot{
background : darkgrey;
color : yellow;
}
tr:nth-child(even){
background : aliceblue;
}
tbody tr:hover{
background : pink;
}
</style>
</head>
<body>
<h3>2017년 1학기 성적</h3>
<hr>
<table>
<thead>
<tr><th>이름</th><th>HTML</th><th>CSS</th></tr>
</thead>
<tbody>
<tr><td>황기태</td><td>80</td><td>70</td></tr>
<tr><td>이재문</td><td>95</td><td>99</td></tr>
<tr><td>이병은</td><td>85</td><td>90</td></tr>
<tr><td>김남윤</td><td>50</td><td>40</td></tr>
</tbody>
<tfoot>
<tr><th>합</th><th>310</th><th>249</th></tr>
</tfoot>
</table>
</body>
</html>3. 회원 가입 폼 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>폼 스타일 주기</title>
<style>
input[type="text"]{
color : red;
}
input[type="text"]:hover{
background : aliceblue;
}
input[type="text"]:focus{
font-size : 120%;
}
</style>
</head>
<body>
<h1>CONTACT US</h1>
<hr>
<div>
Name <input class = "name" type = "text">
</div><br>
<div>
Email <input class = "email" type = "email" placeholder = "ryan@naver.com">
</div><br>
<div>
Comment <textarea width ="30px" height ="5px" place holder ="메시지를 남겨주세요"></textarea>
</div>
<div>
<input type = "submit" value="submit">
</div>
</body>
</html>4. 오디오 재생리스트 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>오디오 재생 리스트</title>
<style>
#number{
border : 1px solid yellowgreen;
}
#song{
border-bottom : 1px solid lightgrey;
width : 200px;
}
input{
margin : 2px;
}
input:hover{
color : magenta;
}
</style>
</head>
<body>
<h1>오디오 재생 리스트</h1>
<hr>
<table>
<tbody>
<tr><td id = "number">1</td><td id = "song"><strong>애국가</strong></td><td><input type = "button" value = "재생"></td><td><input type = "button" value = "중지"></td></tr>
<tr><td id = "number">2</td><td id = "song"><strong>Moon Glow</strong></td><td><input type = "button" value = "재생"></td><td><input type = "button" value = "중지"></td></tr>
<tr><td id = "number">3</td><td id = "song"><strong>Embraceable You</strong></td><td><input type = "button" value = "재생"></td><td><input type = "button" value = "중지"></td></tr>
</tbody>
</table>
</body>
</html>5. 리스트 꾸미기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>리스트 만들기</title>
<style>
ul{
background : url("christmastree.png");
list-style-type : square;
padding-right : 10px;
color : skyblue;
}
li:hover{
background : yellowgreen;
}
</style>
</head>
<body>
<h1>가보고 싶은 나라</h1>
<hr>
<ul>
<li>프랑스</li>
<li>독일</li>
<li>칠레</li>
<li>남아프리카공화국</li>
</ul>
</body>
</html>