Diff for "WebStandardsSolutions"

Differences between revisions 2 and 3
부제: 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">&#8212; 헤스키스 피어슨</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>
CategoryBookComputer