BootStrap의 활용 - (1)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Member Insert Data</title>
<!-- 부트스트랩은 제이쿼리 자바 스크립트를 토대로 적용하므로 jquery.min.js 파일을 먼저 포함시켜야 합니다. -->
<script type="text/javascript" src="jquery.min.js"></script>
<!-- bootstrap.min.css 파일은 부트 스트랩을 위한 스타일 시트 파일입니다.-->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
<!-- bootstrap.bundle.min.js 파일은 부트 스트랩을 위한 자바 스크립트 파일입니다. -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<style type="text/css">
.container{margin-top: 100px; border: 0px solid red;}
.input-group{margin: 7px;}
.input-group-text{
display: block;
margin-left: auto;
margin-right: auto;
}
#buttonset{margin-top: 15px;}
</style>
</head>
<body>
<div class="container mt-3">
<h2>회원 가입</h2>
<!-- <p>는 한단락을 표현할 때 사용합니다. 보통 긴 문장을 쓸때 사용합니다. -->
<p>😊 신규 회원이 가입하는 페이지 입니다. 😊</p>
<form action="/action_page.php">
<div class="input-group">
<span class="input-group-text">아이디</span> <input type="text" id="id"
name="id" class="form-control" placeholder="아이디를 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">이름</span> <input type="text"
id="name" name="name" class="form-control"
placeholder="이름을 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">비밀번호</span> <input type="password"
id="password" name="password" class="form-control"
placeholder="비밀번호를 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">성별</span>
<div class="form-control">
<label class="radio-inline">
<input type="radio" name="gender" value="남자">남자
</label> <label class="radio-inline">
<input type="radio" name="gender" value="여자">여자
</label>
</div>
</div>
<div class="input-group">
<span class="input-group-text">생일</span> <input type="date" id="birth"
name="birth" class="form-control" placeholder="생일을 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">결혼여부</span>
<div class="form-control">
<label class="radio-inline">
<input type="radio" name="marriage" value="결혼">결혼
</label> <label class="radio-inline">
<input type="radio" name="marriage" value="이혼">이혼
</label>
<label class="radio-inline">
<input type="radio" name="marriage" value="미혼">미혼
</label>
</div>
</div>
<div class="input-group">
<span class="input-group-text">급여</span> <input type="number" id="salary"
name="salary" class="form-control" placeholder="급여를 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">주소</span> <input type="text"
id="address" name="address" class="form-control"
placeholder="주소를 입력해 주세요.">
</div>
<div class="input-group">
<span class="input-group-text">관리자</span> <input type="text"
id="manager" name="manager" class="form-control"
placeholder="관리자를 입력해 주세요.">
</div>
<div id="buttonset" class="input-group">
<button type="submit" class="btn btn-primary">가입</button>
<button type="reset" class="btn btn-primary">초기화</button>
</div>
</form>
</div>
</body>
</html>
<참조 URL>
https://www.w3schools.com/bootstrap5/index.php
W3Schools.com
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com