복습
부트스트랩 사용 방법
1. 라이브러리를 직접 다운하고 link 태그로 불러오는 방법
- 선택자의 속성값들을 수정이나 변경이 가능한게 장점
2. 원격의 서버에 올라간 것을 주소로 사용
실습 환경
- download 안의 bootstrap 4점대를 가져와서 쓰자
- 공식사이트에서 직접 다운 방식으로 쓰는 것과 같다.
부트스트랩 기타
- 템플릿 및 여러 선택자를 지원한다
- w3schools.com 에서 기능들을 살펴볼 수 있다.
- 전체적인 메인화면 템플릿도 있다
- 부트스트랩은 기본적으로 반응형 웹으로 반들어준다.
+ Javascript
- HTML코드에 포함되어서 사용됨
- 웹 상에서만 사용 가능하다
- 동적인 이벤트 처리를 해준다
부트스트랩 찾아서 쓰기 (w3schools.com)
- 직접 다운한 경우엔 여기의 클래스를 보고 사용하기
- CDN 방식을 사용하는 경우에는 여기의 코드를 그대로 가져오기
+ 부트스트랩으로 버튼 형태 만드는법
<button type="button" class="btn btn-secondary">가입</button>
<input type="button" value="확인" class="btn btn-secondary">
<a href="#" class="btn btn-secondary">글작성</a>
<div class="btn btn-secondary">로그인</div>- 부트스트랩을 사용해서 .class 속성을 이용해서 CSS를 적용하고 있다
- 가입 버튼은 <button type="button">, 확인버튼은 <input type="button"> 으로 버튼을 만들고 버튼 모양을 적용함
- 글작성 버튼은 버튼이 아니라 anchor (링크) 이지만 부트스트랩 클래스값이 적용되어 버튼처럼 된다.
- 로그인 버튼은 div 태그이지만 부트스트랩 클래스값이 적용되어 버튼처럼 된다
부트스트랩 자주쓰는 기능
부트스트랩 사용 예제1
1. 버튼
- 테두리가 있는 형태의 버튼으로 출력
- button02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Button Outline</h2>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<button type="button" class="btn btn-outline-light text-dark">Light</button>
<br><br><br>
<button type="button" class="btn btn-outline-success">ID중복검사</button>
<button type="submit" class="btn btn-outline-success">가입</button>
<button type="reset" class="btn btn-outline-success">취소</button>
</div>
</body>
</html>- 클래스값만 다르게 하여 원하는 버튼 형태로 출력시킬수 있다.
+ 버튼 관련 w3schools 페이지
부트스트랩 사용 예제2
2. 테이블
- table01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Table</h2>
<p>The .table class adds basic styling (light padding and horizontal dividers) to a table:</p>
<table class="table">
<thead>
<tr>
<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>
</body>
</html>- table태그에서 클래스값만 설정해줌
+ 테이블 관련 w3schools 페이지
부트스트랩 사용 예제3
2. 테이블
- table02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Striped Rows</h2>
<p>The .table-striped class adds zebra-stripes to a table:</p>
<table class="table table-striped">
<thead>
<tr>
<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>
</body>
</html>
- 스트라이프가 있는 모양으로 표를 만들어준다.
부트스트랩 사용 예제4
2. 테이블
- table03.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<table class="table table-hover">
<thead>
<tr>
<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>
</body>
</html>- hover기능이 있는 표를 만들어준다
- 마우스를 올린 곳의 색이 변함
부트스트랩 사용 예제5
2. 테이블
- table04.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hoverable Dark Table</h2>
<p>The .table-hover class adds a hover effect (grey background color) on table rows:</p>
<table class="table table-dark table-hover">
<thead>
<tr>
<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>
</body>
</html>- table-dark 와 table-hover 두가지 값을 다 쓰고 있다
+ 테이블 관련 w3schools 페이지
부트스트랩 사용 예제6
3. Pagination
- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌
- page01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>To create a basic pagination, add the .pagination class to an ul element. Then add the .page-item to each li element and a .page-link class to each link inside li:</p>
<ul class="pagination">
<li class="page-item"><a class="page-link" href="#">이전</a></li>
<li class="page-item active"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">다음</a></li>
</ul>
</div>
</body>
</html>- CDN 방식으로 부트스트랩을 적용하고 있다, CSS파일은 link 태그로, JS파일은 script 태그로 불러오고 있다
- 기본적으로 반응형 웹으로 제공되므로 viewport 가 있다
- <ul> 태그에 class="pagination" 그리고 안의 <li> 태그마다 "page-item" 과, <a> 태그마다 class="page-link"가 적용되어있다.
- class="active" 인 것이 활성화 됨, 즉 1 이 활성화됨
- 코드에서 1 이 class="active" 가 적용되었으므로 1이 active 상태가 되어있다.
+ 페이지 관련 w3schools 페이지
부트스트랩 사용 예제7
3. Pagination
- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌
- page02.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination - Disabled State</h2>
<p>Add class .disabled if a page for some reason is disabled:</p>
<ul class="pagination">
<li class="page-item disabled"><a class="page-link" href="#">Previous</a></li>
<li class="page-item"><a class="page-link" href="#">1</a></li>
<li class="page-item"><a class="page-link" href="#">2</a></li>
<li class="page-item"><a class="page-link" href="#">3</a></li>
<li class="page-item"><a class="page-link" href="#">Next</a></li>
</ul>
</div>
</body>
</html>- Previous 버튼의 class="disabled" 가 되어있음, 이전페이지가 없을때 클릭이 되지 않도록 막음
- Previous를 비활성화시킴, 이전페이지가 존재하지 않을때 이전페이지가 클릭되지 않게함
부트스트랩 사용 예제8
3. Pagination
- Pagination : 게시판 만들때 내용이 많아지면 페이지가 필요함, 페이지 하단 만들어줌
- page03.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Pagination</h2>
<p>Use utilitiy classes to change the alignment of the pagination:</p>
<!-- 왼쪽 정렬(기본값) -->
<ul class="pagination">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<!-- 가운데 정렬 -->
<ul class="pagination justify-content-center">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
<!-- 오른쪽 정렬 -->
<ul class="pagination justify-content-end">
<li class="page-item"><a class="page-link" href="javascript:void(0);">Previous</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">1</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">2</a></li>
<li class="page-item"><a class="page-link" href="javascript:void(0);">Next</a></li>
</ul>
</div>
</body>
</html>- 정렬기능을 가지고 있다, 페이지 처리하는 걸 목록페이지 하단영역에 왼쪽에 정렬할지, 가운데 정렬할지 ,오른쪽에 정렬할지 지정가능
- 기본값은 왼쪽 정렬이므로 왼쪽 정렬을 할때는 class:"pagination" 외에 따로 지정하지 않는다.
- 가운데 정렬을 위해선 class="justify-content-center 를 넣어준다.
+ 페이지 관련 w3schools 페이지
부트스트랩 사용 예제9
3. Dropdowns
- Dropdowns : 클릭시 옵션목록이 나오고 다시 클릭시 옵션목록이 없어짐
- dropdown.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns</h2>
<p>The .dropdown class is used to indicate a dropdown menu.</p>
<p>Use the .dropdown-menu class to actually build the dropdown menu.</p>
<p>To open the dropdown menu, use a button or a link with a class of .dropdown-toggle and data-toggle="dropdown".</p>
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Dropdown button
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="http://www.naver.com">네이버</a>
<a class="dropdown-item" href="http://www.daum.net">다음</a>
<a class="dropdown-item" href="http://www.google.com">구글</a>
</div>
</div>
</div>
</body>
</html>- CDN 방식으로 원격서버의 라이브러리를 불러오고 있다.
- Dropdown 기능 수행하기 위해서 div class=dropdown 으로 감싸준다.
- 버튼에서 class="dropdown-toggle" data-toggle="dropdown" 를 적용해야한다
- 다음으로 버튼을 누를따 나타나는 옵션메뉴들을 div class="dropdown-menu"로 감싸준다.
- 구체적인 개별 목록들은 class="dropdown-item" 을 적용한다.
- 바꿀수 있는 부분이 있고 바꾸지 못하는 부분들이 있음, 위의 글에서 언급한 것은 바꾸지 못한다.
- 링크가 걸려있으므로 네이버 선택시 네이버로 이동한다.
+ Dropdown 관련 w3schools 페이지
부트스트랩 사용 예제10
4. Collapse
- Collapse : 클릭하면 메뉴가 나타났다가 다시 클릭하면 메뉴가 사라짐, 접혔다 펴졌다 하는 기능
- collapsible.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Simple Collapsible</h2>
<p>Click on the button to toggle between showing and hiding content.</p>
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#demo">Simple collapsible</button>
<div id="demo" class="collapse">
Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</body>
</html>- 일종의 자바스크립트 기능, 부트스트랩으로 적용 가능하다.
- 함수형태의 Javascript 라이브러리인 jQuery 라이브러리도 포함되어있다. (jquery.slim.min.js)
- 버튼을 만들고 data-toggle="collapse" 와 data-target="#demo" 속성을 추가한다.
- 여기서 #demo 는 펼쳐칠 div 의 id값을 의미한다!
- 그리고 펼쳐졌다 졉혀질 div 상자의 id를 "demo"로 한다.
- demo 말고도 다른 이름 사용가능, button의 data-target="#원하는이름" 으로, div의 id="원하는 이름" 으로 맞춰주면 된다.
부트스트랩 사용 예제11
5. Accordion
- Accordion : 여러개중 한가지만 펼쳐진다, 한가지가 펼쳐지면 나머지는 접힌다.
- Collapse 와 비슷한 기능 수행
- accordion.html
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<p><strong>Note:</strong> The <strong>data-parent</strong> attribute makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible item is shown.</p>
<div id="accordion">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseOne">
자바
</a>
</div>
<div id="collapseOne" class="collapse show" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseTwo">
파이썬
</a>
</div>
<div id="collapseTwo" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseThree">
오라클
</a>
</div>
<div id="collapseThree" class="collapse" data-parent="#accordion">
<div class="card-body">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</div>
</div>
</div>
</div>
</body>
</html>
- 각 목록인 anchor 태그에 href="#collapseOne" 의 #collapseOne은 펼쳐질 div의 id값을 의미한다, 이름값을 맞춰야한다
- 클래스값들은 이미 정해져 있으므로 그대로 써야함
+ jQuery UI 를 사용해서도 이런기능을 만들 수 있다.(jqueryui.com)
- 여러개중 한가지만 펼쳐진다, 한가지가 펼쳐지면 나머지는 접힌다.
+ 부트스트랩의 반응형 웹 지원
- 줄이면 맞춰서 변화한다.
+ 아코디언 메뉴 만드는 방법 여러가지 있다
- jQuery로도 적용 가능
부트스트랩 사용 예제12
6. Forms
- Forms : 폼태그 관련 기능
- ex) 모서리가 라운드 처리된 깔끔한 기능
- forms01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Stacked form</h2>
<form action="/action_page.php">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email" name="email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pswd">
</div>
<div class="form-group form-check">
<label class="form-check-label">
<input class="form-check-input" type="checkbox" name="remember"> Remember me
</label>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>- 각 <input> 태그를 감싸는 각 <div> 에서 class="form-group"으로 묶어줘야한다.
- <input> 태그안에 class="form-control" 을 넣으면 모서리 라운드 처리를 해준다.
- 2가지를 적용해야한다. "form-group"으로 묶여져야 하고 <input> 태그 안에서 class="form-control"을 해야한다.
+ CSS 적용을 잘 하기 위해 <label> 태그를 쓰고 for="원하는값" 과 아래 <input> 태그의 id="원하는값" 을 맞춰준다.
+ <input type="email"> 로 설정하면 이메일 주소 형식 ( @등) 을 검사해주는 점이 <input type="text">로 만드는 것과 다르다.
- email 주소 입력창이 라운드 처리되어있고
- 반응형 웹으로 만들어져있으므로 크기에 따라 길이가 변화한다.
부트스트랩 사용 예제13
6. Inputs
- Inputs : 입력양식/선택양식에 관련, input, textarea, checkbox, radio, select 등
- ex)
- input01.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/4.5.2/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form control: input</h2>
<p>The form below contains two input elements; one of type text
and one of type password:</p>
<form action="action_page.php">
<div class="form-group">
<label for="usr">Name:</label> <input type="text"
class="form-control" id="usr" name="username">
</div>
<div class="form-group">
<label for="pwd">Password:</label> <input type="password"
class="form-control" id="pwd" name="password">
</div>
<div class="form-group">
<label for="comment">Comment:</label>
<textarea class="form-control" rows="5" id="comment"></textarea>
</div>
<!-- checkbox -->
취미
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">게임
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="">쇼핑
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input" value="" disabled>등산
</label>
</div>
<!-- radio button -->
좋아하는 계절은?
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">봄
</label>
</div>
<div class="form-check">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">여름
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio">가을
</label>
</div>
<div class="form-check disabled">
<label class="form-check-label">
<input type="radio" class="form-check-input" name="optradio" disabled>겨울
</label>
</div>
<!-- select list -->
<div class="form-group">
<label for="sel1">Select list:</label>
<select class="form-control" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<!-- Form Control File and Range -->
<input type="range" class="form-control-range">
<input type="file" class="form-control-file border">
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>- CDN 방식으로 불러오고 있다.
1. text와 textarea
- <input type=text> 와 <textarea> 에서는 라운드 형태로 만들고 있다.
- 각 <input type=text> 와 <textarea> 를 감싼 div 태그에서 class="form-group", input 태그 / textarea 태그에서 class="form-control" 적용
2. checkbox와 radio
- 각 체크박스와 라디오버튼은 <div>로 감싸져 있고 거기서 class="form-check" , <input> 태그에서 class="form-check-input" 적용
- 체크박스와 라디오버튼에 같은 클래스가 적용됨
- select 박스에서 전체를 div로 감싸고 클래스값이 class="form-group" 이고 <select> 태그에서 <selec class="form-control"을 적용해준다.
- <input type="range"> 는 움직일 수 있는 바이다, class="form-control-range" 를 적용해준다.
- <input type="file">을 하면 첨부파일 올릴수있는 기능이 만들어지고 class="form-control-file border" 적용시 테두리가 만들어짐
- <input type="submit">을 하면 전송기능이 있는 버튼이 만들어지고 그 버튼에 CSS를 적용해서 파란색으로 만들었다.
+ 체크박스와 라디오버튼은 CSS 적용되어 파란색으로 체크가 표시된다는 점이 다르다
+ select 박스에 CSS가 적용되어 전체화면에 꽉찬 형태로 길게 출력된다 (기존은 안의 내용 길이에 맞게 만들어짐)
+ 등산이라는 체크박스에는 disabled 가 되어있으므로 비활성화(체크불가)
+ input type="range"는 웹표준을 준수하는 브라우저에서 사용 가능하다.
+ Inputs 관련 w3schools 페이지
부트스트랩 사용 예제14
7. Carousel
- Carousel : 자동으로 다음 이미지로 넘어가기도 하고 제어버튼을 통해서 다음 이미지로 넘어갈 수 있다.
Carousel 용어
- Indicators : 이미지 하단의 바
- slideshows : 돌아가는 이미지등, 자동으로 돌아가는 슬라이드쇼
- left and right controls : 이미지 좌우의 화살표 모양
- ex)
- carousel.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
/* Make the image fully responsive */
.carousel-inner img {
width: 100%;
height: 300;
}
</style>
</head>
<body>
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="img/Koala.jpg" alt="Los Angeles" width="100%" height="300">
</div>
<div class="carousel-item">
<img src="img/Lighthouse.jpg" alt="Chicago" width="100%" height="300">
</div>
<div class="carousel-item">
<img src="img/Tulips.jpg" alt="New York" width="100%" height="300">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</body>
</html>- 전체가 바깥쪽 div로 감싸져 있고 id="demo"로 되어있음
- Indicator 부분에서 class="active"로 선택된 li 가 가장 처음에 나타남
- Indicator 부분에서 data-target="#demo" 이다, 즉 바깥쪽 div 태그와 이름을 맞춰야함
- slidshow 부분에서 전체를 <div class="carousel-inner"> 로 하고 그 안의 이미지들은 각 <div>로 감싸져있고 class="carousel-item" 을 적용한다, active인게 처음 나타나는 것
- control 부분에서 왼쪽 화살표와 오른쪽 화살표가 각각 <a>로 감싸져 있고 class="carousel-control-prev" 적용
- left control 에서 span 태그에 class="carousel-control-prev-icon" 가 적용되면 왼쪽 화살표(<) 를 만들어줌
- 끝까지 도달시 로테이션이 됨
- 가만히 둬도 자동으로 넘어감
- 화살표를 눌러서도 넘길 수 있음
+ Carousel 용어 정리
부트스트랩 사용 예제15
8. Modal
- Modal : 모달창은 많은 내용을 띄워주는 팝업창
- ex)
- 버튼 클릭시 모달창을 띄워주고 있다, 안에 많은 내용 넣을 수 있음
- modal.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">모달 헤드</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>- 버튼을 누르면 모달창을 띄우고 싶을때 그 버튼은 data-toggle="modal" data-target="#myModal" 로 되어있다, 이때 이 #myModal 은 모달창의 div id값과 일치해야한다.
- 모달은 모달헤드, 모달바디, 모달푸트 로 3가지 영역으로 나눠져있다. 각 영역의 div에 modal-header 등의 클래스를 적용해줘야한다.
- 모달 헤드 부분에 우측 상단의 X 버튼을 만들기위해 버튼에 class="close"를 적용시 X를 누르면 모달창을 닫아준다.
- 모달 푸트 부분에 Close 버튼을 만들기 위해 data-dismiss="modal" 를 적용한다.
- Close 를 누르거나 바깥쪽을 찍으면 모달창이 닫힌다
부트스트랩 사용 예제16
9. Scrollspy
- Scrollspy : 섹션을 누를때마다 그 내용만 나오게 한다.
ex)
- scrollspy.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
position: relative;
}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#section1">Section 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section2">Section 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#section3">Section 3</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
Section 4
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#section41">Link 1</a>
<a class="dropdown-item" href="#section42">Link 2</a>
</div>
</li>
</ul>
</nav>
<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>- <body> 태그 안에 data-spy="scroll" data-target=".navbar" 와 data-offset = 5 를 적용
- 상단의 바가 네비게이션 바이다, 그걸 선택시 링크를 걸어 관련 내용이 밑에 나타나도록 함, 링크 <a> 의 href= 에는 내용을 보여줄 <div>의 id값과 일치되어야한다. ex) a태그 안 href="#section1" , div 태그 안 id=section1
- 그렇게 id값을 일치시키면 그 링크(네비게이션 메뉴) 를 눌렀을때 그 div 태그안의 내용이 나타난다.
- Section 4는 다시 서브메뉴를 만들어야하므로 dropdown 을 적용함.
- <nav> 태그 안의 내용이 네비게이션 바를 만드는 역할, 여러 클래스값 적용되어있고 , <nav> 태그 안 <ul> 태그와 <li>태그를 를 통해 목록을 작성해준다.
- 클릭시 그 메뉴와 연결된 내용이 바로 아래쪽에 나온다
- Section 4는 분기를 시켜서 보여주고 있음
- 상단바는 고정되어있고 본문만 바뀌고있다.
- 스크롤바를 움직여서도 아래내용을 볼수있다.
부트스트랩 사용 예제17
10. Filters
- Filters : 일종의 검색기능 지원, 안의 데이터를 search
ex) j입력시 j가포함된 데이터를 뽑아온다.
- filter.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>
<input class="form-control" id="myInput" type="text" placeholder="Search..">
<br>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody id="myTable">
<tr>
<td>John</td>
<td>Doe</td>
<td>john@example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary@mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july@greatstuff.com</td>
</tr>
<tr>
<td>Anja</td>
<td>Ravendale</td>
<td>a_r@test.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>- 부트스트랩만으로 구현 불가능하고 안에 jQuery 기능이 들어가야 검색기능 지원 가능
- 검색어 입력 양식 input 안에 class="form-control" 을 적용하고 있다
- 테이블에도 부트스트랩을 적용해서 테두리있는 표를 만들어준다.
jQuery 코드 간략 설명
- $ 는 jQuery 함수를 의미한다, $()대신 jQuery() 라고 써도 된다.
- jQuery 함수는 태그를 구해오는 역할을 한다.
- $(document).ready(function(){}); 는 html 문서의 로딩이 끝나 준비가 되면 안의 내용을 실행시켜라는 의미이다.
- $("#myInput") 은 id값이 myInput 인 태그를 구해와라는 의미, 즉 검색어 입력양식을 구해오는 함수이다.
- $("#myInput").on("keyup", function(){}); 은 keyup 이벤트가 발생하면 안의 내용을 실행시켜라는 의미이다.
- $(this).val().toLowerCase() 는 현재 이벤트가 발생한 태그의 값을 소문자로 변환해서 반환한다.
- $("myTable tr").filter(function(){}); 에서 filter() 함수로 필터기능을 수행한다, 검색된 내용을 테이블에 보여주는 기능을 수행함.
+ 값을 입력하고 손을 떼는 순간 keyup이벤트, 값을 입력하려 키보드를 눌렀을때는 keydown 이벤트가 발생한다.
+ 필터 관련 w3school 페이지
부트스트랩 사용 예제18
11.Tab
- 토글 탭
- w3school 에서 CSS 부분 아닌 JS Tab 으로 들어가야함
- jQuery 나 JS로 구현해야한다.
ex)
- tab.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h2>Toggleable Tabs</h2>
<br>
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">회원가입</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">로그인</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3">게시판</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="container tab-pane fade"><br>
<h3>Menu 3</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</body>
</html>- <nav> 태그 안의 네비게이션 메뉴들은 주로 ul 태그로 만든다
- <li> 태그 안 <a> 태그안에 href="#home" 으로 하면 그 탭을 눌렀을때 보여줄 내용 div 의 id값이 home 이다.
- 즉 <a> 태그의 href= 값과 타깃이 되는 div id값과 맞춰야한다.
- <li> 태그 안 <a> 태그안에 class="active" 인 탭이 가장 먼저 활성화(선택된) 상태로 나타나고, 그 관련 내용이 아래에 나타난다.
- 내용부분은 <div class="tab-content"> 로 전체를 감싸야하고 각각의 내용들은 div 태그 안에서 class="container tab-pane fade" 를 적용한다.
+ Tab은 부트스트랩으로도 만들수 있고 jQuery UI 로도 만들수있다.
부트스트랩 사용 예제19
12. Tamplate
- Template : 전체적인 레이아웃을 잡아줌
1. Bootstrap4 의 Tamplate (많이 없다)
ex) Bootstrap3 의 Template
- 템플릿을 가져와서 필요에 맞게 바꿀 수 있다.
- Simply Me 는 개인용 페이지, Company 는 회사용 페이지, Band는 밴드용 페이지 템플릿 지원
- Webpage Try it Yourself 로 들어가보자
- 이 Webpage 가져와서 만들어볼것, 코드 그대로 가져오자
- webpage.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Contact</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
프로젝트 시작 (개요)
위의 내용을 응용을 해서 네비게이션에 나타나는 내용을 바꾸자
1. About, Projects, Contact > 게시판, 회원관리, 로그인 으로 변경
2. 각 네비게이션 메뉴를 누르면 맞는 화면이 center영역에 나타도록하자
- 회원가입 버튼을 누르면 회원가입 폼, 로그인을 누르면 로그인 폼, 게시판 누르면 게시판 폼 이 center영역에 나타나도록 하자.
- 공통적으로 들어가는 내용(네비게이션, 푸터) 부분을 고정하고, 본문내용만 바꾸자
- 그것을 위해서 header와 footer를 파일로 만들어서 따로 빼고 jsp의 include 를 통해 넣는 분리작업을 해야한다.
- 상단의 네비게이션 메뉴까지를 따로 파일로 만들자 -> header.jsp
- 하단의 footer 부분을 따로 파일로 만들자 -> footer.jsp
3. header 부분과 footer 부분을 분리
- 헤더부분
- 푸터부분
프로젝트
1. 새로운 프로젝트 myhome 프로젝트를 만들자
- File-New-Dynamic Web Project
2. myhome/WebConent 하위에 index.jsp 라는 파일 생성
- index.html 에는 webpage.html 의 내용을 모두 복붙한다. (맨 위 2줄 jsp부분 제외)
3. index.jsp 내용 수정
- 회원가입, 로그인, 게시판에 링크 연결
- a href= 에 # 대신 index.jsp 와 memberform.jsp, loginform.jsp, boardform.jsp 로 연결한다.
4. myhome/Webcontent 에 header.jsp 와 footer.jsp 파일 생성 후 작성
- index.jsp 파일의 header 부분을 잘라서 header.jsp 파일에 복붙
- 기존의 내용은 주석으로 막기
- header와 footer 모듈을 만드는 과정이다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li><a href="memberform.jsp">회원가입</a></li>
<li><a href="loginform.jsp">로그인</a></li>
<li><a href="boardform.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>- index.jsp 에서 이 부분을 복사를 하고 , index.jsp 파일 에서는 이 부분을 주석을 막음
- 이 부분을 header.jsp 의 1,2라인을 제외한 곳에 붙여넣기 한다
- header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li><a href="memberform.jsp">회원가입</a></li>
<li><a href="loginform.jsp">로그인</a></li>
<li><a href="boardform.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
5. header.jsp 파일을 index.jsp에서 불러오기
- 마치 그 자리에 있는것처럼 포함됨
<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>- index.jsp 파일에 이 include 코드를 넣으면 마치 이 자리에 header.jsp의 내용이 있는것 처럼 작동함
- 똑같이 동작함
6. footer도 마찬가지로 따로 뽑아서 footer.jsp 파일로 생성
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>- 이 부분을 index.jsp 에서 복사하고 index.jsp 파일에서 이 부분 주석처리
- 이 부분을 footer.jsp에 1,2 라인을 제외한 곳에 복사하기
- footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html>
7. footer.jsp 파일을 index.jsp에서 불러오기
<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>- index.jsp 파일에 이 include 코드를 넣으면 마치 이 자리에 footer.jsp의 내용이 있는것 처럼 작동함
+ 같은 디렉토리 내에 파일이 있으므로 이름만으로 불러올 수 있다.
- 똑같이 동작함
index.jsp 현재 코드
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!-- <!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 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>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 15px;
}
/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;}
}
</style>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Logo</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="active"><a href="index.jsp">Home</a></li>
<li><a href="memberform.jsp">회원가입</a></li>
<li><a href="loginform.jsp">로그인</a></li>
<li><a href="boardform.jsp">게시판</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav> -->
<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>
<div class="container-fluid text-center">
<div class="row content">
<div class="col-sm-2 sidenav">
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
<p><a href="#">Link</a></p>
</div>
<div class="col-sm-8 text-left">
<h1>Welcome</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<hr>
<h3>Test</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p>
</div>
<div class="well">
<p>ADS</p>
</div>
</div>
</div>
</div>
<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>
<!-- <footer class="container-fluid text-center">
<p>Footer Text</p>
</footer>
</body>
</html> -->
8. center에 보여줄 내용인 파일들을 만들기
- 예전에 만들었던 회원가입, 로그인, 게시판 html 폼에서 복붙을 해서 memberform.jsp, loginform.jsp, boardform.jsp 파일 생성
- jsp 태그를 쓰기 위해선 jsp파일을 써야하므로 복붙해서 jsp파일로 만드는 것
- 파일 생성 완료
9. memberform.jsp 파일에는 예전에 만들었던 memberform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기
+ 1,2 라인은 인코딩 관련 내용이므로 빠지면 안된다.
- 현재 memberform.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 폼</title>
</head>
<body>
<form method="post" action="member.jsp">
<table border=1 width=600 align=center>
<caption>회원 가입폼</caption>
<tr>
<th>ID</th>
<td><input type=text name="id" id="id" autofocus="autofocus">
<input type="button" value="ID중복검사">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password name="passwd" id="passwd">
</td>
</tr>
<tr>
<th>성명</th>
<td><input type=text name="name" id="name">
</td>
</tr>
<tr>
<th>주민번호</th>
<td><input type=text size=6 maxlength=6 name="jumin1" id="jumin1">-
<input type=text size=7 maxlength=7 name="jumin2" id="jumin2">
</td>
</tr>
<tr>
<th>E-Mail</th>
<td><input type=text size=10 name="mailid" id="mailid">@
<input type=text size=15 name="domain" id="domain">
<select>
<option value="">직접입력</option>
<option value="naver.com">네이버</option>
<option value="daum.net">다음</option>
<option value="nate.com">네이트</option>
<option value="gmail.com">구글</option>
</select>
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input type=text size=4 maxlength=4 name="tel1" id="tel1">-
<input type=text size=4 maxlength=4 name="tel2" id="tel2">-
<input type=text size=4 maxlength=4 name="tel3" id="tel3">
</td>
</tr>
<tr>
<th>핸드폰</th>
<td><select name="phone1" id="phone1">
<option value="">번호선택</option>
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>-
<input type=text size=4 maxlength=4 name="phone2" id="phone2">-
<input type=text size=4 maxlength=4 name="phone3" id="phone3">
</td>
</tr>
<tr>
<th>우편번호</th>
<td><input type=text size=5 maxlenth=5 name="post" id="post">
<input type="button" value="우편검색">
</td>
</tr>
<tr>
<th>주소</th>
<td><input type=text size=70 name="address" id="address">
</td>
</tr>
<tr>
<th>성별</th>
<td><input type="radio" name="gender" value="남자">남자
<input type="radio" name="gender" value="여자">여자
</td>
</tr>
<tr>
<th>취미</th>
<td><input type="checkbox" name="hobby" value="공부" checked="checked">공부
<input type="checkbox" name="hobby" value="등산">등산
<input type="checkbox" name="hobby" value="게임">게임
<input type="checkbox" name="hobby" value="낚시">낚시
<input type="checkbox" name="hobby" value="쇼핑">쇼핑
</td>
</tr>
<tr>
<th>자기소개</th>
<td><textarea rows="5" cols="70"
name="intro" id="intro"
placeholder="자기소개를 100자 이내로 입력하세요"></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="회원가입">
<input type="reset" value="취소">
<!-- 이미지 버튼 : 전송 기능 있음 -->
<input type="image" src="img/clock.jpg" width=30>
</td>
</tr>
</table>
</form>
</body>
</html>
10. loginform.jsp 파일에는 예전에 만들었던 loginform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기
- 현재 loginform.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>로그인 폼</title>
</head>
<body>
<!--
method : 값을 전달하는 방식을 설정 : get, post
action : 값이 전달될 파일을 설정
-->
<form method="get" action="login.jsp">
<table border=1 width=350 align=center>
<caption>로그인</caption>
<tr>
<td>ID</td>
<td><input type=text size=20
maxlength=10
autofocus="autofocus"
required="required"
name="id"
id="id">
</td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type=password size=20
required="required"
name="passwd"
id="passwd"></td>
</tr>
<tr>
<td colspan=2 align=center>
<input type=submit value="로그인"><!-- 전송기능이 있는 버튼 -->
<input type=reset value="취소"><!-- 초기화 버튼 -->
</td>
</tr>
</table>
</form>
</body>
</html>
11. boardform.jsp 파일에는 예전에 만들었던 boardform.html 파일 내용을 복사해서 1,2라인을 제외한 곳에 붙여넣기
- 현재 boardform.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판</title>
</head>
<body>
<form method="post" action="board.jsp">
<table border=1 width=500 align=center>
<caption>게시판</caption>
<tr>
<th>작성자</th>
<td><input type=text size=20 name="writer"
id="writer"
placeholder="작성자명 입력"
value="lay">
</td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type=password size=20 name="passwd"
id="passwd"
placeholder="2~8자 이내 입력">
</td>
</tr>
<tr>
<th>제목</th>
<td><input type=text size=50 name="subject"
id="subject"
placeholder="50자 이내로 입력">
</td>
</tr>
<tr>
<th>내용</th>
<td><textarea rows="5" cols="50" name="content"
id="content" placeholder="200자 이내로 입력">내용입력</textarea>
</td>
</tr>
<tr>
<th>파일첨부</th>
<td><input type=file name="myfile" id="myfile">
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="글작성1"><!-- 전송기능 있는 버튼 -->
<input type="button" value="글작성2"><!-- 전송기능 없는 버튼 -->
<button>글작성3</button><!-- 전송기능 있는 버튼 -->
<button type="submit">글작성4</button><!-- 전송기능 있는 버튼 -->
<button type="button">글작성5</button><!-- 전송기능 없는 버튼 -->
<input type="reset" value="취소"><!-- 초기화 버튼 -->
<button type="reset">초기화</button><!-- 초기화 버튼 -->
</td>
</tr>
</table>
</form>
</body>
</html>
12. index.jsp 실행하기
- 회원가입 메뉴를 누르면
- 로그인 메뉴를 누르면
- 폼은 출력되지만 header 와 footer 부분이 안나온다
- 각 jsp 파일에 header, footer 부분을 include해서 불러온다.
13. memberform.jsp 파일에서 header.jsp 와 footer.jsp 파일 불러오기
<!-- header.jsp 파일 불러오기 -->
<%@ include file="header.jsp" %>
- memberform.jsp 위쪽 부분에 include 함
<!-- footer.jsp 파일 불러오기 -->
<%@ include file="footer.jsp" %>
- memberform.jsp 아래쪽 부분에 include 함
- index.jsp 파일을 실행하고 회원가입 메뉴를 누르면 헤더와 푸터 부분이 나오고 센터에 회원가입 폼이 나온다
- 회원가입 메뉴를 누르면 뜨는 창
13. loginform.jsp 파일과 boardform.jsp 파일에서도 header.jsp 와 footer.jsp 파일 불러오기
- 로그인 메뉴를 누르면 뜨는 창
- 게시판 메뉴를 누르면 뜨는 창
+ Home 메뉴를 누르면 index.jsp 가 실행됨
.
13. myhome 프로젝트를 Export 해보자
- Dynamic Web Project는 Export 기능이 있다.
- Export시 .war 파일로 압축되어 1개의 파일이 된다.
- 이걸로 프로젝트를 집에 가져가거나 다른 시스템으로 export 가능
- 현재 프로젝트명.war 로 프로젝트가 압축됨 (알집, 반디집등으로 압축해제 가능)
+ web 프로젝트부터 .war로 압축해보자 (export)
- 어디에 저장할건지 저장위치 설정
- 소스파일도 export 하고 동일파일이 있으면 overwrite하도록 체크했다
- web.war 가 생성되었다
+ 배포할때도 이런방식으로 배포한다.
+ web.war를 import 해보자 (불러오자)
- 집으로 와서 이 파일을 import
- 이렇게 import 가능하다
- 또는 File-Import... 에서
- 이렇게 들어가도 된다.
+ 이미 web 프로젝트가 있으므로 import할때는 다른이름으로 import하자 (동일 이름 프로젝트 만들지 않기위해)
- web과 똑같은 내용의 web1이 생긴다.
- 삭제할땐 delete를 누르고 반드시 체크를 해야 깔끔하게 지워진다.
14. Export 한 myhome 프로젝트를 아파치 톰캣에 배포
- 이제 myhome 프로젝트를 .war로 압축해서 export하고 아파치 톰캣에 배포해보자.
- 저장 위치는 바탕화면으로 설정했다.
- 확장자는 .war란 압축파일
- 배포하기 위해 이 .war를 압축해제하자 (반디집 사용)
- 이 파일들을 아파치 톰캣의 홈디렉토리인 ROOT 디렉토리에 넣으면 서비스 할 수 있다.
- 이클립스 종료 시키고(개발환경 끝) 아파치 톰캣을 구동시키자
- 서비스를 하기 위해 아파치 톰캣 서버를 구동
- 개발을 위해 중지했던 아파치 톰캣 서버를 시작하자.
- 웹 브라우저를 켜서 아파티 톰캣 서버 테스트 localhost
- 아파치 톰캣 설치시에 80 포트로 했으므로 클라이언트 요청시 80 포트 생략 가능 (conf/server.xml 에서 볼 수 있다)
- 고양이 페이지는 ROOT 홈디렉토리의 index.jsp 가 실행되고 있는 것이다
- 아파치 톰캣이 설치된 C:\Program Files\Apache Software Foundation\Tomcat 9.0
- C:\Program Files\Apache Software Foundation\Tomcat 9.0\webapps\ROOT 가 홈 디렉토리이다.
- ROOT 안 기존 내용을 지우고 우리가 만들었던 myhome.war 압축 푼 내용을 ROOT 안에 복붙하자.
- 그러면 우리가 만든 컨텐츠를 서비스 할 수 있다.
- 이제 localhost를 주소창에 치면 우리가 만든 컨텐츠가 나온다.
- 배포 완료!
- 나중에 아마존에서 배포할떄도 같은 방식을 사용한다.
+ 배포 추가
- 현재는 사설 ip이므로 다른 컴에서 접근 불가능하다
- 항상 켜져있는 서버와 공인 ip가 필요하다
- 웹호스팅 신청이나 aws 를 이용해야함
+ 개발과 프로젝트
- 개발시에는 프로젝트 myhome이 필요했지만
- 배포시에는 안의 내용들을 복붙해서 옮겼다
- 즉 프로젝트는 개발시에 필요한 것이다.
+ 다음 Javascript 수업을 위해 개발환경으로 돌아가야 하므로 아파치 톰캣 중지
+ 개인 프로젝트시에 아이콘이 필요하면 Bootstrap3 Glyphicons에서 사용 가능.
Javascript
Javascript
- 자바는 다용도로 활용되지만 Javascript는 HTML에 추가되어 웹상에서만 사용 가능하다.
- 역할 : 유효성 검사, 여러 동적인 이벤트를 처리, 팝업창 등
- Javascript 라이브러리 프레임워크 : jQuery, React, Vue 등
- jQuery 는 Javascript 라이브러리 함수형태로 지원
- 자주쓰는 기능과 폼 관련
실습 준비
1. web/WebContent 폴더 하위에 javascript 폴더를 생성하고 그 javascript 폴더 하위에 work 폴더 생성
2. first.html 파일 생성
- javascript도 html 코드 안에 추가해서 사용한다.
3. script 태그를 써서 알려줘야한다.
- html 파일 내에서 javascript를 쓰려면 javascript라는 것을 브라우저에게 알려줘야한다
- script 태그는 head 태그안에 써도 되고 body 태그 안에 써도 된다
- 다만, 함수를 만들때는 script 태그는 가능한한 head 태그안에 쓰자
+ javascript는 인터프리트 언어 이므로 함수 위치가 중요, body 태그에서 함수를 호출해야하므로 script 태그는 head 태그안에 넣기
+ javascript : 객체 기반 언어 (완전한 객체 지향 언어가 아니다) / java : 객체 지향 언어
- 내장 객체 중 document 객체를 불러와야함, 그냥 자바라고 쓰면 실행시 아무것도 안뜬다
- javascript에서 처음 지원하는 내장 객체가 document고 그 함수 중 write를 쓰면 출력해준다.
- 문서와 관련된 내장객체인 document 를 이용해야만 출력이 가능하다
4. 자바스크립트 문법 특성
- javascript는 문법이 느슨하다.
- ; 를 쓰지 않아도 실행됨
- javascript에서는 문자 출력시 " "(쌍따옴표) 를 써도 되고 ' ' (외따옴표) 를 써도 된다.( 자바는 쌍따옴표만 가능)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
document.write('처음 작성하는 자바스크립트1');
document.write("처음 작성하는 자바스크립트2");
</script>
</body>
</html>
- 줄이 바뀌지 않는다
- writeln 을 사용해도 줄이 바뀌지 않는다.
- br 태그나 p 태그를 써야 줄바꿈 가능하다
- br 태그를 그냥 쓰면 오류 발생
- 쌍따옴표나 외따옴표 안에 무엇이든 써야한다.
- <br> 이나 <p>를 쌍따옴표나 외따옴표 안에 써야한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
document.write('처음 작성하는 자바스크립트1<br>');
document.write("처음 작성하는 자바스크립트2"+"<br>");
document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>
</body>
</html>
+ head 태그안에 <script> 내용을 넣어도 똑같다
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
document.write('처음 작성하는 자바스크립트1<br>');
document.write("처음 작성하는 자바스크립트2"+"<br>");
document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>
</head>
<body>
</body>
</html>
+ javascript 에러 확인 : F12 개발자 도구
자바 스크립트 선언 방식
1. <script> </script>
2. <script> 를 작성할때 <script type="text/javascript>
<script type="text/javascript">
document.write('처음 작성하는 자바스크립트1<br>');
</script>3.
<script language="javascript">
document.write('처음 작성하는 자바스크립트5<br>');
</script>
2. 콘솔창에서 출력할때는 colsole.log() 로 출력
- 브라우저가 아닌 콘솔창에 출력
<script language="javascript">
document.write('처음 작성하는 자바스크립트5<br>');
console.log('콘솔에 출력됨');
</script>- 브라우저에는 console.log() 안의 내용이 출력되지 않는다.
- F12 개발자 도구에서 Console 을 누르면 확인 가능하다.
자바스크립트 주석
- 자바와 동일하다
1. 단일행 주석 : //
2. 다중행 주석 : /* ~ */
+ 주석 단축키 : Ctrl + Shift + /
- first.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 자바스크립트 주석
1. 단일행 주석 : //
2. 다중행 주석 : /* ~ */
주석 단축키 : Ctrl + Shift + /
-->
<script>
document.write('처음 작성하는 자바스크립트1<br>');
document.write("처음 작성하는 자바스크립트2"+"<br>");
document.write("처음 작성하는 자바스크립트3"+'<br>');
</script>
<script type="text/javascript">
document.write('처음 작성하는 자바스크립트4<br>');
</script>
<script language="javascript">
document.write('처음 작성하는 자바스크립트5<br>');
console.log('콘솔에 출력됨');
</script>
</body>
</html>
출력하는 방법
1. 브라우저로 출력할때는 document.write() 로 출력한다. (위에서 했음)
2. 콘솔창에서 출력할때는 colsole.log() 로 출력한다 (위에서 했음)
3. alert() 으로 메세지 박스로 메세지를 출력한다.
- 유효성 검사할때 메세지 출력이 필요하면 주로 alert()으로 출력을 한다.
3. alert() 으로 메세지를 출력
- WebContent/javascript/work 안에 alert.html 파일 생성
- alert.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script>
document.write("출력성공1<br>"); // 브라우저에 출력
document.write("출력성공2<br>");
console.log("콘솔창에 출력"); // 콘솔창에 출력 : 단축키(F12)
</script>
<script>
alert("경고창 출력") // 메세지 박스
alert("이름을 입력하세요.")
</script>
</body>
</html>
- 현재는 경고창에 '확인'만 나온다
- alert이 우선순위가 높으므로 가장 먼저 출력
- 브라우저 최상위 객체인 window 에서 alert() 를 지원
자바스크립트 구조1
- 자바스크립트는 내장객체가 지원되는 언어이다.
- 내장 객체는 이미 자바스크립트 설계시부터 있어서 그냥 쓸 수있는 객체이다.
- window 객체는 브라우저 관련 최상위 객체
- window 객체를 상속받는 하위 객체는 document 객체(문서관련 최상위 객체), location 객체, history 객체, screen 객체, navigator 객체가 있다.
- document 객체를 상속받는 form 객체와 image 객체가 있다
- form 객체 하위 객체들은 button, submit, reset, radio 등...
자바스크립트 구조2
- 객체 사용시엔 최상위 객체부터 . 으로 연결해서 써야한다
- window 객체는 이떄 생략 가능 (window 객체 함수는 주로 팝업창 띄우기, 닫기 등)
ex) 원칙적으로는 window.document.write() 로 써야하지만 window 는 생략 가능
- 객체들은 모두 소문자이고 대소문자 구분한다.
- alert()은 window 객체에서 지원되는 메소드명 window.alert() 이지만 window 생략 가능
+ Javascript는 내장객체 api 문서가 없다, 정리된 자료를 찾아야함.
<script>
window.alert("경고창 출력") // 메세지 박스
alert("이름을 입력하세요.")
</script>
객체의 구조
- 객체에는 특성들이 있다 (= 자바의 필드)
- 객체에는 메소드들이 있다
ex) window 객체의 alert() -> window.alert() 처럼 객체명.메소드명() 으로 쓴다.
ex) window 객체의 confirm() 에서는 확인을 받기 위한 대화상자를 출력해준다.
ex) window 객체의 open() : 윈도우 열어줌 / close() : 윈도우 닫아줌
'국비지원 과정 > 웹표준' 카테고리의 다른 글
| 코딩 43일 / 22.08.19 / jQuery의 선택자, 함수, 이벤트 함수 (0) | 2022.08.19 |
|---|---|
| 코딩 39일 / 2022.08.12 / 자바스크립트 사용자 정의 함수,배열,객체,String 객체,Math 객체 (0) | 2022.08.12 |
| 코딩 38일 / 2022.08.11 / 자바스크립트 연산자,제어문,내장 함수2 (0) | 2022.08.11 |
| 코딩 36일 / 2022.08.09 / CSS 속성2,레이아웃,배치,반응형 웹,부트스트랩1 (0) | 2022.08.09 |
| 코딩 35일 / 2022.08.08 / CSS 선택자,단위,속성1 (0) | 2022.08.08 |