이미지 슬라이드 (carousel)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CDN Content Delivery Network : refer library -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div id="demo" class="carousel slide" data-ride="carousel" data-interval="4000">
<!-- 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="images/la.jpg" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="images/chicago.jpg" alt="Chicago">
</div>
<div class="carousel-item">
<img src="images/ny.jpg" alt="New York">
</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>
</div>
</body>
</html>form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CDN Content Delivery Network : refer library -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<!-- vertical horizontal inline-->
<div class="container">
<h1>Form</h1>
<form action="join.jsp">
<div class="form-group col-md-6">
<!-- .form-group으로 폼 컨트롤 감싸기-->
<label for="email">
Email
</label>
<input type="text" class="form-control" name="email" id="email" placeholder="Email Address">
<!-- .form-control 클래스를 지정-->
</div>
<div class="form-group col-md-6">
<!-- .form-group으로 폼 컨트롤 감싸기-->
<label for="pwd">
Password
</label>
<input type="password" class="form-control" name="pwd" id="pwd" placeholder="Password">
<!-- .form-control 클래스를 지정-->
</div>
<div class="form-group form-check col-md-6 pl-5">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
이메일 저장
</label>
</div>
<div class="col-md-6 text-center">
<button class="btn btn-success btn-block">Login</button>
</div>
</form>
<hr class="border:3px">
<h1>Inline Form</h1>
<form action="join.jsp" class="form-inline">
<label for="email" class="m-3">email</label>
<input type="text" id="email" class="form-control" placeholder="email">
<label for="pwd" class="m-3">password</label>
<input type="password" id="pwd" class="form-control m-3" placeholder="Password">
<div class="form-check col-md-6 pl-5">
<label class="form-check-label">
<input type="checkbox" class="form-check-input">
이메일 저장
</label>
<div class="col-md-6 text-center">
<button class="btn btn-success ">Login</button>
</div>
</div>
</form>
</div>
</body>
</html>list-group
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CDN Content Delivery Network : refer library -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>List Group</h1>
<ul class="list-group">
<li class="list-group-item active"><a class="text-white" href="http://www.naver.com">java</a></li>
<li class="list-group-item"><a href="http://www.daum.net">JavaScript</a></li>
<li class="list-group-item"></li>
</ul>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-success">item1
<span class="badge badge-primary">12</span>
</a>
<a href="#" class="list-group-item list-group-item-warning">item2
<span class="badge badge-success">10</span>
</a>
<a href="#" class="list-group-item list-group-item-info">item3
<span class="badge badge-warning">11</span>
</a>
<a href="#" class="list-group-item list-group-item-danger">item4
<span class="badge badge-danger badge-pill">13</span>
</a>
</div>
</div>
</body>
</html>modal
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- CDN Content Delivery Network : refer library -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css"
integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<body>
<div class="container">
<h1>modal</h1>
<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myLoginModal">
login
</button>
<i class="fas fa-cloud text-primary"></i>
<i class="fas fa-coffee text-info"></i>
<i class="fas fa-car"></i>
<i class="fas fa-file text-danger"></i>
<i class="fas fa-bars text-success"></i>
<!-- The Modal -->
<div class="modal" id="myLoginModal">
<div class="modal-dialog">
<div class="modal-content">
<form action="login.jsp" method="POST">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title text-primary text-center">Login</h4>
<button type="button" class="close" data-dismiss="modal">
×
</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="row m-4">
<div class="col-md-3">
<label for="userid">아이디</label>
</div>
<div class="col-md-9">
<input type="text" class="form-control" name="userid" placeholder="userid" autofocus="autofocus">
</div>
</div>
<div class="row m-3">
<div class="col-md-3">
<label for="pwd">패스워드</label>
</div>
<div class="col-md-9">
<input type="password" class="form-control" name="pwd" placeholder="pwd">
</div>
</div>
<div class="row m-3">
<div class="col-md-12 text-right form-check">
<label for="form-check-label">
<input type="checkbox" class="form-check-input" name="saveId">아이디저장
</label>
</div>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-success" data-dismiss="modal">LOGIN</button>
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</body>
</html>
'개발자 > 국비지원 SW' 카테고리의 다른 글
| 국비지원 59일차 - jQuery 사용법, Selector (기본, 속성, 계층, 필터), event (0) | 2020.07.07 |
|---|---|
| 국비지원 58일차 - JSP, Error처리, include, include action, 홈페이지 연습 (0) | 2020.07.06 |
| 국비지원 56일차 - 팀프로젝트 (0) | 2020.07.02 |
| 국비지원 55일차 - Bootstrap Layout, Color, Card, Table, dropdown (0) | 2020.07.01 |
| 국비지원 54일차 - Servlet Memo 수정 예시 (0) | 2020.06.30 |