Study Web Development

12월 30일

이전으로

HTML5

8. File API

8-3 FileReader 객체를 이용한 파일 데이터 읽기

  1. 새 HTML 파일 s02_image.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>이미지 미리보기</title>
<script type="text/javascript">
	window.onload = function() {
		var file = document.getElementById('file');
		var image = document.getElementById('image');
		
		// 이벤트 연결
		file.onchange = function() { // 파일을 선택하면 이벤트 발생
			if(!this.files[0]) { // 기존의 파일 선택을 취소한 경우
				alert('파일을 선택하세요!');
				image.style.display = 'none'; // <img> 태그를 숨김
				return;
			}
			
			// FileReader 객체를 생성하여 이미지 읽기
			var reader = new FileReader();
			reader.readAsDataURL(this.files[0]); // 이미지 데이터를 읽어 base64 인코딩 후 Data URL 형식의 문자열을 반환
			reader.onload = function() { // 이미지 데이터를 모두 읽어들이면 이벤트 발생
				image.src = reader.result; // <img> 태그의 src 속성에 Data URL을 대입
				image.style.display = ''; // <img> 태그를 노출시킴
			};
		};
	};
</script>
</head>
<body>
	<h2>이미지 미리보기</h2>
	<div>
		<img id="image" width="100" height="100" style="display: none;">
	</div>
	<input type="file" id="file" accept="image/gif, image/png, image/jpeg">
</body>
</html>

9. 캔버스

9-2 다양한 도형 그리기

사각형 그리기
  1. 새 폴더 ch19-canvas를 생성하고 새 HTML 파일 s01_basic.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<style type="text/css">
	#canvas {
		border: 1px solid #999; /* 영역을 확인하기 위해 스타일 지정 */
	}
</style>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		console.log(canvas.getContext);
		if(canvas.getContext) { // 문서 객체에 getContext 메서드가 존재하면 true
			var context = canvas.getContext('2d'); // 2차원 그리기 맥락을 반환
			
			context.fillStyle = 'rgb(200,0,0)'; // 색상 지정
			context.fillRect(10,10,100,100); // 사각형 만들기; 인자는 순서대로 x축 좌표, y축 좌표, width, height
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
  1. 새 HTML 파일 s02_fillRect.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			context.fillStyle = 'rgb(200,0,0)';
			context.fillRect(10,10,100,100);
			
			context.fillStyle = 'rgba(0,0,200,0.5)'; // 색상 및 alpha값(0.0=투명, 1.0=불투명) 지정
			context.fillRect(50,50,100,100);
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
경로 그리기
  1. 새 HTML 파일 s03_lineTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			/* 
			경로 그리기
			1. 경로 시작
			2. 선 그리기
			3. 경로 종료
			*/
			
			context.beginPath(); // 경로 시작
			
			context.moveTo(50,50); // 직선의 시작 좌표 지정
			context.lineTo(80,80); // 직선의 끝 좌표 지정
			
			context.moveTo(140,80);
			context.lineTo(170,50);
			
			context.moveTo(60,150);
			context.lineTo(170,150);
			
			context.closePath(); // 경로 끝
			
			context.stroke(); // 경로의 테두리를 표시; storke() 생략시 선이 그려지지 않음
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
  1. 새 HTML 파일 s04_lineTo.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			/* 
			경로 그리기
			1. 경로 시작
			2. 선 그리기
			3. 경로 종료
			*/
			
			// 색칠된 삼각형 그리기
			context.beginPath();
			context.moveTo(50,50); // 직선의 시작 좌표 지정
			context.lineTo(150,50); // (50,50)에서 (150,50)이 직선으로 연결됨
			context.lineTo(50,150); // (150,50)에서 (50,150)이 직선으로 연결됨
			context.closePath(); // 경로가 닫히면 마지막 좌표 (50,150)과 시작 좌표 (50,50)이 직선으로 연결됨
			context.fill(); // 경로 내부에 색 채우기
			
			// 테두리만 있는 삼각형 그리기
			context.beginPath();
			context.moveTo(80,80);
			context.lineTo(200,100);
			context.lineTo(100,200);
			context.closePath(); // 경로가 닫히면 (100,200)과 (80,80)도 직선으로 연결됨
			context.strokeStyle = 'rgb(200,0,0)'; // 경로 테두리의 색을 지정
			context.stroke();
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>
원, 호 그리기
  1. 새 HTML 파일 s05_arc.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			/* 
			arc() 메서드에서의 각도는 도(degree)로 표기하지 않고 라디안 값으로 표기함
			1라디안은 180/Math.PI이며 60도는 (Math.Pi/180)*60, 360도는 Math.PI*2
			
							1.5파이(270도)
								|
								|
								|
			1파이(180도) ------ 중심점 ------ 0파이, 2파이(0도, 360도)
								|
								|
								|
							0.5파이(90도)
			
			[예시] arc(x,y,r,startAngle,endAngle,anticlockwise)
			(x,y) 좌표에서 시작해서 반시계 방향(anticlockwise)으로 반지름(r)만큼의 원 그리기
			startAngle과 endAngle 매개 변수는 호의 시작 좌표와 끝 좌표를 의미
			*/
			
			// (70,70)에서 반시계 방향으로 반지름 20px인 원을 그리는데, 60도까지만 그리고 테두리만 표시
			// context.beginPath();
			context.arc(70,70,20,0,(Math.PI/180)*60,true);
			// context.closePath(); // 경로를 닫으면 호의 시작 좌표와 끝 좌표가 직선으로 연결됨
			context.stroke();
			
			// (130,110)에서 반시계 방향으로 반지름 50px인 원을 그리고 색을 채움
			context.beginPath(); // 경로를 새로 열지 않으면 이전에 그려진 호까지 같은 경로로 간주되어 색칠됨
			context.arc(130,110,50,0,Math.PI*2,true);
			context.closePath();
			context.fillStyle = 'rgb(0,200,200)'; // 경로 내부에 채울 색을 지정
			context.fill();
			context.stroke();
			
			// (190,70)에서 반시계 방향으로 반지름 20px인 원을 그리는데 110도에서 170도까지만 그리고 테두리만 표시
			context.beginPath(); // 경로를 새로 열지 않으면 이전에 그려진 원의 마지막 좌표 (130,110)과 새로 그리는 호의 시작 좌표 (190,70)이 직선으로 연결됨
			context.arc(190,70,20,(Math.PI/180)*110,(Math.PI/180)*170,true);
			context.stroke();
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

9-4 이미지 사용하기

  1. 새 HTML 파일 s06_image.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			var img = new Image(); // Image 객체 생성
			img.src = '../images/landscape.jpg'; // src 속성에 원본 이미지 정보를 저장
			img.onload = function() { // 원본 이미지 정보 읽기가 완료되면 onload 속성에 대입된 함수가 호출됨
				context.drawImage(img,10,10); // 캔버스에 원본 이미지 그리기; 인자는 순서대로 이미지 객체, x축 좌표, y축 좌표
			};
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="800" height="400"></canvas>
</body>
</html>
  1. 새 HTML 파일 s07_image.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			var img = new Image();
			img.src = '../images/landscape.jpg';
			img.onload = function() {
				context.drawImage(img,10,10);
				context.drawImage(img,10,500,200,100); // 이미지 객체, x축 좌표, y축 좌표, width, height
			};
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="800" height="700"></canvas>
</body>
</html>
  1. 임의의 이미지 파일 pattern.png를 C:\javaWork\workspace_jsp\HTML\src\main\webapp\images로 이동
  2. 새 HTML 파일 s08_pattern.html 생성
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>캔버스</title>
<script type="text/javascript">
	window.onload = function() {
		var canvas = document.getElementById('canvas');
		if(canvas.getContext) {
			var context = canvas.getContext('2d');
			
			var img = new Image();
			img.src = '../images/pattern.png';
			img.onload = function() {
				var pttn = context.createPattern(img, 'repeat'); // 지정한 이미지를 반복하는 패턴 생성
				context.fillStyle = pttn; // 채우기 스타일을 패턴으로 지정
				context.fillRect(0,0,300,500); // 패턴이 채워진 사각형 그리기
			};
		}
		else {
			alert('브라우저가 캔버스를 지원하지 않습니다!');
		}
	};
</script>
</head>
<body>
	<canvas id="canvas" width="500" height="300"></canvas>
</body>
</html>

Bootstrap

Download

https://getbootstrap.com/docs/3.4/getting-started/#download

  1. 새 다이나믹 웹 프로젝트 bootstrap을 생성
  2. Download Bootstrap을 선택하여 v3.4.1을 다운로드
  3. 압축 해제 후 css, fonts, js 폴더를 모두 src/main/webapp으로 이동
  4. 새 폴더 ch01-basic 생성 후 새 HTML 파일 s01_basic.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
<style type="text/css">
	div { /* 영역을 확인하기 위해 스타일 지정 */
		border:1px solid #ccc;
		background: #eee;
	}
</style>
</head>
<body>
	<div class="container">
		내용
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script> <!-- 부트스트랩 v4까지는 jQuery에 의존하기 때문에, 부트스트랩의 JavaScript 플러그인들보다 jQuery를 먼저 포함해야 함 -->
	<script type="text/javascript" src="../js/bootstrap.min.js"></script> <!-- JavaScript를 <head>가 아닌 <body>의 가장 끝에 위치시킬 경우, <body>의 내용을 모두 인식한 후에 JavaScript 코드가 실행되므로 window.onload = function() {};나 $(function(){};)을 작성할 필요 없음 -->
</body>
</html>

CSS

https://getbootstrap.com/docs/3.4/css/

그리드 시스템

http://bootstrapk.com/css/#grid

  1. 새 HTML 파일 s02_grid.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
<style type="text/css">
	[class*="col-"] { /* 속성 선택자를 이용해 col-로 시작하는 클래스들에 스타일 부여 */
		padding-top: 15px;
		padding-bottom: 150px;
		background-color: #eee;
		border: 1px solid #999;
	}
</style>
</head>
<body>
<!--
				매우 작은 기기		작은 기기			중간 기기			큰 기기
				모바일(<768px)	태블릿(>=768px)	데스크탑(>=992px)	데스크탑(>=1200px)
그리드 적용			항상				분기점보다 크면 적용
클래스 최대 너비		None(auto)		750px			970px			1170px
클래스 접두사		.col-xs-		.col-sm-		.col-md-		.col-lg-
컬럼 수			12
 -->
	<div class="container">
		<h4>12개 컬럼</h4>
		<div class="row">
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
			<div class="col-md-1">.col-md-1</div>
		</div>
		
		<h4>2개 컬럼</h4>
		<div class="row">
			<div class="col-md-8">.col-md-8</div>
			<div class="col-md-4">.col-md-4</div>
		</div>
		
		<h4>3개 컬럼</h4>
		<div class="row">
			<div class="col-md-3">.col-md-3</div>
			<div class="col-md-6">.col-md-6</div>
			<div class="col-md-3">.col-md-3</div>
		</div>
		
		<h4>2개 컬럼</h4>
		<div class="row">
			<div class="col-md-6">.col-md-6</div>
			<div class="col-md-6">.col-md-6</div>
		</div>
		
		<h4>모바일에서 컬럼들이 하나는 꽉 찬 너비로, 다른 하나는 절반 너비로 쌓임</h4>
		<div class="row">
			<div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
		
		<h4>컬럼들은 모바일에서 50% 너비로 시작하고 데스크탑에서는 33.3% 너비가 됨</h4>
		<div class="row">
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
			<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

타이포그래피

http://bootstrapk.com/css/#type http://bootstrapk.com/css/#helper-classes

  1. 새 HTML 파일 s03_typography.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>제목에는 &lt;small&gt; 요소를 넣으면 작고 연한 색의 부가 문구를 넣을 수 있음</h4>
		<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
		<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
		<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
		<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
		<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
		<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
		
		<h4>텍스트 정렬</h4>
		<p class="text-left">왼쪽 정렬</p>
		<p class="text-center">가운데 정렬</p>
		<p class="text-right">오른쪽 정렬</p>
		
		<h4>글자에 색상 지정</h4>
		<p class="text-muted">Hello World!</p> <!-- 회색 -->
		<p class="text-primary">Hello World!</p> <!-- 파란색 -->
		<p class="text-success">Hello World!</p> <!-- 초록색 -->
		<p class="text-info">Hello World!</p> <!-- 흐린 파란색 -->
		<p class="text-warning">Hello World!</p> <!-- 노란색 -->
		<p class="text-danger">Hello World!</p> <!-- 붉은색 -->
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

테이블

https://bootstrapk.com/css/#tables

  1. 새 HTML 파일 s04_table.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>.table 선택자를 사용하면 각 행에 위쪽 테두리 선만 있는 테이블이 만들어짐</h4>
		<table class="table">
			<tr>
				<th>#</th>
				<th>이름</th>
				<th>주소</th>
			</tr>
			<tr>
				<td>1</td>
				<td>너굴</td>
				<td>서울시 서대문구</td>
			</tr>
			<tr>
				<td>2</td>
				<td>콩돌</td>
				<td>서울시 마포구</td>
			</tr>
		</table>
		
		<h4>.table-striped 선택자를 추가하면 줄무늬 행 테이블이 됨</h4>
		<table class="table table-striped">
			<tr>
				<th>#</th>
				<th>이름</th>
				<th>주소</th>
			</tr>
			<tr>
				<td>1</td>
				<td>너굴</td>
				<td>서울시 서대문구</td>
			</tr>
			<tr>
				<td>2</td>
				<td>콩돌</td>
				<td>서울시 마포구</td>
			</tr>
		</table>
		
		<h4>.table-bordered 선택자를 추가하면 각 셀마다 테두리가 그려짐</h4>
		<table class="table table-bordered">
			<tr>
				<th>#</th>
				<th>이름</th>
				<th>주소</th>
			</tr>
			<tr>
				<td>1</td>
				<td>너굴</td>
				<td>서울시 서대문구</td>
			</tr>
			<tr>
				<td>2</td>
				<td>콩돌</td>
				<td>서울시 마포구</td>
			</tr>
		</table>
		
		<h4>행이나 셀에 맥락적인 클래스들을 추가하면 배경색이 지정됨</h4>
		<table class="table">
			<thead>
				<tr>
					<th>#</th>
					<th>이름</th>
					<th>주소</th>
				</tr>
			</thead>
			<tbody>
				<tr class="success"> <!-- 초록색 -->
					<td>1</td>
					<td>너굴</td>
					<td>서울시 서대문구 (.table-responsive로 감싸지 않으면 컬럼이 많거나 내용이 긴 테이블은 화면 크기가 작아질 때 디자인이 깨질 수 있음)</td>
					</tr>
				<tr class="info"> <!-- 파란색 -->
					<td>2</td>
					<td>바닐프티</td>
					<td>서울시 서대문구</td>
				</tr>
				<tr class="danger"> <!-- 붉은색 -->
					<td>3</td>
					<td>콩돌</td>
					<td>서울시 마포구</td>
				</tr>
				<tr class="warning"> <!-- 노란색 -->
					<td>4</td>
					<td>밤돌</td>
					<td>서울시 마포구</td>
				</tr>
			</tbody>
		</table>
		
		<h4>.table을 .table-responsive로 감싸면 작은 기기에서 수평 스크롤을 할 수 있는 반응형 테이블이 됨</h4>
		<div class="table-responsive">
			<table class="table">
				<thead>
					<tr>
						<th>#</th>
						<th>이름</th>
						<th>주소</th>
					</tr>
				</thead>
				<tbody>
					<tr class="success"> <!-- 초록색 -->
						<td>1</td>
						<td>너굴</td>
						<td>서울시 서대문구 (.table-responsive로 감싸지 않으면 컬럼이 많거나 내용이 긴 테이블은 화면 크기가 작아질 때 디자인이 깨질 수 있음)</td>
					</tr>
					<tr class="info"> <!-- 파란색 -->
						<td>2</td>
						<td>바닐프티</td>
						<td>서울시 서대문구</td>
					</tr>
					<tr class="danger"> <!-- 붉은색 -->
						<td>3</td>
						<td>콩돌</td>
						<td>서울시 마포구</td>
					</tr>
					<tr class="warning"> <!-- 노란색 -->
						<td>4</td>
						<td>밤돌</td>
						<td>서울시 마포구</td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

폼

http://bootstrapk.com/css/#forms

  1. 새 HTML 파일 s05_form.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>폼 태그</h4>
		<!-- 
		.form-control이 있는 모든 텍스트 기반의 <input>, <textarea>, 그리고 <select> 요소의 width는 기본적으로 100%; 최적의 여백을 위해서는 <label>과 .form-control을 .form-group으로 감싸야 함
		 -->
		<form>
			<div class="form-group">
				<label for="email">Email address</label>
				<input type="email" class="form-control" id="email" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label for="password">Password</label>
				<input type="password" class="form-control" id="password" placeholder="Enter password">
			</div>
			<div class="checkbox">
				<label><input type="checkbox">Check me out</label>
			</div>
			<button type="submit" class="btn btn-default">Sign in</button>
		</form>
		
		<h4>인라인 폼</h4>
		<!-- 
		.sr-only를 추가하면 <label>이 감춰짐
		 -->
		<form class="form-inline">
			<div class="form-group">
				<label class="sr-only" for="email2">Email address</label>
				<input type="email" class="form-control" id="email2" placeholder="Enter email">
			</div>
			<div class="form-group">
				<label class="sr-only" for="password2">Password</label>
				<input type="password" class="form-control" id="password2" placeholder="Enter password">
			</div>
			<button type="submit" class="btn btn-primary">Sign in</button>
		</form>
		
		<h4>수평 폼</h4>
		<!--
		.form-horizontal을 추가하여 수평 레이아웃을 만들고, 이 안에서 부트스트랩의 그리드 클래스를 사용하여 <label>과 .form-control들을 정렬; 그리드 행의 역할은 .form-group이 하므로 .row는 불필요 
		 -->
		<form class="form-horizontal">
			<div class="form-group">
				<label for="email3" class="col-sm-2 control-label">Email address</label>
				<div class="col-sm-10">
					<input type="email" class="form-control" id="email3" placeholder="Enter email">
				</div>
			</div>
			<div class="form-group">
				<label for="password3" class="col-sm-2 control-label">Password</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="password3" placeholder="Enter password">
				</div>
			</div>
			<div class="form-group"> <!-- 행 역할 -->
				<div class="col-sm-offset-2 col-sm-10"> <!-- 컬럼 10개 크기의 공간을 컬럼 2개 크기만큼 이동시킴 -->
					<button type="submit" class="btn btn-primary">Sign in</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

버튼

http://bootstrapk.com/css/#buttons

  1. 새 HTML 파일 s06_button.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>기본 버튼</h4>
		<button type="button" class="btn btn-default">Default</button>
		<button type="button" class="btn btn-primary">Primary</button> <!-- 파란색 -->
		<button type="button" class="btn btn-success">Success</button> <!-- 초록색 -->
		<button type="button" class="btn btn-info">Info</button> <!-- 연한 파란색 -->
		<button type="button" class="btn btn-warning">Warning</button> <!-- 노란색 -->
		<button type="button" class="btn btn-danger">Danger</button> <!-- 붉은색 -->
		
		<h4>크기 조정</h4>
		<button type="button" class="btn btn-default btn-lg">Default</button> <!-- 큰 버튼 -->
		<button type="button" class="btn btn-primary">Primary</button> <!-- 기본값 -->
		<button type="button" class="btn btn-success btn-sm">Success</button> <!-- 작은 버튼 -->
		<button type="button" class="btn btn-info btn-xs">Info</button> <!-- 매우 작은 버튼 -->
		
		<h4>.btn-block을 추가하면 너비가 상위 요소에 맞춰진 블럭 레벨 버튼이 만들어짐</h4>
		<div>
			<button type="button" class="btn btn-default btn-block">Default</button>
			<button type="button" class="btn btn-primary btn-block">Primary</button>
		</div>
		<div class="well" style="max-width:400px; margin:0 auto;"> <!-- .well은 padding과 배경색을 지정 -->
			<button type="button" class="btn btn-default btn-block">Default</button>
			<button type="button" class="btn btn-primary btn-block">Primary</button>
		</div>
		
		<h4>다양한 버튼</h4>
		<a href="#" class="btn btn-default">Link</a>
		<input type="button" value="Input" class="btn btn-success">
		<input type="submit" value="Submit" class="btn btn-info">
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>
  1. 새 HTML 파일 s07_buttonGroup.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>버튼 그룹</h4>
		<div class="btn-group">
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		
		<h4>크기 조정</h4>
		<div class="btn-group btn-group-lg"> <!-- 큰 버튼 그룹 -->
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<br><br>
		<div class="btn-group"> <!-- 기본값 -->
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<br><br>
		<div class="btn-group btn-group-sm"> <!-- 작은 버튼 그룹 -->
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
		<br><br>
		<div class="btn-group btn-group-xs"> <!-- 매우 작은 버튼 그룹 -->
			<button type="button" class="btn btn-default">Left</button>
			<button type="button" class="btn btn-default">Middle</button>
			<button type="button" class="btn btn-default">Right</button>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

이미지

http://bootstrapk.com/css/?#images

  1. 임의의 이미지 파일 Tulips.jpg, Penguins.jpg, Lighthouse.jpg, Koala.jpg를 C:\javaWork\workspace_jsp\bootstrap\src\main\webapp\images로 이동
  2. 새 HTML 파일 s08_image.html 생성
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>bootstrap</title>
<link rel="stylesheet" href="../css/bootstrap.min.css" type="text/css">
</head>
<body>
	<div class="container">
		<h4>기본 이미지</h4>
		<img src="../images/Koala.jpg" class="img-rounded">
		<img src="../images/Koala.jpg" class="img-circle">
		<img src="../images/Koala.jpg" class="img-thumbnail"> <!-- 반응형이 적용되어 화면 크기에 따라 이미지 크기도 조정됨 -->
		
		<h4>반응형 이미지</h4>
		<div class="row">
			<div class="col-sm-4">
				<img src="../images/Koala.jpg" class="img-rounded img-responsive">
			</div>
			<div class="col-sm-4">
				<img src="../images/Koala.jpg" class="img-rounded img-responsive">
			</div>
			<div class="col-sm-4">
				<img src="../images/Koala.jpg" class="img-rounded img-responsive">
			</div>
		</div>
	</div>
	<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
	<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>

다음으로