한국어

Bootstrap 튜토리얼

Bootstrap 레이아웃

Bootstrap 콘텐츠

Bootstrap 컴포넌트

Bootstrap 폼

부트스트랩 도우미

Bootstrap 유틸리티

Bootstrap 데모

부트스트랩 - 결제 데모

개요

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩을 사용하여 결제 페이지를 만드는 흥미로운 여정을 시작할 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 과정을 안내해 드리는 것을 기쁘게 생각합니다. 코딩에 새로운 사람이라면 걱정하지 마세요 - 우리는 단계별로 진행하며, 결국 당신은 자랑스러운 결제 양식을 만들어낼 것입니다!

Bootstrap-Checkout Demo

부트스트랩은 무엇인가요?

들어가기 전에 부트스트랩에 대해 이야기해 보겠습니다. 집을 짓는 것을 상상해 보세요. 모든 벽을 처음부터 만드는 대신, 미리 만들어진 벽과 지붕을 사용할 수 있다면 얼마나 좋을까요? 부트스트랩은 웹 개발에 이와 같은 역할을 합니다 - 아름다운 웹사이트를 더 쉽고 빠르게 만들 수 있도록 도와주는 미리 만들어진 컴포넌트와 스타일 모음입니다.

프로젝트 설정

단계 1: 부트스트랩 포함

먼저 프로젝트에 부트스트랩을 포함시켜야 합니다. 이는 작업을 시작하기 전에 도구 상자를 준비하는 것과 같습니다. 다음 줄을 HTML 파일의 <head> 부분에 추가하세요:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

이 줄들은 인터넷에서 부트스트랩의 스타일과 스크립트를 가져오므로, 아무것도 다운로드할 필요가 없습니다.

단계 2: 기본 HTML 구조

이제 우리는 기본 HTML 구조를 설정해 보겠습니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Checkout Demo</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1>결제 양식</h1>
<!-- 우리 양식이 여기에 들어갈 것입니다 -->
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

이 코드는 제목과 양식을 담을 컨테이너를 포함한 기본 웹페이지를 만듭니다. container 클래스는 부트스트랩 클래스로, 콘텐츠를 중앙에 정렬하고 약간의 패딩을 추가합니다.

결제 양식 만들기

단계 3: 양식 생성

이제 컨테이너 내에 양식을 추가해 보겠습니다:

<form>
<div class="row">
<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">이름</label>
<input type="text" class="form-control" id="firstName" required>
</div>
<div class="col-md-6 mb-3">
<label for="lastName" class="form-label">성</label>
<input type="text" class="form-control" id="lastName" required>
</div>
</div>

<div class="mb-3">
<label for="email" class="form-label">이메일</label>
<input type="email" class="form-control" id="email" placeholder="[email protected]" required>
</div>

<div class="mb-3">
<label for="address" class="form-label">주소</label>
<input type="text" class="form-control" id="address" placeholder="1234 Main St" required>
</div>

<button class="btn btn-primary btn-lg" type="submit">주문하기</button>
</form>

이를 다음과 같이 설명할 수 있습니다:

  1. 부트스트랩 그리드 시스템을 사용하여 이름과 성을 위한 두 개의 칼럼을 만듭니다.
  2. mb-3 클래스는 각 양식 그룹에 하단 여백을 추가합니다.
  3. form-label과 form-control 클래스는 우리의 레이블과 입력을 스타일링합니다.
  4. btn 클래스는 기본 버튼 스타일을 제공하며, btn-primary은 버튼에 파란색을 주고, btn-lg은 버튼을 더 크게 만듭니다.

단계 4: 결제 정보 추가

결제 정보 섹션을 추가해 보겠습니다:

<h4 class="mb-3">결제</h4>
<div class="my-3">
<div class="form-check">
<input id="credit" name="paymentMethod" type="radio" class="form-check-input" checked required>
<label class="form-check-label" for="credit">신용카드</label>
</div>
<div class="form-check">
<input id="debit" name="paymentMethod" type="radio" class="form-check-input" required>
<label class="form-check-label" for="debit"> 직불카드</label>
</div>
</div>
<div class="row gy-3">
<div class="col-md-6">
<label for="cc-name" class="form-label">카드에 적힌 이름</label>
<input type="text" class="form-control" id="cc-name" required>
</div>
<div class="col-md-6">
<label for="cc-number" class="form-label">신용카드 번호</label>
<input type="text" class="form-control" id="cc-number" required>
</div>
<div class="col-md-3">
<label for="cc-expiration" class="form-label">만료일</label>
<input type="text" class="form-control" id="cc-expiration" required>
</div>
<div class="col-md-3">
<label for="cc-cvv" class="form-label">CVV</label>
<input type="text" class="form-control" id="cc-cvv" required>
</div>
</div>

여기서 우리는 결제 방법을 선택할 수 있는 라디오 버튼과 카드 세부 정보를 입력할 수 있는 필드를 추가했습니다. gy-3 클래스는 행 사이에 수직 간격을 추가합니다.

사용자 경험 향상

단계 5: 검증 피드백 추가

부트스트랩은 양식 검증 피드백을 위한 클래스를 제공합니다. 이름 입력에 이를 추가해 보겠습니다:

<div class="col-md-6 mb-3">
<label for="firstName" class="form-label">이름</label>
<input type="text" class="form-control" id="firstName" required>
<div class="valid-feedback">
좋습니다!
</div>
<div class="invalid-feedback">
이름을 입력해 주세요.
</div>
</div>

이를 작동시키기 위해 JavaScript를 추가해야 합니다:

<script>
(function () {
'use strict'
var forms = document.querySelectorAll('.needs-validation')
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault()
event.stopPropagation()
}
form.classList.add('was-validated')
}, false)
})
})()
</script>

이 스크립트는 양식이 제출될 때 was-validated 클래스를 추가하여 검증 피드백을 표시합니다.

결론

축하합니다! 지금까지 부트스트랩을 사용하여 전문적인 결제 양식을 만들었습니다. 우리가 배운 것을 요약하겠습니다:

  1. 프로젝트에 부트스트랩을 포함하는 방법
  2. 부트스트랩 그리드 시스템을 사용하여 레이아웃을 만드는 방법
  3. 양식 요소를 부트스트랩 클래스로 스타일링하는 방법
  4. 검증 피드백 추가

기억해 두세요, 연습이 완벽을 이루는 열쇠입니다. 이 양식을 수정해 보세요, 새로운 필드를 추가하거나 스타일을 변경해 보세요. 더 많이 실험할수록 더 나아질 것입니다!

아래는 우리가 사용한 주요 부트스트랩 클래스의 표입니다:

클래스 목적
container 콘텐츠를 중앙에 정렬하고 패딩을 추가합니다
row 수평 그룹의 열을 만듭니다
col-md-6 중간 화면 이상에서 50% 너비의 칼럼을 만듭니다
form-label 양식 레이블을 스타일링합니다
form-control 양식 입력을 스타일링합니다
btn 기본 버튼 스타일을 제공합니다
btn-primary 버튼에 파란색을 줍니다
btn-lg 버튼을 더 크게 만듭니다
form-check 체크박스와 라디오 버튼을 스타일링합니다
valid-feedback 유효한 입력에 대한 피드백을 표시합니다
invalid-feedback 무效한 입력에 대한 피드백을 표시합니다

幸福编程하고, 기억하세요 - 모든 전문가는 초보자였습니다. 계속 연습하면 놀라운 것을 만들 수 있을 것입니다!

Credits: Image by storyset

이전 튜토리얼:
부트스트랩 가격 설정 데모
다음 튜토리얼:
부트스트랩 제품 데모