제이쿼리닷컴
제이쿼리 다운로드
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="#">클 릭</a>
 를 통해 스페이스바를 구현.
<div class="panel panel-info">
info가 들어간 자리에
success
info
warning
danger등의 문맥태그를 이용할 수 있음.
페이징 처리
<div class="row"> <ul class="pagination pagination-sm"> <li><a>«</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>»</a></li> </ul> </div> |
&lquo;는
<<를 의미한다.
&rquo는
>>를 의미함.
<ul class="pagination pagination-sm">
을 이용하여 페이징의 크기를 조절할 수 있다.
←
는 ←
→
는 →
를 의미한다.
<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">×</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">×</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 = 자동 정렬
