2024. 2. 15. 17:53ㆍJAVA
주민등록번호 6자리까지 입력 가능하게 하는 틀 만들기
변경 사항 1
변경 사항 2
테스트
백 슬래시가 안먹힘
이건 무시하기
== 8 키코드를 쓴 거라서 : 8 번이 백슬래시고 keycode 라는 값이 백슬래시하게 해줘서 그 자체로 가능한 것
추가하면 안먹힘
컨테이너 요소들
: 카드(테두리)-테이블(제목/내용)-센터(확인 취소 버튼)
container-fluid 화면 끝까지 펼쳐지듯이 쭉 이어지는 look
파란색 부분이 fluid
container : 여백이 없이 꽉 차는 것
grid : 칼럼1 / 칼럼2 / 칼럼3
어사이드
메인
내비게이터
탑
카피라이트 바텀
파워포인트로 구현한 모습
col- p-3 bg-primary text-white
dddd
// 테이블 만들기 (가운데 정렬 포함_완전히 가운데는 아님)
결과 값 (이하 사진)
// 폭을 조절하는 방법 style width
결과 값
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>부스트트랩 페이지</h1>
<p>이미지</p>
</div>
<div class="container mt-3">
<div class="row">
<div class="col">
<h2>Rounded Corners</h2>
<p>The .rounded class adds rounded corners to an image:</p></div>
<div class="col">
<h2>Circle</h2>
<p>The .rounded-circle class shapes the image to a circle:</p> </div>
<div class="col">
<h2>Thumbnail</h2>
<p>The .img-thumbnail class creates a thumbnail of the image:</p></div>
<div class="container mt-3">
<h2>Aligning images</h2>
<p>Use the float classes to float the image to the left or to the right:</p>
<div class="row">
<div class="col">
</div>
</div>
</div>
</div>
<div class="container mt-3">
<h2>Centered Image</h2>
<p>Center an image by adding the utility classes .mx-auto (margin:auto) and .d-block (display:block) to
theimage:</p>
</div>
</body>
</html>
<!-- one soure multi use bootstrap responsivenite를 준다
www.startbootstrap.com-->
웹페이지 구현모습 (위의 코드)
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js
<style>
* {
font-family: 'Noto Sans KR', sans-serif;
}
a {
text-decoration: none;
}
</style>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>부스트트랩 페이지</h1>
<p>버튼</p>
</div>
<div class="container mt-3">
<button type="button" class="btn">Basic</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-link">Link</button>
</div>
<div class="container mt-3">
<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>
</div>
<div class="container mt-3">
<h2>Button Sizes</h2>
<button type="button" class="btn btn-primary btn-lg">Large</button>
<button type="button" class="btn btn-primary btn-md">Default</button>
<button type="button" class="btn btn-primary btn-sm">Small</button>
</div>
<div class="container mt-3">
<h2>Button States</h2>
<button type="button" class="btn btn-primary">Primary Button</button>
<button type="button" class="btn btn-primary active">Active Primary</button>
<button type="button" class="btn btn-primary" disabled>Disabled Primary</button>
<a href="#" class="btn btn-primary disabled">Disabled Link</a>
</div>
</body>
</html>
<!-- one soure multi use bootstrap responsivenite를 준다
www.startbootstrap.com-->
홈페이지 적용시 (바로 위 코드)
'JAVA' 카테고리의 다른 글
| 2024.01.22 백준도장 10926번 문제 (0) | 2024.02.16 |
|---|---|
| 2024.01.20 Java for문 while문 do-while문 자바 (0) | 2024.02.15 |
| 2024.01.19 평년 윤년 Java (0) | 2024.02.15 |