WEB : [0621] Bootstrap

JAVA개념&실습

WEB : [0621] Bootstrap

u_SZero 2023. 8. 22. 19:54

! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의해주시기 바랍니다 !

BootstrapApp

■■■ 부트스트랩(Bootstrap) ■■■

○ 웹 개발의 흐름
                     (웹 어플리케이션)
    홈페이지 --------------> 웹 사이트 ------------> 웹 서비스 ------------> 웹 앱
    - 읽기 위주의            - 쓰기 가능한 - 기능성 - 실시간
      정적 콘텐츠 동적 콘텐츠 개발 생산성 상호작용
    - HTML - CGI & - MVC 서버 - 경량 서버
      제작도구 서버 페이지 프레임워크 & 프레임워크 &
AJAX 툴킷 프론트엔드
프레임워크

○ 부트스트랩 개요

    - 트위터(Twitter)에서 오픈소스로 공개한 웹 프론트엔드 개발 도구
      → 트위터 개발팀에서 제작
    - 트위터(Twitter) 개발 과정 중 일관성 문제가 발생하여
      내부 프로젝트 형대로 시작
    - 공식 홈페이지
      http://getbootstrap.com/
    - 번역본 홈페이지
      http://bootstrapk.com/


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

→ 네트워크 환경(상황)을 고려하여 사용할 수 있도록 한다.

※ 부트스트랩에 포함되어 있는 플러그인들은 제이쿼리 기반으로 동작한다.
   따라서 이 플러그인이 정상적으로 작동하기 위해서는 제이쿼리를 먼저
   참조할 수 있도록 코드를 구성해야 한다. (제이쿼리 링크)

※ 현재 부트스트랩은 MIT 라이센스를 따루고 있다.
   MIT 라이센스는 메사추세츠 공과대학교(MIT)를 기원으로 하는
   소프트웨어 라이센스 중 가장 대표적인 것이다.
   X11 License 또는 X License 로 표기되기도 한다.
   매우 제한이 느슨한 라이센스라고 할 수 있다.

○ 부트스트랩의 사용 목적

    - 생산성
      ·브라우저 환경에 따라 복잡한 cross browsing 작업 부담 경감
        (ex. 요소의 여백 정책은 브라우저마다 다름)
      ·반응형 디자인(Responsive Design) 적용 용이
    - 디자인 향상
      ·적은 노력으로 특정 수준의 보기좋은(?) 화면 구성이 가능.
(CSS → 기본 태그 + 클래스 제공)
    - 웹 표준을 준수

○ 부트스트랩의 특징

    - 스크립트 제어
      ·jQuery UI 기능이 겹침(단, API가 다름)
      ·선언적 방식(check~!!!)
→ HTML5 새로 추가된 속성과 유사
   (사용자 정의 속성 → 『data-데이터명』)

    ==> 디자인 라이브러리 + 선언적 스크립트 라이브러리 제공

■■■ 부트스트랩(Bootstrap) 실습 환경 구성 ■■■

○ 부트스트랩 다운로드

    - 『http://getbootstrap.com』 이나 『http://bootstrapk.com』을 통해
       부트스트랩을 사용하기 위한 항목들 다운로드
       ※ 주의 : 부트스트랩을 적용하기 위해서는 jQuery 가 필요하다.

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script src="http://code.jquery.com/jquery.min.js"></script>         _가급적이면 jquery문을 맨 위에 위치하자...!
<script src="js/bootstrap.min.js></script>

※ 위 코드 구성과 같이 jquery 참조 구문을 먼저 작성할 수 있도록 한다.
※ bootstrap 에서 제공하는 css 와 component 를 이용하면
   보다 쉽게 디자인을 적용할 수 있다.
   → 스타일을 직접 작성해야 하는 번거로움을 해결해준다.
※ 이와 같이 이미지 변환을 적용하기 위해서는 CSS 에 대한 사전 지식이 있어야 한다.
※ 『xxx.min.css』나 『xxx.min.js』와 같이 『min』이 붙어있는 파일은
   minified 를 의미한다.
   → 파일 크기를 최소화(내부적으로 사용되는 변수명 줄임, 공백이나 개행 제거 등)

BootEx01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx01.html</title>

<!-- 부트스트랩 적용 이전과 이후 내용을 비교 확인 -->
<!-- 각 엘리먼트들이 갖는 시각적인 효과 및 여백 정책 체크 -->

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

</head>
<body>

<h1>제목입니다.</h1>

평범한 텍스트입니다.

<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>
<br><br>

<h1>회원 게시판<small>회원만 쓰기 가능</small></h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
Temporibus alias placeat doloribus tempora velit laborum vitae 
doloremque quos perferendis error hic voluptatibus non nulla ipsam 
odio totam quo aliquam cupiditate.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Et enim asperiores consectetur sunt ad doloribus excepturi sapiente 
 sequi ipsam iusto possimus cumque id ullam odio in. Odio sit facilis cupiditate!</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
 Eaque commodi mollitia suscipit quaerat sequi corporis amet beatae incidunt 
 minus temporibus eos ullam officia pariatur ipsam eligendi quae corrupti sit possimus?</p>
<br><br>

우리는 <mark>강조할 텍스트에</mark> mark 태그를 사용할 수 있다.
<br><br>

<!-- 의미 전달 -->
이 텍스트 라인은 <del>삭제된 텍스트</del>로 다루어지고 있음을 의미한다.
<br><br>

<!-- 의미 전달하지 않음 -->
이 텍스트 라인은 해당 텍스트에 <s>시각적인 효과</s>를 부여하기 위해 사용되고 있다. <!-- <del>태그와 같은 같은 취소선이지만 의미를 담고 있는 <del>태그를 사용하자.-->
<br><br>

<!-- 의미 전달 -->
이 텍스트 라인은 문서에 <ins>추가적으로 삽입</ins>되었음을 의미한다.
<br><br>

<!-- 의미 전달하지 않음 -->                                            <!-- 의미 전달하지 않는 시각적인 효과는 css를 사용해야 하니깐 의미 전달역할이 있는 태그를 사용하자. -->
이 텍스트 라인은 <u>밑줄 처리</u>가 되도록 시각적인 효과를 부여한다.
<br><br>



</body>
</html>

BootEx04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx04.html</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<style type="text/css">

	#login
	{
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 300px;
		padding: 15px;
		margin: 30px;
	}
	#login h3
	{
		margin: 0px;
		margin-bottom: 15px;
	}
	
</style>

</head>
<body>

<div>
	<h1>기본 폼 구성하기</h1>
	<hr>
</div>

<div id="login">
	<h3>로그인 <small>회원 인증하기</small></h3>

	<form action="">
	
		<!-- 『.form-group』 : 폼을 구성하는 1개 관련 항목만 묶기-->
		<div class="form-group">
			<label for="txtId">아이디</label>
			<input type="text" id="txtId" placeholder="아이디를 입력하세요"
			required = "required" class="form-control">							<!-- required 속성 자체로 빈 값 넘기기 방지 가능 -->
		</div>
		
		<div class="form-group">
			<label for="txtPW">암호</label>
			<input type="password" id="txtPw" placeholder="패스워드를 입력하세요"
			required = "required" class="form-control">
		</div>
		
		<input type="submit" value="입력하기">
		
	</form>
</div>

</body>
</html>

BootEx05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx05.html</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<style type="text/css">

	#login
	{
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 700px;
		padding: 15px;
		margin: 30px;
	}
	#login h3
	{
		margin: 0px;
		margin-bottom: 15px;
	}
	
</style>

</head>
<body>

<div>
	<h1>기본 폼 구성하기</h1>
	<hr>
</div>

<div id="login">
	<h3>로그인 <small>회원 인증하기</small></h3>
	
	<!-- ※ BootEx04.html 의 내용을 그대로 복사하여 붙여넣은 후
			form 태그에 『.form-inline』 속성만 추가~!!! -->

	<!-- check~!! -->
	<form action="" class="form-inline">
	
		<!-- 『.form-group』 : 폼을 구성하는 1개 관련 항목만 묶기-->
		<div class="form-group">
			<label for="txtId">아이디</label>
			<input type="text" id="txtId" placeholder="아이디를 입력하세요"
			required = "required" class="form-control">
		</div>
		
		<div class="form-group">
			<label for="txtPW">암호</label>
			<input type="password" id="txtPw" placeholder="패스워드를 입력하세요"
			required = "required" class="form-control">
		</div>
		
		<input type="submit" value="입력하기">
		
	</form>
</div>

</body>
</html>

BootEx06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx06.html</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<style type="text/css">

	#content
	{
		border: 1px solid #ccc;
		border-radius: 5px;
		width: 700px;
		padding: 15px;
		margin: 30px;
	}
	#content h3
	{
		margin: 0px;
		margin-bottom: 15px;
	}

</style>

</head>
<body>

<div>
	<h1>기본 폼 구성하기</h1>
	<hr>
</div>

<div id="content">

	<h3>재고 관리 <small>입출고 관리하기</small></h3>

	<form>
		<div>
			<label>입력하기</label>
			
			<!-- 『.input-group』 : 접두어, 접미어, 컨트롤을 함께 묶어주는 역할 수행 -->
			<div class="input-group">
				<div class="input-group-addon">원두</div>
				<input type="text" id="txtCount" placeholder="수량을 입력하세요"
				required="required" class="form-control">
				<div class="input-group-addon">kg</div>
			</div>
			<br>
			
			<div class="input-group">
				<div class="input-group-addon">우유</div>
				<input type="text" id="txtCheck" placeholder="수량을 입력하세요"
				required="required" class="form-control">
				<div class="input-group-addon">ml</div>
			</div>
		</div>
		<br>
	
		<input type="submit" value="입력하기" class="btn btn-default">
	
	</form>
</div>


</body>
</html>

BootEx07.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx07.html</title>

<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<style type="text/css">

	div{border: 1px solid gray;}

</style>

</head>
<body>

<!-- 
	※ 그리드 시스템 → 영역 분할 → 기본 12 분할
	
	   사용할 클래스 	『.col-xs』 	『.col-sm』   『.col-md』   『.col-lg』
	   
	   브라우저 크기	아주 작은 기기   작은 기기     중간 기기     큰 기기
	   (디바이스 크기)
 -->

<!-- 12개 -->
<div class="row">
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
	<div class="col-xs-1">test</div>
</div>
<br><br>

<div class="row">
	<div class="col-xs-12">test1</div>
	<div class="col-xs-12">test2</div>
	<div class="col-xs-6">test3</div>
	<div class="col-xs-6">test4</div>
	<div class="col-xs-4">test5</div>
	<div class="col-xs-4">test6</div>
	<div class="col-xs-4">test7</div>
	<div class="col-xs-12">test8</div>
	<div class="col-xs-8">test9</div>
	<div class="col-xs-4">test10</div>
	<div class="col-xs-10">test11</div>
	<div class="col-xs-2">test12</div>
</div>
<br><br>


<div class="row">
	<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
	<div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<br><br>

<div class="row">
	<div class="col-xs-6 col-md-4">[A] .col-xs-6 .col-md-4</div>
	<div class="col-xs-6 col-md-4">[B] .col-xs-6 .col-md-4</div>
</div>
<br><br><br><br>

<div class="row" style="height: 100px; background-color: green;">
	<div class="col-xs-4 col-sm-12 col-md-6"
	style="height: 98px; background-color: yellow">
	</div>

	<div class="col-xs-4 col-sm-12 col-md-4"
	style="height: 98px; background-color: white">
	</div>

	<div class="col-xs-4 col-sm-12 col-md-2"
	style="height: 98px; background-color: blue">
	</div>
</div>



</body>
</html>

BootEx08.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BootEx08.html</title>


<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>

<!-- 추가 check~!!! -->
<link rel = "stylesheet" type="text/css" href="css/bootstrap-theme.css">

<style type="text/css">
</style>

</head>
<body>

<div>
	<h1>Glyphicons</h1>
	<hr>
</div>

<div>
	아이콘 : <span class="glyphicon glyphicon-heart"></span>
</div>

<div>
	아이콘 : <span class="glyphicon glyphicon-heart" style="width: 200px;"></span>
	아이콘 : <span class="glyphicon glyphicon-heart" style="height: 200px;"></span>
</div>
<br><br>
<!-- 크기 변화가 없다. -->

<div>
	<!-- check~!!! -->
	아이콘 : <span class="glyphicon glyphicon-heart"
	style="font-size: 30px; color: red;"></span>	<!-- 정체성이 글자이기 때문에 font-size로 크기 조정 -->
</div>

<!-- Attribute Content Type → Simple Type → 적용되지 않음 -->
<div>
	<input type="button" class="glyphicon glyphicon-qrcode">
</div>
<br><br>

<!-- Simple Type -->
<input type="button">

<!-- Complex Type -->
<button type="button">PCDATA...</button>
<br><br>

<br><br>

<!-- Attribute Content Type → Complex Type → 적용되지 않음 -->
<div>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-qrcode"></span>
		QR 코드 스캔
	</button>
</div>
<br><br>

<div>
	<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>

<!-- 『.btn-group』 : 버튼을 묶어주는 그룹 -->
<div class="btn group" role="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">
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-align-left"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-align-center"></span>
	</button>
	<button type="button" class="btn btn-default">
		<span class="glyphicon glyphicon-align-right"></span>
	</button>
</div>

</body>
</html>

! 배워가고 있는 주인장이 쓴 글이니 정보의 정확성에 유의해주시기 바랍니다 !

'JAVA개념&실습' 카테고리의 다른 글

JAVA : BufferedReader / Scanner (0)	2023.08.22
JAVA : 기초 (변수, 자료형, printf, 형 변환) (0)	2023.08.22
WEB : [0619] AJAX 04 (0)	2023.08.22
WEB : [0616] AJAX 03 (0)	2023.08.22
WEB : [0616] AJAX 02 (0)	2023.08.22

현재글WEB : [0621] Bootstrap

webapp22, 배열, JDBC연동게시판, 인스턴스, programmers, 클래스, 게시판, webapp20, singleton, Java, pstmt, 페이징처리, post요청방식, Ajax, ajax처리, spring:message, 프로그래머스, jQuery, MVC패턴, JDBC,

Today :
Yesterday :

u:SZero'