<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> <!-- html5 세팅 -->
<html>
<head>
<meta charset="UTF-8">
<meta name ="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Insert title here</title>
</head>
<body>
<div class="container">
<!--  <h1>h1 Bootstrap heading (36px)</h1>
	<h2>h2 Bootstrap heading (30px)</h2>
	<h3>h3 Bootstrap heading (24px)</h3>
	<h4>h4 Bootstrap heading (18px)</h4>
	<h5>h5 Bootstrap heading (14px)</h5>
	<h6>h6 Bootstrap heading (12px)</h6>
	
	<h1>Lighter, Secondary Text</h1>
	<p> small 태그는 좀 더 밝게 표시</p>
	<h1>h1 heading <small>secondary text</small></h1>
	<h2>h2 heading <small>secondary text</small></h2>
	<h3>h3 heading <small>secondary text</small></h3>
	<h4>h4 heading <small>secondary text</small></h4>
	<h5>h5 heading <small>secondary text</small></h5>
	<h6>h6 heading <small>secondary text</small></h6>
	
	<H1>Highlight Text</H1>
	<p>mark 태그 <mark>highlight</mark> 사용</p>

	<h1>약어</h1>
	<p> abbr 태그는 약어표시 설명에 사용</p>
	<p>The <abbr title="World Health Organize"></abbr>founded in 1948</p>
	
	<h1>Keyboard Inputs</h1>
	<p> kbd 태그는 키보드 입력 표시에 사용</p>
	<p> Use <kbd>ctrl + p</kbd> to open the Print dialog box.</p>
	
	<h1>Code Snippets</h1>
	<p>다음 HTML 태그 : <code>span</code>, <code>section</code>, and <code>div</code>는 문서의 섹션을 정의한다.</p>

	<h1>Multiple Code Lines</h1>
	<p>멀티 라인은 pre 태그를 사용 : </p>
	<pre>
	안녕하세요. 반갑습니다.
	부트스트랩               테스트입니다.
	멀티라인을 위한 pre 태그
	모습입니다.
	</pre>
	
	<h3><code>일반 테이블</code></h3>
	<table class="table table-hover">
	<tr>
	<td>성</td>
	<td>이름</td>
	<td>Email</td>
	</tr>
	<tr>
		<td>홍</td>
		<td>길동</td>
		<td>hong@example.com</td>
	</tr>
	<tr>
		<td>이</td>
		<td>지은</td>
		<td>lee@example.com</td>
	</tr>
	<tr>
		<td>김</td>
		<td>진석</td>
		<td>kim@example.com</td>
	</tr>
	</table>
	-->
	<div class="table-responsive">
		<table class="table">
			<tr>
				<td>#</td>
				<td>Firstname</td>
				<td>Lastname</td>
				<td>Age</td>
				<td>City</td>
				<td>Country</td>
			</tr>
			<tr>
				<td>1</td>
				<td>Anna</td>
				<td>Pitt</td>
				<td>35</td>
				<td>New York</td>
				<td>USA</td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>