아래 3개의 html파일의 네비게이션이 잘 동작하도록 만드세요
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Homepage</title>
</head>
<body>
<header>
<h1>My Website</h1>
<p>This is the slogan of the website.</p>
<!-- 네비게이션 -->
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<article>
<header>
<h2>Sample Article</h2>
<p>Posted on July 22, 2014</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<p>Posted in News category with 0 comments</p>
</footer>
</article>
<article>
<header>
<h2>Alternate Article Example</h2>
<p>Posted on July 20, 2014</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
<aside>
<h3>Glossary</h3>
<p>Example glossary terms would be placed here in reality.</p>
</aside>
<p>Ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<footer>
<p>Posted in News category with 3 comments</p>
</footer>
</article>
<aside>
<h2>Sidebar</h2>
<p>This is a place where we can include content relevant to the website as a whole.</p>
</aside>
<footer>
<p>© 2014 - This is the footer of the website.</p>
</footer>
</body>
</html>about.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
</head>
<body>
<header>
<h1>My Website</h1>
<p>This is the slogan of the website.</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<h2>About Us</h2>
<p>This is the “About Us” page. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Sidebar</h2>
<p>This is a place where we can include content relevant to the website as a whole.</p>
<footer>
<p>© 2014 - This is the footer of the website.</p>
</footer>
</body>
</html>contact.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Us</title>
</head>
<body>
<header>
<h1>My Website</h1>
<p>This is the slogan of the website.</p>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<h2>Contact Us</h2>
<p>This is the “Contact Us” page. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<h2>Sidebar</h2>
<p>This is a place where we can include content relevant to the website as a whole.</p>
<footer>
<p>© 2014 - This is the footer of the website.</p>
</footer>
</body>
</html>
픽서