20190328/basicSemantic1.html

<!doctype html> <!-- basicSemantic1.html -->
<html>
<head>
  <meta charset="utf-8"/>
  <meta name="viewport"content="width=device-width,initial-scale=1"/>
  <style>
    header, nav, section, article, aside, footer
    {border:1px solid gray; margin:5px; padding:8px; width:1000px;}
    section {width:750px; float:left;}
    section section {width:725px; float:left;}                     
    aside {width:221px; float:left; line-height:30px;}
    footer {height:50px; clear:both;}
    nav ul {margin:0; padding:0;}
    nav ul li {display:inline; margin:5px;}
    aside ul {margin:0; padding:0;}
    aside ul li {display:block; margin:5px;}
    a:link { color:blue; background-color:transparent; text-decoration:none; }
    a:visited { color:pink; background-color:transparent; text-decoration:none; }
    a:hover { color:red; background-color:transparent; text-decoration:underline; }
    a:active { color:blue; background-color:transparent; text-decoration:none; }
  </style>
  <title>시멘틱 학습</title>
</head>
<body>
  <header><h2>실습을 환영합니다</h2></header>
  <nav>
    <ul>
      <li><a href="http://www.naver.com" target="_blank">네이버(새 윈도우)</a></li>
      <li><a href="anchor2.html" target="">사이트내 문서 이동</a></li>
      <li><a href="#chapter1" target="">제1장 이동(북마크 이동)</a></li>
    </ul>
  </nav>
  <section> <!-- main -->
    <section><h3 id="chapter1">제 1장</h3>
      <p>제 1장 입니다. 제 1장은 다음을 정의합니다.</p>
      <p>다음</p>
      <a href="http:://www.google.com" target="_blank">구글이동(새윈도우)</a><br/>
      <a href="anchor2.html">사이트내 문서 이동</a><br/>
      <a href="#chapter3">제 3장 문서내 이동(북마크 이동)</a><br/>
    </section>
    <section><h3 id="chapter2">제2장</h3>
      <p>제 2장 입니다. 제 2장은 무엇을 정의합니다.</p>
      <p>HTML과 같은 하이퍼미디어에서, 노드는 HTML문서, 멀티미디어 정보를 표현하는 기본단위이고, 링크는 노드간을 연결하며, 
         앵커는 링크의 출발점 또는 도착점을 의미합니다.</p>
      <p>제 1장에서 공부한 내용이 궁금하다면 다음을 <a href="#chapter1">클릭</a>하세요.</p>
    </section>
    <section><h3 id="chapter3">제3장</h3>
      <p>제 3장입니다. 제 3장은 무엇을 정의합니다.</p>
      <ul>
        <li><a href="http://www.naver.com" target="_blank">네이버(새 윈도우)</a></li>
        <li><a href="anchor2.html" target="">사이트내 문서 이동</a></li>
        <li><a href="#chapter1" target="">제1장 이동(북마크 이동)</a></li>
      </ul>
      <table>
        <tr><th>이동주소</th><th>사이트명</th><tr>설명</tr>
        <tr><td>구글</td><td><a href="http://www.naver.com">네이버</a></td><td>네이버</td></tr>
        <tr><td>사이트 다른 문서</td><td><a href="anchor2.html">html로 이동</a></td><td>anchor2</td></tr>
        <tr><td>제 1장</td><td><a href="#chapter1">제1장 이동(북마크 이동)</a></td><td>제 1장</td></tr>
      </table>
    </section>
  </section> <!-- /main -->
  <aside>
    <ul>
      <li>GooglePlus</li>
      <li>FacebookOne</li>
      <li>TwitterYou</li>
    </ul>
  </aside>
  <footer>
    <p>&copy; 2019 Made By Korea. All rights reserved.</p>
  </footer>
</body>
</html>