<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/* 닫기 버튼을 클릭하였을 때 창이 닫히도록 이벤트 설정 */
$(function() {
$(".win_close").click(function(event) {
window.close();
});
});
</script>
</head>
<body>
<h2>포상 포인트</h2>
<!-- action:데이터 보낼 때 -->
<form action="#" method="post">
<fieldset>
<legend>입력 자료</legend>
<ol>
<li>
<!-- label과 input 태그의 id와 name을 갖게 해줘야 input이 label에 속하게 된다.-->
<label for="name">이름</label>
<!-- placeholder: text입력시 '이름 입력'은 사라진다. -->
<input type="text" name="name" autofocus="autofocus" id="name" placeholder="이름 입력">
</li>
<li>
<label for="point">포인트</label>
<!-- range:지원하는 프로그램, 오페라,크롬,파이어폭스 -->
<input type="range" min="0" max="10" name="point" value="5" id="point">
</li>
<li>
<label for="email">EMail 연락처</label>
<input type="email" name="email" id="email">
</li>
<li>
<input type="submit" value="전송">
</li>
<li>
<input type="button" value="닫기" class="win_close">
</li>
</ol>
</fieldset>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<style type="text/css">
body{ width:960px; margin:15px auto; font-family:"맑은 고딕",Arial; }
p{ margin:0 0 20px 0; }
p,li{ line-height:20px; }
header#page_header{ width:100%; }
header#page_header nav ul,#page_footer nav ul{ list-style:none; margin:0; padding:0; }
/* inline: 수평정렬 */
#page_header nav ul li,footer#page_footer nav ul li{ padding:0; margin:0 20px 0 0; display:inline; }
section#posts{ float:left; width:74%; background-color:#ccffff; }
/* float: 어느 쪽에 위치를 정렬할 것인지 정의 */
section#posts aside{ float:right; width:35%; margin-left:5%; font-size:20px; line-height:40px; background-color:#ffccff; }
section#sidebar{ float:left; width: 25%;}
/* clear: 이전에 적용된 float 속성을 초기화 시킨다. */
footer#page_footer{ clear:both; width:100%; display:block; text-align:center; background-color:#ffffcc; }
</style>
<script type="text/javascript">
$(function() {
$(".popup").click(function(event) {
/* 디폴트 이벤트 리스너를 작동하지 않도록 한다. */
event.preventDefault();
var href = $(this).attr("href");
var width = $(this).attr("data-width");
var height = $(this).attr("data-height");
//alert("href="+href+",width="+width+",height="+height);
window.open(href, "popup", "height="+height+",width="+width);
});
});
</script>
</head>
<body>
<header id="page_header">
<h1>대한민국 교육센터</h1>
<nav>
<ul>
<!-- HTML5에선 javascript이면 파일로 인식 하지 않기 위해 앞에 javascript라고 써 줘야 한다. -->
<li><a href="javascript:history.back()">이전글</a></li>
<li><a href="http://www.naver.com">성공사례</a></li>
</ul>
</nav>
</header>
<section id="posts">
<article class="post">
<header>
<h2>학습에 대한 동기 부여</h2>
<p>
작성: 홍길동<br />
2012년 9월 4일
</p>
</header>
<!-- 광고나 부가 설명 -->
<aside>
<!-- " = " -->
<p>" 자신의 스펙 향상을 위해 최선을 다해야 합니다. "</p>
</aside>
<p>형제들이 집안에서는 서로 다투는 일이 있지만 외부에서 침략해오면 일치단결해서 외세를 물리친다. -시경</p>
<p>가장 좋은 것은 아예 태어나지 않는 것이다. 죽음, 그것은 길고 싸늘한 밤에 불과하다. 그리고 삶은 무더운 낮에 불과하다. -하이네</p>
<p>서로를 사랑하면 살 것이요, 서로 싸우면 죽을 것이다. -안창호</p>
<footer>
<p><a href="#"><i>작성자 정보</i></a></p>
</footer>
</article>
</section>
<section id="sliderbar">
<nav>
<h3>학습관련 글</h3>
<ul>
<li><a href="#">프로그래밍</a></li>
<li><a href="#">디자인</a></li>
<li><a href="#">데이터베이스</a></li>
</ul>
</nav>
</section>
<footer id="page_footer">
<p>© 한빛 교육정보센터</p>
<nav>
<ul>
<li><a href="#">홈페이지</a></li>
<li><a href="#">회사소개</a></li>
<li><a href="#">관련 제휴 업체</a></li>
</ul>
</nav>
인재 정보 관리:<a href="point.html" data-width="250" data-height="350" class="popup">포상 포인트 정책</a>
</footer>
</body>
</html>
