index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
</body>
</html>
page_html.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>JavaScript란?</h2>
JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
</article>
</body>
</html>
page_op.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>연산자</h2>
계산을 할 때 사용되는 것입니다.
</article>
</body>
</html>
page_vc.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body>
<header>
<h1><a href="http://localhost/">JavaScript</a></h1>
</header>
<nav>
<ol>
<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
<li><a href="http://localhost/page_op.html">연산자</a></li>
</ol>
</nav>
<article>
<h2>변수와 상수</h2>
변수란
<ul>
<li>변하는 값</li>
<li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
</ul>
상수란
<ul>
<li>변하지 않는 값</li>
<li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
</ul>
</article>
</body>
</html>
style.css
header{
border-bottom:1px solid gray;
padding:20px;
}
nav {
border-right:1px solid gray;
width:200px;
height:600px;
float:left;
}
nav ol{
list-style:none;
}
article{
float:left;
padding:20px;
}
h2{
font-size:50px;
}
Style Bot(Crome)
부가기능을 설치하면 css를 추가하여 웹페이지 디자인을 사용자가 바꿀 수 있다.
