실습 1
실습 2
예제
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;
}
소스코드
Sound coding
공부 시간을 단축시키고, 덜 고통스럽도록 뮤직 비디오로 지금까지 수업을 만들었습니다. 틈틈히 보셔요. 전체 목록 바로가기
지금까지 배운 것만 가지고도 할 수 있는 일
아래 영상수업은 우리 수업의 양념입니다. CSS만으로도 할 수 있는 일이 궁금하신 분은 시도해보세요.
