20190327/basicSemantic.html

<!doctype html> <!-- basicSemantic.html -->
<html>
<head>
  <meta http-equiv="Content-Type"content="text/html; 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;}
    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;} 
  </style>
  <title>시멘틱 학습</title>
</head>
<body>
  <header>
    <h2>실습을 환영합니다</h2>
  </header>
  <nav>
    <ul>
      <li id="home">홈</li>
      <li id="intro">소개</li>
      <li id="server">서버</li>
    </ul>
  </nav>
<section id="displayArea">
</section>
<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>