Study Web Development

1월 3일

이전으로

Bootstrap

Components

드롭다운

http://bootstrapk.com/components/#dropdowns

  1. 새 HTML 파일 s09_dropdownMenu.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="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> <!-- caret 클래스는 작은 역삼각형을 추가함 -->
			<ul class="dropdown-menu">
				<li><a href="#">Action</a></li>
				<li><a href="#">Product</a></li>
				<li><a href="#">Info</a></li>
				<li class="divider"></li>
				<li><a href="#">About</a></li>
			</ul>
		</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/components/#navbar

  1. 새 HTML 파일 s10_navbar.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>
		<nav class="navbar navbar-default">
			<div class="navbar-header">
				<a class="navbar-brand" href="#">Star</a> <!-- 사이트명 -->
			</div>
			<ul class="nav navbar-nav"> <!-- 메뉴 -->
				<li class="active"><a href="#">Home</a></li>
				<li><a href="#">Game</a></li>
				<li><a href="#">Setting</a></li>
			</ul>
		</nav>
		
		<h4>드롭다운</h4>
		<nav class="navbar navbar-default">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <!-- class는 스타일 부여, data- 속성은 JavaScript와 연동되어 기능 부여 -->
					<span class="sr-only">Toggle navigation</span> <!-- 화면에는 렌더링되지 않고 소스 및 스크린 리더에서만 확인 가능한 문구 -->
					<span class="icon-bar"></span> <!-- 토글 버튼에 표시될 바 -->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Star</a> <!-- 사이트명 -->
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse"> <!-- data-target과 연동되어 토글 버튼을 눌렀을 때 collapse될 메뉴 -->
				<ul class="nav navbar-nav"> <!-- 메뉴 -->
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Shopping</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Info</a></li>
							<li><a href="#">Service</a></li>
						</ul>
					</li>
				</ul>
			</div>
		</nav>
		
		<h4>검색</h4>
		<nav class="navbar navbar-default">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex2-collapse"> <!-- data-target은 페이지 내에서 unique해야 함 -->
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a href="#" class="navbar-brand">Star</a> <!-- 사이트명 -->
			</div>
			
			<div class="collapse navbar-collapse navbar-ex2-collapse"> <!-- data-target과 연동되어 토글 버튼을 눌렀을 때 collapse될 메뉴 -->
				<ul class="nav navbar-nav"> <!-- 메뉴 -->
					<li><a href="#">Home</a></li>
					<li class="active"><a href="#">About</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="#">Product</a></li>
							<li><a href="#">Service</a></li>
							<li><a href="#">Contact</a></li>
							<li><a href="#">Global</a></li>
						</ul>
					</li>
				</ul>		
				<form class="navbar-form navbar-right"> <!-- 검색 창을 네비게이션 바 오른쪽에 표시 -->
					<div class="form-group">
						<input type="text" class="form-control" placeholder="search">
					</div>
					<button type="submit" class="btn btn-default">Submit</button>
				</form>
			</div>
		</nav>
	</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/components/#pagination

  1. 새 HTML 파일 s11_pagination.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>
		<ul class="pagination">
			<li><a href="#">&laquo;</a></li> <!-- « -->
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li> <!-- » -->
		</ul>

		<h4>비활성화 그리고 활성화</h4>
		<ul class="pagination">
			<li class="disabled"><a href="#">&laquo;</a></li> <!-- « -->
			<li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
			<li><a href="#">2</a></li>
			<li><a href="#">3</a></li>
			<li><a href="#">4</a></li>
			<li><a href="#">5</a></li>
			<li><a href="#">&raquo;</a></li> <!-- » -->
		</ul>

		<h4>크기</h4>
		<ul class="pagination pagination-lg"> <!-- 큰 크기 -->
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
		</ul>
		<ul class="pagination"> <!-- 기본 크기 -->
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
		</ul>
		<ul class="pagination pagination-sm"> <!-- 작은 크기 -->
			<li><a href="#">1</a></li>
			<li><a href="#">2</a></li>
		</ul>
		
		<h4>페이지 기본 예제</h4>
		<ul class="pager">
			<li><a href="#">Previous</a></li>
			<li><a href="#">Next</a></li>
		</ul>
	</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/components/#alerts

  1. 새 HTML 파일 s12_alert.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="alert alert-danger fade in"> <!-- 알림 창 스타일 부여; fade와 in은 사라질 때의 효과 -->
			<button type="button" class="close" data-dismiss="alert">&times;</button> <!-- 버튼을 누르면 알림 창이 사라지는 기능 부여 -->
			오늘은 황사 때문에 마스크를 꼭 착용해주세요!
		</div>
		
		<h4>알림 메시지</h4>
		<div class="alert alert-success">
			오늘은 <strong>황사</strong> 때문에 마스크를 꼭 착용해주세요!
		</div>
		<div class="alert alert-info">
			오늘은 <strong>황사</strong> 때문에 마스크를 꼭 착용해주세요!
		</div>
		<div class="alert alert-warning">
			오늘은 <strong>황사</strong> 때문에 마스크를 꼭 착용해주세요!
		</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>

JavaScript

모달

http://bootstrapk.com/javascript/#modals

  1. 새 HTML 파일 s13_modal.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>	
		<a href="#myModal" class="btn btn-primary" data-toggle="modal">모달 보여주기</a> <!-- 버튼을 누르면 모달 창이 나타남; 부모 영역 클릭시 모달 창은 사라짐 -->
		
		<!-- Modal -->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h3 id="myModalLabel">Modal Header</h3>
					</div>
					<div class="modal-body">
						<p>Modal Content</p>
					</div>
					<div class="modal-footer">
						<button class="btn" data-dismiss="modal">Close</button>
						<button class="btn btn-primary">Save Changes</button>
					</div>
				</div>
			</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>
  1. 새 HTML 파일 s14_modal_login.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>	
		<a href="#Login" class="btn btn-primary" data-toggle="modal">로그인</a> <!-- 버튼을 누르면 모달 창이 나타남; 부모 영역 클릭시 모달 창은 사라짐 -->
		
		<!-- Modal -->
		<div class="modal fade" id="Login">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal">&times;</button>
						<h3 id="myModalLabel">로그인</h3>
					</div>
					<div class="modal-body">
						<form action="1.jsp" method="post">
							<div class="form-group">
								<label class="sr-only" for="email">아이디</label>
								<input class="form-control" type="text" id="email" placeholder="아이디">
							</div>
							<div class="form-group">
								<label class="sr-only" for="password">비밀번호</label>
								<input class="form-control" type="password" id="password" placeholder="비밀번호">
							</div>
							<input class="btn btn-primary" type="submit" value="로그인">
						</form>
					</div>
				</div>
			</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>
	<script type="text/javascript">
		$('#Login').modal(); /* modal() 메서드를 호출하면 화면 실행시 모달 창이 바로 표시됨 */
	</script>
</body>
</html>

캐러셀

http://bootstrapk.com/javascript/#carousel

  1. 새 HTML 파일 s14_carousel.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>Carousel</h4>	
		<div class="row">
			<div class="col-md-9">
				<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
					<!-- Indicators -->
					<ol class="carousel-indicators">
						<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
						<li data-target="#carousel-example-generic" data-slide-to="1"></li>
						<li data-target="#carousel-example-generic" data-slide-to="2"></li>
						<li data-target="#carousel-example-generic" data-slide-to="3"></li>
					</ol>
					
					<!-- 이미지 링크 -->
					<div class="carousel-inner">
						<div class="item active">
							<img src="../images/Koala.jpg" alt="First slide">
							<div class="carousel-caption">
								<h3>Koala</h3>
								<p>Animal World!</p>
							</div>
						</div>
						<div class="item">
							<img src="../images/Lighthouse.jpg" alt="Second slide">
							<div class="carousel-caption">
								<h3>Lighthouse</h3>
								<p>Animal World!</p>
							</div>
						</div>
						<div class="item">
							<img src="../images/Penguins.jpg" alt="Third slide">
							<div class="carousel-caption">
								<h3>Penguins</h3>
								<p>Animal World!</p>
							</div>
						</div>
						<div class="item">
							<img src="../images/Tulips.jpg" alt="Fourth slide">
							<div class="carousel-caption">
								<h3>Tulips</h3>
								<p>Animal World!</p>
							</div>
						</div>
					</div> <!-- end of carousel-inner -->
					
					<!-- Controls -->
					<a class="left carousel-control" href="#carousel-example-generic" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
					<a class="right carousel-control" href="#carousel-example-generic" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
				</div>
			</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>

Main Page

  1. 새 폴더 ch02-sample 생성하고 새 HTML 파일 s01_sample.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">
		<!-- 상단 네비게이션 시작 -->
		<div class="row">
			<nav class="navbar navbar-default">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
					<a class="navbar-brand">서울</a>
				</div>
				<!-- 상단 메뉴 -->
				<div class="collapse navbar-collapse">
					<ul class="nav navbar-nav">
						<li class="active"><a href="#">Home</a></li>
						<li><a href="#">Game</a></li>
						<li><a href="#">Setting</a></li>
					</ul>
					<form action="1.jsp" class="navbar-form navbar-right">
						<div class="form-group"> <!-- 여백 제어 -->
							<input type="text" class="form-control" placeholder="search">
						</div>
						<button type="submit" class="btn btn-primary">Submit</button>
					</form>
				</div>
			</nav>
		</div>
		<!-- 상단 네비게이션 끝 -->
		<!-- 점보트론 시작 -->
		<div class="row">
			<div class="jumbotron">
				<h1>Hello, Bootstrap!</h1>
				<p>부트스트랩을 이용해서 다양한 화면을 구성하고 반응형으로 문서를 작성할 수 있습니다. 부트스트랩은 주로 사용되는 버전이 3, 4, 5 버전이며 주기적으로 버전 업이 되기 때문에 향상된 기능을 사용할 수 있습니다.</p>
				<p><a class="btn btn-success btn-lg">Learn more</a></p>
			</div>
		</div>
		<!-- 점보트론 끝 -->
		<!-- 중앙 컨텐츠 시작 -->
		<div class="row">
			<div class="col-sm-6 col-lg-4"> <!-- 데스크탑에서는 가로로 3분할, 태블릿에서는 가로로 2분할, 모바일에서는 세로로 배치됨 -->
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>영화</h2>
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
		</div>
		<!-- 중앙 컨텐츠 끝 -->
		<!-- 푸터 시작 -->
		<hr>
		<div>
			<p class="text-center">&copy; 서울</p>
		</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>
  1. 새 HTML 파일 s02_sample.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="navbar navbar-inverse navbar-fixed-top"> <!-- navbar-default는 밝은 색 메뉴 바, navbar-inverse는 어두운 색 메뉴 바; navbar-fixed-top은 메뉴 바를 상단에 고정시킴 -->
		<div class="container"> <!-- container를 navbar 안에 두면 여백 없이 꽉 찬 메뉴 바가 만들어짐 -->
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="sr-only">Toggle Navigation</span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>
				<a class="navbar-brand" href="#">Project World</a>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">Home</a></li>
					<li><a href="#">Home</a></li>
					<li><a href="#">Home</a></li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 상단 고정 네비게이션 끝 -->
	<!-- 전체 화면 점보트론 시작 -->
	<div class="jumbotron">
		<div class="container"> <!-- container를 jumbotron 안에 두면 여백 없이 꽉 찬 점보트론이 만들어짐 -->
			<h1>Hello, Bootstrap!</h1>
			<p>부트스트랩을 이용해서 다양한 화면을 구성하고 반응형으로 문서를 작성할 수 있습니다. 부트스트랩은 주로 사용되는 버전이 3, 4, 5 버전이며 주기적으로 버전 업이 되기 때문에 향상된 기능을 사용할 수 있습니다.</p>
			<p><a class="btn btn-success btn-lg">Learn more</a></p>
		</div>
	</div>
	<!-- 전체 화면 점보트론 끝 -->

	<div class="container">
		<!-- 중앙 컨텐츠 시작 -->
		<div class="row">
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
			<div class="col-sm-6 col-lg-4">
				<h2>음악</h2>
				<img src="../images/Lighthouse.jpg" class="img-thumbnail">
				<p>작년에 개봉한 영화는 코로나의 영향으로 관객 수가 많이 줄어들었습니다. 올해 제작된 영화는 관객의 선택을 받기 위해 다양한 시도가 있을 것으로 기대됩니다.</p>
				<p>
					<a href="#" class="btn btn-success">View Details &raquo;</a>
				</p>
			</div>
		</div>
		<!-- 중앙 컨텐츠 끝 -->
		<!-- 푸터 시작 -->
		<hr>
		<div id="footer">
			<p class="text-center">&copy; Project World</p>
		</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>

Servlet & JSP

1. 웹 어플리케이션 기초

1-1 웹 어플리케이션의 구성

1-2 요청 처리 방식

CGI 방식
Servlet/JSP 사용시 처리 방식

1-4 웹 컨테이너

1-5 개발 환경 구축

  1. 새 다이나믹 웹 프로젝트를 생성하여 프로젝트명에 servletMain 입력 후 Next-Next-Generate web.xml depolyment descriptor 선택 후 Finish
  2. 프로젝트를 오른쪽 클릭하여 Build Path-Configure Build Path... 선택하고 Libraries 탭에서 JRE System Library를 선택 후 Edit...에서 JavaSE-1.8(jre)로 변경
  3. 프로젝트를 오른쪽 클릭하여 Properties 선택하고 좌측 목록에서 Project Facets 선택 후 Java의 Version을 1.8로 변경
  4. src/main/webapp 폴더 오른쪽 클릭하고 새 JSP 파일 index.jsp 생성
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello JSP!</title>
</head>
<body>
Hello JSP!
</body>
</html>
Tomcat의 디렉토리

1-3 Servlet과 JSP

Servlet
JSP

2. Servlet

2-1 서블릿의 개요

  1. src/main/java 폴더 오른쪽 클릭하고 새 패키지 kr.web.ch01 생성 후 새 클래스 HelloWorld 생성 
package kr.web.ch01;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.annotation.WebServlet;
import javax.servlet.ServletException;

import java.io.IOException;
import java.io.PrintWriter;

// HttpServlet 클래스를 상속시키면 클라이언트가 주소를 통해 해당 서블릿을 호출하고, 호출된 서블릿은 HTML을 생성해서 클라이언트로 전송
@WebServlet("/helloworld") // 주소 매핑; 기본적으로는 가상 폴더 servlet 하위에 패키지명.클래스명 형식으로 HTML이 생성되는데, 이러한 기본 주소는 보안에 취약하여 Tomcat에서 호출을 허용하지 않음
public class HelloWorld extends HttpServlet {
	
	// HTML을 생성하는 메서드 정의
	@Override public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { // Tomcat의 웹 컨테이너가 객체를 생성하여 인자로 전달
		// 문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		// HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>Hello Servlet!</title></head>");
		out.println("<body>");
		out.println("처음 작성하는 Servlet입니다.");
		out.println("</body>");
		out.println("</html>");
		out.close(); // 자원 정리
	}
}
  1. 새 클래스 NowServlet 생성
package kr.web.ch01;

import java.io.IOException;
import java.io.PrintWriter;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/now") // 주소 매핑
public class NowServlet extends HttpServlet { // URL로 요청하면 해당 서블릿이 동작
	// HttpServlet의 doGet 재정의
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		Date now = new Date();
		SimpleDateFormat sf = new SimpleDateFormat("yyyy년 MM월 dd일 a hh:mm:ss");
		
		// 문서 타입 및 캐릭터셋 지정
		response.setContentType("text/html;charset=utf-8");
		
		// HTML 출력을 위한 출력 스트림 생성
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>현재 날짜와 시간</title></head>");
		out.println("<body>");
		out.println("현재 날짜와 시간 : " + sf.format(now));
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}
  1. 새 클래스 HundredServlet 생성
package kr.web.ch01;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/hundred")
public class HundredServlet extends HttpServlet {
	/*
	 * [실습 문제] 1부터 100까지의 합 출력(반복문 활용)
	 * [출력 예시] 1부터 100까지의 합 : 5050
	 */
	@Override
	public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		int sum = 0;
		for(int i=1;i<=100;i++) {
			sum += i;
		}
		
		response.setContentType("text/html;charset=utf-8");
		
		PrintWriter out = response.getWriter();
		out.println("<html>");
		out.println("<head><title>1부터 100까지의 합</title></head>");
		out.println("<body>");
		out.println("1부터 100까지의 합 : " + sum);
		out.println("</body>");
		out.println("</html>");
		out.close();
	}
}

다음으로