티스토리 뷰
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
//style입니다.
//모든 경우
* {
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
}
header {
background-color: #666666;
padding: 30px;
text-align: center;
font-size: 35px;
color: white;
}
nav {
float: left;
width: 20%;
height: 1500px;
background: #ccc;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
}
article {
float: left;
padding: 20px;
width: 70%;
background-color: #f1f1f1;
height: 300px;
}
section:after {
content: "";
display: table;
clear: both;
}
footer {
background-color: #777;
padding: 10px;
text-align: center;
color: white;
}
</style>
<title>Insert title here</title>
</head>
<body>
<header>
<h2>웹 프로그래밍</h2>
</header>
<section>
<nav>
<ul>
<li><a href="#id1">웹프로그래밍 구성 </a></li>
<li><a href="#id2">semantic이란</a></li>
<li><a href="#id3">form base 프로그래밍이란</a></li>
<li><a href="#id4">form base 프로그래밍이란</a></li>
<li><a href="#id5">form base 프로그래밍이란</a></li>
</ul>
</nav>
<article id="id1">
<h1>웹프로그래밍 구성</h1>
<p>웹에 내용을 표현하기 위하여 HTML5 + CSS3 + JAVAscript를 이용하여 내용을 표현</p>
</article>
<article id="id2">
<h1>semantic이란</h1>
<p>웹의 내용을 기계 뿐만 아니라 사람도 이해할 수 있는 구조로 프로그램이 하자는 의미의 표현법</p>
</article>
<article id="id3">
<h3>form base 프로그래밍이란</h3>
<p>웹프로그래밍에서 서버에 대화하는 client의 방법은 form에 서버로 전달할 내용을 입력한 다음 서버측에서
활성화될 페이지의 이름을 action에 붙여서 서버로 전달하게 되면 서버가 처리한 다음 클라이언트에 Response에
html5 파일을 달아서 보내게 되면 web browser에 표현된다 이를 form-base programming 이라
한다.</p>
</article>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>