본문 바로가기
Java Web Programming/4. JSP

[부트스트랩/BootStrap] 반응형 웹, 미디어쿼리, 부트스트랩(그리드, 테이블)

by 파프리카_ 2020. 9. 14.
728x90
반응형

[ 반응형 웹 ]

다양한 기기(모바일, 태블릿, PC 등)에 최적화된 화면을 제공하는 것을 말한다.

즉, 스마트 폰에서는 작은 화면에 최적화된 화면을 보여주고,

PC와 같이 큰 화면에는 이에 최적화되도록 변경하여 보여주는 것을 의미한다.

 

[ @media : 미디어 쿼리 ]

HTML5, CSS3 에 의해 지원되는 미디어 쿼리는 반응형 웹의 핵심 기술이다.

미디어쿼리는 화면의 종류와 크기에 따라 디자인을 달리주는 CSS 기술이다.

 

> 미디어쿼리를 사용하기 위한 선언부 (view meta tag)

 <meta name="viewport" content="width=device-width, initial-scale=1">

 

[ BootStrap 부트스트랩 ]

반응형 웹 사이트를 개발하기 위한 HTML, CSS, JavaScript의 프레임워크이다.

 

> 공부를 위한 사이트 : https://www.w3schools.com/bootstrap/default.asp

> 반응형 웹 미디어쿼리 테스트

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 반응형 웹을 위한 미디어쿼리 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>반응형 웹 미디어쿼리 테스트</title>
<style type="text/css">
	body {
		background-color: olive;
	}
	/*	
			768px 이상 너비부터 olive>yellow
			992px 이상 너비부터 yellow -> lime
			1200px 이상 너비부터 lime -> orange
		*/
	@media ( min-width : 768px) {
		body {
			background-color: yellow;
		}
	}
	
	@media ( min-width : 992px) {
		body {
			background-color: lime;
		}
	}
	@media ( min-width : 1200px) {
		body {
			background-color: orange;
		}
	}
</style>
</head>
<body>

</body>
</html>

 

> 부트스트랩 사용 예제

1. bootstrap grid test

  • xs (for phones - 768px 이하 )
  • sm (for tablets - 768px 이상)
  • md (for small laptops -992px 이상)
  • lg (for laptops and desktops - 1200px 이상)

1) bootstrap의 container class 활용

- container는 고정 너비 레이아웃

- container-fluid는 전체 너비 레이아웃

 

2) con-[size]-[row number] 활용

- col-sm-* : 768px 이상이면 반영(태블릿 화면 사이즈 이상이면 적용)

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 미디어쿼리 선언부 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>bootstrap grid test</title>
</head>
<body>
	<%-- grid(그리드) : 페이지 레이아웃 --%>
	
	<%-- bootstrap의 container class 활용 --%>
	<div class="container">
		<h3>부트스트랩 테스트 1 : container</h3> <br>
	</div>  
	<div class="container-fluid">
		<h3>부트스트랩 테스트 2 : container-fluid</h3><br>
	</div>
	
	<%-- row : col-[size]-[row] --%>
	<div class="row">
		<%-- col-sm --%>
		<div class="col-sm-4" style="background-color:lavender">.col-sm-4</div>	
		<div class="col-sm-4" style="background-color:lime">.col-sm-4</div>	
		<div class="col-sm-4" style="background-color:orange">.col-sm-4</div>	
	</div>
</body>
</html>

 

2. bootstrap grid OFFSET test

.col-[size]-offset-[n] :  클래스를 사용하면 n열 만큼 오른쪽으로 이동

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>grid offset test</title>
</head>
<body>
	<div class="container-fluid">
		<h2>offset test: .col-sm-</h2>
		<div class="row">
			<div class="col-sm-5" style="background-color: lightgray">.col-sm-5</div>
			<!-- offset을 주면 row 중간을 건너뛸 수 있다 -->
			<div class="col-sm-5 col-sm-offset-2" style="background-color: yellow">.col-sm-5 com-sm-offset-2</div>
		</div>
		<div class="row" style="background-color:lime;">
			<!-- 3만큼 오른쪽으로 이동 -->
			<div class="col-sm-9 col-sm-offset-3" style="background-color: cyan">.col-sm-9 col-sm-offset-3</div>
		</div>
	</div>
</body>
</html>

 

3. bootstrap table test

1) table : 테이블 형식

2) table-hover : 커서 위치 시, 색 표시

3) table-bordered : 테이블 테두리

4) tr class에 "success" : 해당 행 색 주기

5) 테이블 위 여백주기 (style + class 이용)

6) offset grid 적용해서 중간에 테이블 배치

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Table Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
	href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script
	src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
	src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- 브라우저 위에 여백을 별도로 줄 수 있다 -->
<style type="text/css">
.container {
	padding-top: 20px;
}
</style>
</head>
<body>
	<div class="container">
		<!--  grid 적용해서 중간에 테이블 배치 (3 - 6 - 3) 
			  offset을 이용해서 3영역만큼 오른쪽으로 이동하여 6영역만 사용-->
		<div class="row">
			<div class="col-sm-6 col-sm-offset-3">
				<h2>테이블 테스트</h2>
				<h4>.table & .table-hover & .table-bordered class</h4>
				<table class="table table-hover table-bordered">
					<thead>
						<tr class="success">
							<th>Firstname</th>
							<th>Lastname</th>
							<th>Email</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>John</td>
							<td>Doe</td>
							<td>john@example.com</td>
						</tr>
						<tr>
							<td>Mary</td>
							<td>Moe</td>
							<td>mary@example.com</td>
						</tr>
						<tr>
							<td>July</td>
							<td>Dooley</td>
							<td>july@example.com</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

</body>
</html>

 

※ 마우스 커서를 올린 곳에 색을 표시해준다

728x90
반응형

'Java Web Programming > 4. JSP' 카테고리의 다른 글

[JSP] Forward ActionTag 액션태그 응용 (DB 연동)  (0) 2020.09.15
[JSP] Forward ActionTag 기본  (2) 2020.09.15
[JSP] DBCP + Model2 MVC Pattern (+ 각 객체 개념설명)  (0) 2020.09.14
[JSP] DB(SQL)의 date 타입을 이용한 Model 2 설계방식 프로그램 구현  (0) 2020.09.04
[JSP] Cookie 쿠키 & Session 세션 + Model 2 Architecture (MVC Pattern) 설계방식을 다시 한 번 정리하고 가자!  (0) 2020.09.04

관련글

티스토리툴바