부제: The Markup and Style Handbook 번역본 : 실용예제로 배우는 웹표준.
책에 소개된 예제따라하기소스 와 그 [http://biohackers.net/test.html 페이지]
<html>
<style type="text/css">
<!--
#minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}
#minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}
#minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
font-size: 12px;
color: #9c9;
}
#minitabs a.active, #minitabs a:hover {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}
#minitabs a.hover {
color:696;
}
h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #666;
padding: 4px;
background: #ddd;
border-bottom: 2px solid #ccc;
}
table {
border-top: 1px solid #999;
border-left: 1px solid #999;
border-collapse: collapse;
}
caption {
font-family: Arial, sans-serif;
color: #993333;
padding-bottom: 6px;
}
th,td {
padding: 10px;
border-right: 1px solid #999;
border-bottom: 1px solid #999;
}
th {
font-family: Verdana, sans-serif;
background: #ccc;
}
blockquote {
width: 300px;
margin: 0;
padding: 0;
font-family: georgia, serif;
font-size: 150%;
letter-spacing: -1px;
line-height: 1em;
text-align: center;
color: #555;
background: #eee;
}
#quote {
margin: 0 10px 0 0;
padding: 20px 10px 10px 20px;
}
#author {
margin: 0 10px 0 0;
padding 0 0 10px 0;
color: #999;
font-size: 60%;
}
#quote strong {
color: #000;
font-weight: normal;
}
#thisform {
font-family: Georgia, serif;
font-size: 12px;
color: #999;
}
#thisform label {
font-family: Verdana, sans-serif;
font-weight: bold;
color: #660000;
}
#thisform fieldset {
border: 1px solid #ccc;
padding: 0 20px;
}
#thisform legend {
font-family: arial, sans-serif;
font-weight: bold;
font-size: 90%;
color: #666;
background: #eee;
border: 1px solid #ccc;
border-bottom-color: #999;
border-right-color: #999;
padding: 4px 8px;
-->
</style>
<body>
<ul id="minitabs">
<li><a href="/wiki">위키위키</a></li>
<li><a href="/mig" class="active">MIG 갤러리</a></li>
<li><a href="/blog">개인블로그</a></li>
<li><a href="/yongslib">개인프로젝트관리</a></li>
</ul>
<h1>아주 멋진 페이지제목</h1>
<table summary="이 표는 보스턴 레드삭스 월드시리즈 성적차트입니다.">
<caption>보스턴 레드삭스 월드시리즈 챔피언쉽</caption>
<tr>
<th id="year">연도</th>
<th id="opponent">상대팀</th>
<th id="record" abbr="성적">시즌 성적(승-패)</th>
</tr>
<tr>
<td>1918</td>
<td>시카고 컵스</td>
<td>75-51</td>
</tr>
<tr>
<td>1916</td>
<td>브룩클린 로빈스</td>
<td>75-51</td>
</tr>
<tr>
<td>1912</td>
<td>필라델피아 필리스</td>
<td>75-51</td>
</tr>
</table>
<blockquote cite="http://www.somwebsites.com/path">
<p id="quote"><strong>부적절한 인용</strong>이란 한번도 인용되지 않은 문장을 인용하는 것이다.</p>
<p id="author">— 헤스키스 피어슨</p>
</blockquote>
<form action="/path/to/script" id="thisform" method="post">
<fieldset>
<legend>로그인하기</legend>
<p><label for="name" accesskey="9">이름:</label><br />
<input type="text" id="name" name="name" tabindex="1" /></p>
<p><label for="email">이메일:</label><br />
<input type="text" id="email" name="email" tabindex="2" /></p>
<p><input type="checkbox" id="remember" name="remember" tabindex="3" />
<label for="remember">내정보 기억하기</label></p>
<p><input type="submit" value="확인" tabindex="4" /></p>
</fieldset>
</form>
</body>
</html>
BioHackersNet