JAVA/JAVA 기본

bootstrap

엔테아 2017. 10. 12. 10:28

제이쿼리닷컴

제이쿼리 다운로드

Download the uncompressed, development jQuery 3.2.1

 

부트스트랩

http://getbootstrap.com/

다운로드 - Compiled CSS and JS 다운로드 - 압축풀기

bootstrap.min.css, bootstrap.min.js 를 밖으로 꺼내두기

 

프로젝트 생성

프로젝트 - 웹 - 다이나믹 웹 프로젝트

프로젝트 이름을 만들고

next의 세번째 페이지의 generate web.xml deployment descriptor체크박스를 체크

웹 컨텐츠 밑에 jsp파일 만들기

<!DOCTYPE html> 중 html우측의 주소를 전부 삭제하면 html5가 됨.

 

웹 컨텐츠에 jquery폴더를 만들고 복사해서 붙여넣기

웹 컨텐츠에 bs폴더를 만들고 상기 부트스트랩 파일 2개를 붙여넣기

<html>
<head>
<style type="text/css">
 .redtext{
  color: red;
 }
</style>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Insert title here</title>
<link rel="stylesheet" href="bs/bootstrap.min.css">
<script src="jquery/jquery.js" type="text/javascript"></script>
<script type="bootstrap.min.js"></script>
</head>
<body>
hello world
<script type="text/javascript">
$(document).ready(function(){
 $("p").addClass("redtext");
});
</script>

<p>hello world</p>

<div class="container">
 <div class="row">
  hello world
 </div>
</div>

</body>
</html>

 

 .redtext{
  color: red;
 }

redtext에 붉은색을 집어넣는 기능

 

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

창 크기를 자동으로 제어해주는 코드

 

<link rel="stylesheet" href="WebContent/bs/bootstrap.min.css">
<script src="jquery/jquery.js" type="text/javascript"></script>
<script type="bootstrap.min.js"></script>

jquery 및 부트스트랩 선언

 

<script type="text/javascript">
$(document).ready(function(){
 $("p").addClass("redtext");
});

jquery사용

 

<p>hello world</p>

<div class="container">
 <div class="row">
  hello world
 </div>
</div>

부트스트랩 사용

 

그리드시스템은 한 줄(row)당 12칸

 

span class="col-xs-8"

col : 컬럼

xs : 최소사이즈(일반적으로 폰)

8 : 8칸 차지하여라

컬럼을 열고 핸드폰 사이즈에서 8칸을 차지하여라.

 

xs - sm - md - lg

폰 - 태블릿 - 모니터 - 대형모니터

xs가 기본값으로 적용되며, 큰 사이즈로 갈 수록 예외

기기크기

xs

sm

md

lg

명령어

xs4

4칸 차지함

4칸 차지함

4칸 차지함

4칸 차지함

sm4

12칸 차지함

4칸 차지함

4칸 차지함

4칸 차지함

md4

12칸 차지함

12칸 차지함

4칸 차지함

4칸 차지함

lg4

12칸 차지함

12칸 차지함

12칸 차지함

4칸 차지함

명령어별 사이즈는 상기와 같이 작용함.

 

<p class="col-xs-8 col-xs-push-2">good</p>

push는 내부의 단어를 왼쪽에서 오른쪽으로 x칸 밀어주는 효과

pull은 내부의 내용을 왼쪽으로 x칸 잡아 당겨주는 효과

 

<p class="col-xs-4 col-xs-offset-1">me</p>

offset은 왼쪽에서 오른쪽으로 '자리를 차지하고' x칸 밀어주는 효과

 

<p class="visible-xs">보일까요?</p>

visible 은 xs일때만 보이게 하는 값.

<p class="hidden-xs">hidden</p>

hidden은 xs일때 안보이게 하는 값.

 

<div class="pull-left">좌측 글자</div>
<div class="pull-right">우측 글자</div>

각각 좌측 끝까지, 우측 끝까지 미는 기능.

<div class="clearfix"></div>

플롯을 청소하는 기능

 

<mark>형광팬 처리</mark>
<del>삭선</del>
<ins>밑줄</ins>

<small>글씨를 작게</small>
<strong>글씨를 굵게</strong>

<em>기울임체</em>

<abbr title="아침~점심사이 먹는 밥">아점</abbr>

 

MVC2패턴 :

controller - servlet

model = class

wiew = jsp

사용자가 결정함.

 

<p class="text-left">text-left</p> 좌정렬
<p class="text-center">text-center</p> 가운데정렬
<p class="text-right">text-right</p> 우정렬
<p class="text-justify">text-justify</p> 양쪽정렬

<p class="text-nowrap">text-norap</p> 그냥 적기

<p class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis">

overflow:hidden 은 넘친 값을 숨김

text-overflow:ellipsis 는 넘친 값을 말줄임표화.

 

<table class="table">
 <thead>
  <tr>
   <th>#</th>
   <th>First Name</th>
   <th>Last Name</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>1</td>
   <td>mark</td>
   <td>sam</td>
  </tr>
  <tr>
   <td>2</td>
   <td>mark</td>
   <td>sam</td>
  </tr>
  <tr>
   <td>3</td>
   <td>mark</td>
   <td>sam</td>
  </tr>
 </tbody>
</table>

 

부트스트랩에서의 테이블 생성

 

<table class="table table-striped">

테이블에 음영선 넣기

<table class="table table-striped table-bordered">

테이블에 테두리 선 넣기

<table class="table table-striped table-bordered table-hover">

테이블에 마우스 올리면 색 변화하게 넣기

<table class="table table-striped table-bordered table-hover table-condensed">

테이블 크기를 살짝 압축해주는 기능

 

문맥태그

<tr class="info">

연파랑색 강조기능

<tr class="success">

연녹색 강조기능

<tr class="active">

연회색 강조기능

<tr class="warning">

연노랑색 강조기능

<tr class="danger">

연붉은색 강조기능

 

<div class="table-responsive">

수평 스크롤바 생성

 

프로토타입(prototype)

시제품, 디자인툴 스케치

 

MVC1

jsp

MVC2

--

model

class

View

jsp

Controller

servlet

 

form태그

<form action="#" method="get">

url에 데이터를 집어넣고 전송하는 방식

<form action="#" method="post">

내용에 데이터를 집어넣고 전송하는 방식. 보안이 상대적으로 우수함.

 

로그인 구현하기

<body>
          <form action="#" method="post">
                    <label>ID</label>
                    <input id="id" name="id" placeholder="id를 입력하세요">
                    <br>
                    <label>PW</label>
                    <input id="pw" name="pw" placeholder="비밀번호를 입력하세요">
                    <br>
                    <button type="submit">로그인</button>
                    <button type="reset">리셋</button>
                   
          </form>
</body>

 

부트스트랩을 이용하여 로그인 구현하기

<div class="container">
          <div class="row">
                    <form action="#" role="form">
                              <div class="form-group">
                                        <label for="id">ID</label>
                                        <input class="form-control" id="id" name="id" placeholder="id를 입력하세요">
                              </div>
                              <div class="form-group">
                                        <label for="pw">PW</label>
                                        <input type="password" class="form-control" id="pw" name="pw" placeholder="pw를 입력하세요">
                              </div>
                              <div class="form-group">
                                        <button type="submit">로그인</button>
                                        <button type="reset">초기화</button>
                              </div>
                    </form>
          </div>
</div>

 

상기 form의 action에 다른 주소값을 넣으면, 해당 주소값의 jsp파일을 실행할 수 있음.

 

<form class="form-inline" action="#" role="form">

form-inline 은 한줄에 입력하는 기능

 

<label class="sr-only" for="id">ID</label>

sr-only는 시각장애인을 배려하기 위해 소리로 들려줄 때에만 출력하는 기능

 

col-xs-2와 10을 통해 한 줄로 만들어 주는 기능

control-label을 통해 ID와 PW글자를 입력칸 왼쪽까지 붙여주는 기능

<div class="form-group">
          <label class="col-xs-2 control-label" for="id">ID</label>
          <div class="col-xs-10">
                    <input class="form-control" id="id" name="id" placeholder="id를 입력하세요">
          </div>
</div>
<div class="form-group">
          <label class="col-xs-2 control-label" for="pw">PW</label>
          <div class="col-xs-10">
                    <input type="password" class="form-control" id="pw" name="pw" placeholder="pw를 입력하세요">
          </div>
</div>

 

상하정렬

<p class="form-control-static">idadress</p>

 

HTML5 사용자 정의 속성

<input data-ssn="s001">

ssn을 만들고 s001을 투입하는 것.

 

<textarea rows="5" cols="12"></textarea>
<textarea class="col-xs-6" rows="5" cols="12"></textarea>
<textarea class="form-control" rows="5" cols="12"></textarea>

 

기본 텍스트박스

크기제한 텍스트박스

박싱을 데코레이션한 텍스트박스

 

남성/여성을 선택하는 체크박스

<div class="radio">
          <label>
                    <input type="radio" name="gender" value="남성">남성
          </label>
</div>
<div class="radio">
          <label>
                    <input type="radio" name="gender" value="여성">여성
          </label>
</div>

단. input타입의 name값이 동등해야 함.

<input checked="checked" type="radio" name="gender" value="남성">남성

checked를 통해 해당 항목을 체크시킴

 

<label class="radio-inline">
       <input type="radio" value="서울" name="addr">서울

</label>

수평으로 체크박스를 배열하는 것.

 

부트스트랩 3.3 코드 중 특수 폰트 일람

https://getbootstrap.com/docs/3.3/components/

 

<span class="glyphicon glyphicon-pencil"></span>

​방식으로 사용함.

 

드롭다운 작성하는 법

<div class="dropdown">
       <button class="btn dropdown-toggle" data-toggle="dropdown">
              dropdown<span class="caret"></span>
       </button>
</div>

caret은 드롭다운 옆의 역삼각형 만들때 사용

 

드롭다운 테이블 작성하는 법

<ul class="dropdown-menu">
        <li class="dropdown-header">과일</li>
        <li><a href="#" class="active">포도</a></li>
        <li><a href="#">딸기</a></li>
        <li><a href="#">수박</a></li>
</ul>

 

<li class="divider"></li>

드롭다운 테이블 중 구분선 넣는 법

 

팁. 두 개의 jsp파일을 둘 다 ctrl클릭하고, 우클릭, 컴페어 위드, each other클릭시 다른 점을 비교해줌.

 

부트스트랩 버튼 구현

<button>기본 버튼</button>
<button class="btn">부트스트랩 버튼1</button>
<button class="btn btn-default">bstbtn2</button>
<button class="btn btn-primary">bsbtn3</button>
<button class="btn btn-info">bsbtn4</button>
<button class="btn btn-success">bsbtn5</button>
<button class="btn btn-warning">bsbtn6</button>
<button class="btn btn-danger">bsbtn7</button>
<button class="btn btn-link">bsbtn8</button>

 

 


 상기 코드는 상기와 같이 구현됨.

 

 

<button class="btn btn-success"><span class="glyphicon glyphicon-home"></span>glyphicon-home</button>

아이콘 사용하는 법

 

<button class="btn btn-info btn-xs">btn-xs</button>
<button class="btn btn-info btn-sm">btn-sm</button>
<button class="btn btn-info">btn-default</button>
<button class="btn btn-info btn-lg">btn-lg</button>
<button class="btn btn-info btn-block">btn-block</button>

상기 코드는 아래와 같이 구현됨.

 


btn-block은 자신을 감싼 범위 전체만큼 차지함.

 

버튼 그룹 만들기

 

<div class="btn-group">
      <button class="btn btn-default">default</button>
      <button class="btn btn-primary">primary</button>
      <button class="btn btn-info">info</button>
      <button class="btn btn-success">success</button>
      <button class="btn btn-warning">warning</button>
      <button class="btn btn-danger">danger</button>
      <button class="btn btn-link">link</button>
</div>

수평으로 버튼이 배열됨.

<div class="btn-group-vertical">

버튼그룹이 수직으로 배열됨.

 

툴바 만들기

<div class="btn-toolbar">
        <div class="btn-group">
                <button class="btn btn-info">등록</button>
                <button class="btn btn-info">조회</button>
                <button class="btn btn-info">수정</button>
                <button class="btn btn-info">삭제</button>
        </div>
       
        <div class="btn-group">
                <button class="btn btn-success">로그인</button>
                <button class="btn btn-success">회원가입</button>
                <button class="btn btn-success">회원탈퇴</button>
        </div>
</div>

 

<div class="btn-toolbar btn-group-xs">

<div class="btn-group btn-group-lg">

등을 통하여 버튼그룹의 크기 변경이 가능.

 

<div class="btn-group btn-group-justified">

를 통하여 버튼의 크기를 같게 만들 수 있음.

 

<input type="button" class="btn btn-info" value="가입">

를 통해서도 버튼 생성이 가능

 

<a href="#" class="btn btn-info">탈퇴</a>

를 통해서도 버튼을 생성할 수 있음.

 

 

<div class="input-group">
     <span class="input-group-addon">
           <input type="checkbox">
     </span>
     <input class="form-control">
</div>

등을 통해 텍스트박스의 구현이 가능.

 

<ul class="dropdown-menu pull-right">

의 pull-right를 통하여 드롭다운을 오른쪽정렬이 가능

 

유스케이스

ㄴ 특정 기능을 나타내는 도형

유스케이스 다이어그램

ㄴ 유스케이스의 관계를 표현한 도형



네비게이션

<ul class="nav nav-tabs">
        <li><a data-toggle="tab" href="#tv">TV</a></li>
        <li><a data-toggle="tab" href="#movie">영화</a></li>
        <li><a data-toggle="tab" href="#concert">공연</a></li>
</ul>
<div class="tab-content">
        <div id="tv" class="tab-pane active">
                안녕하세요
        </div>
        <div id="movie" class="tab-pane">
                Hello
        </div>
        <div id="concert" class="tab-pane">
                ohayo
        </div>
</div>

 

<ul class="nav nav-pills nav-stacked">

stacked를 통하여 네비게이터를 수직으로 배치.

<div class="col-xs-2">
        <ul class="nav nav-pills nav-stacked">
                <li><a data-toggle="tab" href="#foot">축구</a></li>
                <li><a data-toggle="tab" href="#basket">농구</a></li>
                <li><a data-toggle="tab" href="#base">야구</a></li>
        </ul>
</div>
<div class="col-xs-10">
        <div class="tab-content">
                <div id="foot" class="tab-pane active">
                        축구경기
                </div>
                <div id="basket" class="tab-pane">
                        농구경기
                </div>
                <div id="base" class="tab-pane">
                        야구경기
                </div>
        </div>
</div>

 

div로 묶고 그리드시스템(col-xs-2등)  을 통해 한줄로 배치.

 

<img alt="아름다운 계곡 풍경" src="car.jpg">

이미지 투입

 

<img class="img-circle" alt="아름다운 계곡 풍경" src="car.jpg">

타원형으로 자르기

 

<img class="img-rounded" alt="아름다운 계곡 풍경" src="car.jpg">
끝부분을 살짝 둥글게.

 

<img class="img-thumbnail" alt="아름다운 계곡 풍경" src="car.jpg">

썸네일 만들기.

 

<img class="img-responsive" alt="아름다운 계곡 풍경" src="car.jpg">

 

네비게이션 바

 

<nav class="navbar navbar-default">
        <div class="navbar-header">
                <button data-toggle="collapse" data-target="#menu" class="navbar-toggle">
                        <span class="sr-only">Toggle Navigator</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand">502호</a>
        </div>
        <div id="menu" class="collapse navbar-collapse">
                <ul class="nav navbar-nav">
                        <li><a href="#">menu1</a></li>
                        <li><a href="#">menu2</a></li>
                        <li><a href="#">menu3</a></li>
                        <li><a href="#">menu4</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                        <li><a href="#">end</a></li>
                </ul>
        </div>
</nav>

 

collopse

는 메뉴가 접혀있다는 의미.

 

<nav class="navbar navbar-inverse">

로 default를 inverse로 바꾸면, 색이 검게 변함.

 

<nav class="navbar navbar-default navbar-fixed-top">

을 통하여 네비게이션바를 최상단에 고정.

 

<div style="height : 1000px"></div>

를 통하여 상하페이지크기 늘리기.

 

패널

<div class="panel panel-default">
        <div class="panel-heading">
                <h1 class="panel-title">여기는 헤딩영역입니다</h1>
        </div>
        <div class="panel-body">
                넣고 싶은 것을 넣으시오
        </div>

        <div class="panel-footer">
                end
        </div>
</div>

 

패널의 기본적 이용

 

<a href="#">클&nbsp;릭</a>

 

&nbsp를 통해 스페이스바를 구현.

 

<div class="panel panel-info">

info가 들어간 자리에

success

info

warning

danger등의 문맥태그를 이용할 수 있음.

 

페이징 처리

 

 <div class="row">
        <ul class="pagination pagination-sm">
                <li><a>&laquo</a></li>
                <li><a>1</a></li>
                <li><a>2</a></li>
                <li><a>3</a></li>
                <li><a>4</a></li>
                <li><a>5</a></li>
                <li><a>&raquo</a></li>
        </ul>
</div>

 

&lquo;는

<<를 의미한다.

&rquo는

>>를 의미함.

 

<ul class="pagination pagination-sm">

을 이용하여 페이징의 크기를 조절할 수 있다.

 

&larr;

는 ←

 

&rarr;

는 →

를 의미한다.

 

<div class="jumbotron">

을 통해 바탕과 함께 더욱 큰 글씨를 쓸 수 있음.

 

모달 이용법

헤드태그 종료 전

<script type="text/javascript">
        $(document).ready(function() {
                $("#mymodal").modal("show");
        });
</script>

<div id="mymodal" class="modal fade">
        <div class="modal-dialog">
                <div class="modal-content">
                        <div class="modal-header">
                                <button data-dismiss="modal" class="close">&times;</button>
                        </div>
                        <div class="modal-body">
                                모달 내용입니다.
                        </div>
                </div>
        </div>
</div>

 

<div class="modal-footer">
        <button data-dismiss="modal" class="btn btn-success">동의</button>
</div>

을 통해 동의를 눌러야만 꺼지게끔 할 수 있음.

 

얼럿(alert)

 

<div class="alert alert-warning">
        조심하세요
</div>

등을 이용하여 표시함!

 

<div class="alert-dismissable alert alert-danger">
        닫기가능함!
        <button class="close" data-dismiss="alert">&times;</button>
</div>

을 통하여 닫기가 가능한 얼럿창의 출력이 가능.

 

툴팁

 

<a data-placement="bottom" href="#" data-toggle="tooltip" title="지식인naver">naver</a>
<p data-toggle="tooltip" title="지식인naver">naver</p>
<button data-placement="right" data-toggle="tooltip" title="로그인하려면 클릭하세요">로그인</button>

<script type="text/javascript">
        $(document).ready(function() {
                $("[data-toggle='tooltip']").tooltip();
        });
</script>

 

팝오버

<div class="container">
        <div class="row">
                <button data-toggle="popover" data-content="툴팁과 다른 점" title="팝오버!">팝오버</button>
                <button data-trigger="hover" data-toggle="popover" data-content="툴팁과 다른 점" title="팝오버!">팝오버</button>
        </div>
</div>


<script type="text/javascript">
        $(document).ready(function() {
                $("[data-toggle='popover']").popover();
        });
</script>

 

콜렙스

<button data-toggle="collapse" class="btn btn-info" data-target="#mycollapse2">
        콜렙스 개폐
</button>
<div id="mycollapse2" class="collapse in">
        <p>hello</p>
        <p>hi</p>
        <p>good</p>
        <p>morning</p>
        <p>world</p>
</div>

 

아코디언 구현

<div id="accordion" class="panel-group">
        <div class="panel panel-default">
                <div class="panel-heading">
                        <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse1"
                                        data-parent="#accordion">Item1</a>
                        </h4>
                </div>
                <div class="panel-dollapse collapse in" id="collapse1">
                        <div class="panel-body">
                                <p>hello</p>
                                <p>world</p>
                                <p>java</p>
                                <p>C++</p>
                                <p>C#</p>
                                <p>Go!</p>
                        </div>
                </div>
        </div>
        <div class="panel panel-default">
                <div class="panel-heading">
                        <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse2">Item2</a>
                        </h4>
                </div>
                <div class="panel-dollapse collapse" id="collapse2"
                        data-parent="#accordion">
                        <div class="panel-body">
                                <p>hello</p>
                                <p>world</p>
                                <p>java</p>
                                <p>C++</p>
                                <p>C#</p>
                                <p>Go!</p>
                        </div>
                </div>
        </div>
        <div class="panel panel-default">
                <div class="panel-heading">
                        <h4 class="panel-title">
                                <a data-toggle="collapse" href="#collapse3">Item3</a>
                        </h4>
                </div>
                <div class="panel-dollapse collapse" id="collapse3"
                        data-parent="#accordion">
                        <div class="panel-body">
                                <p>hello</p>
                                <p>world</p>
                                <p>java</p>
                                <p>C++</p>
                                <p>C#</p>
                                <p>Go!</p>
                        </div>
                </div>
        </div>
</div>

 

캐롯셀

<div data-ride="carousel" class="carousel slide" id="myCarousel">

        <ol class="carousel-indicators">
                <li data-slide-to="0" data-target="#myCarousel" class="active"></li>
                <li data-slide-to="1" data-target="#myCarousel"></li>
                <li data-slide-to="2" data-target="#myCarousel"></li>
        </ol>

        <div class="carousel-inner">

                <div class="item active">
                        <img alt="car" src="car.jpg">
                </div>

                <div class="item">
                        <img alt="orora" src="orora.jpg">
                </div>

                <div class="item">
                        <img alt="yard" src="yard.jpg">
                </div>

        </div>

        <a href="#myCarousel" class="left carousel-control" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left"></span>
        </a>

        <a href="#myCarousel" class="right carousel-control" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right"></span>
        </a>

</div>

<div data-ride="carousel" class="carousel slide" id="myCarousel" data-interval="500">

data-interval을 통해 시간을 조절할 수 있음.

단위는 1/1000초단위.

 

팁. 스크립트태그는 </body>태그의 바로 위에 구현하는 것을 일반적으로 함.

 

액티브 다이어그램

 



UI시나리오 작성



테스트케이스 작성



팁. ctrl + shift + F = 자동 정렬