JSP 프로젝트

  1. src ⇒ main ⇒ webapp

    1. html/css/js 찾는 위치

  2. ctrl + f11 : 서버 실행

    file:///C:/Users/504/git/Ga0_WebStudy/jsp/src/main/webapp/index.html

<http://localhost:8080/jsp/index.html>

<http://192.168.17.54:8080/jsp/index.html>

  3. HTTP형식 JSP 프로젝트 경로 설정

    1. http://ip주소:포트번호/프로젝트명/(webapp)폴더시작점

부트스트랩 그리드

<!DOCTYPE html>
	<html>
		<head>
			<meta charset="UTF-8">
			<title>Insert title here</title>
			
			<meta name="viewport" content="width=device-width, initial-scale=1">
			
			<link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
			
			<style>
				*{border : 1px solid red;}
				.box1 div{border : 1px solid blue;}
				div{height: 50px;}
			</style>
		</head>
		<body>
			<!-- 
				1. 부트스트랩 설치 cdn
					1) <meta name="viewport" content="width=device-width, initial-scale=1">
					2) <link href="<https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css>" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
					3) <script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
			 -->
			 
			 <!-- 
			 	2. 부트스트랩 class 위주
			 		.container :
			 		.row : 하위 요소 가로배치 = flex
			 		그리드 [반응형 제작]
			 			-박스[구역]마다 12조각
			 			.col-md-조각수
			 			.offset-md-여백조각수
			  -->
			  
			  <div>
			  	css 없는 상태 박스권
			  </div>
			  
			  <div class = "container">
			  	미리 만들어진 css [부트스트랩] 박스권
			  </div>
			  
			  <div class = "container">
			  	<div class ="row box1">
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  		<div class = "col-md-1 col-1">col-md-1 열 1칸</div>
			  	</div>
			  	<div class = "row">
			  		<div class = "col-md-8 col-8">col-md-8 열 8칸</div>
			  		<div class = "col-md-4 col-4">col-md-4 열 4칸</div>
			  	</div>
			  	<div class ="row">
			  		<div class = "col-md-4 col-4">col-md-4 열 4칸</div>
			  		<div class = "col-md-4 col-4">col-md-4 열 4칸</div>
			  		<div class = "col-md-4 col-4">col-md-4 열 4칸</div>
			  	</div>
			  	<div class ="row">
			  		<div class = "col-md-6 col-6">col-md-6 열 6칸</div>
			  		<div class = "col-md-6 col-6">col-md-6 열 6칸</div>
			  	</div>
			  	<div class = "row">
			  		<div class = "col-md-8 col-8"> <!-- 그리드 8 -->
			  			<div class = "row"> <!-- 그리드 8이 이 row안에 있는 요소들 입장에선 그리드 12 -->
			  				<div class = "col-md-4 col-4"> 
			  					외부8 그리드 내 내부 4 그리드
			  				</div>
			  				<div class = "col-md-8 col-8">
			  					외부8 그리드 내 내부 8 그리드
			  				</div>
			  			</div>
			  		</div>
			  		<div  class ="col-md-4 col-4">
			  			<div class ="row">
	  						<div class = "col-md-6 col-6">
		  						외부4 그리드 내 내부 6 그리드
		  					</div>
		  					<div class = "col-md-6 col-6">
		  						외부4 그리드 내 내부 6 그리드
		  					</div>
			  			</div>
			  		</div>
			  	</div>
			  	<div class = "row">
			  		<div class = "col-md-5 col-6 "> <!-- 모바일에는 col은 6으로 쓰겠다. 모바일에서는 여백을 안쓴다. -->
			  			col-md-5 열 5칸
			  		</div>
			  		<div class = "col-md-5 offset-md-2 col-6 "> <!-- offset-md-2 : 2칸 건너띄기 -->
			  			col-md-5 열 5칸
			  		</div>
			  	</div>
			  </div>

			<script src="<https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js>" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
		</body>
	</html>

Untitled

부트스트랩 Table 부분 html

<table class ="table table-striped"><!-- 테이블 / 부트스트랩 .table : 사이즈가 맞춰서 들어간다.-->
			  		<thead> <!-- 제목 -->
			  			<tr> 
			  				<th>번호</th>
			  				<th>제목</th>
			  				<th>작성일</th>
			  				<th>조회수</th>
			  			</tr>
	  				</thead>
			  		<tbody> <!-- 내용 -->
			  			<tr>
			  				<td>1</td>
			  				<td>안녕!</td>
			  				<td>2023-01-23</td>
			  				<td>3</td>
			  			</tr>
			  			<tr>
			  				<td>2</td>
			  				<td>하이!</td>
			  				<td>2023-01-24</td>
			  				<td>9</td>
			  			</tr>
			  			<tr>
			  				<td>3</td>
			  				<td>인사!!!</td>
			  				<td>2023-01-25</td>
			  				<td>1</td>
			  			</tr>
			  		</tbody>
			  	</table>
			  	<!-- 3구역의 테이블 -->
			  	<div class = "row"> <!-- 하위 요소 가로배치 : flex -->
			  		<div class = "col-md-4 col-4">
			  			<table class = "table table-striped">
			  				<thead>
			  					<tr> 
			  						<th>번호</th>
			  						<th>제목</th>
			  					<tr>
			  				</thead>
			  				<tbody>
			  					<tr> 
			  						<th>1</th>
			  						<th>하이하이</th>
			  					<tr>
			  					<tr> 
			  						<th>2</th>
			  						<th>안녕안녕</th>
			  					<tr>
			  				</tbody>
			  			</table>
			  		</div>
			  			
			  		<div class = "col-md-4 col-4">
			  			<table class = "table table-hover"> <!-- 마우스 올렸을 때 테이블 행 배경 색 바뀜-->
			  				<thead>
			  					<tr> 
			  						<th>번호</th>
			  						<th>제목</th>
			  					<tr>
			  				</thead>
			  				<tbody>
			  					<tr> 
			  						<th>1</th>
			  						<th>하이하이</th>
			  					<tr>
			  					<tr> 
			  						<th>2</th>
			  						<th>안녕안녕</th>
			  					<tr>
			  				</tbody>
			  			</table>
			  		
			  		</div>
			  		<div class = "col-md-4 col-4">
			  			<table class = "table table-bordered"> <!-- border가 전체적으로 들어감. -->
			  				<thead>
			  					<tr> 
			  						<th>번호</th>
			  						<th>제목</th>
			  					<tr>
			  				</thead>
			  				<tbody>
			  					<tr> 
			  						<th>1</th>
			  						<th>하이하이</th>
			  					<tr>
			  					<tr> 
			  						<th>2</th>
			  						<th>안녕안녕</th>
			  					<tr>
			  				</tbody>
			  			</table>
			  		</div>

Untitled

ctrl+f5 ⇒ 강력 새로고침