온라인 쇼핑몰이나 서비스 웹사이트에서 결제 페이지는 사용자 경험을 좌우하는 핵심 요소입니다. 이번 글에서는 CSS의 Flexbox와 미디어 쿼리를 활용하여 데스크톱과 모바일 환경 모두에서 자연스럽게 표시되는 반응형 결제(체크아웃) 양식을 만드는 방법을 소개합니다.
핵심 구현 포인트
- Flexbox 레이아웃:
.Fields클래스에display: flex와flex-wrap: wrap을 적용해 입력 필드들이 화면 너비에 맞춰 유연하게 배치됩니다. - 미디어 쿼리: 화면 너비가 800px 이하일 때
flex-direction: column-reverse를 적용하여 장바구니가 결제 폼 위로 올라오고, 요소들이 세로로 정렬됩니다. - 박스 크기 계산: 전체 요소에
box-sizing: border-box를 지정해 패딩과 테두리가 포함된 크기 계산으로 레이아웃이 깨지지 않도록 합니다. - 결제 버튼 스타일링:
:hover가상 클래스로 마우스 오버 시 색상이 변하는 직관적인 결제 버튼을 구현했습니다.
전체 예제 코드
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: Arial;
font-size: 17px;
padding: 8px;
}
* {
box-sizing: border-box;
}
.Fields {
display: flex;
flex-wrap: wrap;
padding: 20px;
justify-content: space-around;
}
.Fields div {
margin-right: 10px;
}
label {
margin: 15px;
}
.formContainer {
margin: 10px;
background-color: #efffc9;
padding: 5px 20px 15px 20px;
border: 1px solid rgb(191, 246, 250);
border-radius: 3px;
}
input[type="text"] {
display: inline-block;
width: 100%;
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 3px;
}
label {
margin-left: 20px;
display: block;
}
.icon-formContainer {
margin-bottom: 20px;
padding: 7px 0;
font-size: 24px;
}
.checkout {
background-color: #4caf50;
color: white;
padding: 12px;
margin: 10px 0;
border: none;
width: 100%;
border-radius: 3px;
cursor: pointer;
font-size: 17px;
}
.checkout:hover {
background-color: #45a049;
}
a {
color: black;
}
span.price {
float: right;
color: grey;
}
@media (max-width: 800px) {
.Fields {
flex-direction: column-reverse;
}
}
</style>
</head>
<body>
<h1 style="text-align: center;">Responsive Checkout Form</h1>
<div class="Fields">
<div>
<div class="formContainer">
<form>
<div class="Fields">
<div>
<h3>Billing Address</h3>
<label for="fname">Full Name</label>
<input type="text" id="fname" name="firstname" />
<label for="email"> Email</label>
<input type="text" id="email" name="email" />
<label for="adr"> Address</label>
<input type="text" id="adr" name="address" />
</div>
<div>
<h3>Payment</h3>
<label for="cname">Name on Card</label>
<input type="text" id="cname" name="cardname" />
<label for="ccnum">Credit card number</label>
<input type="text" id="ccnum" name="cardnumber" />
<div class="Fields">
<div>
<label for="expyear">Exp Year</label>
<input type="text" id="expyear" name="expyear" />
</div>
<div>
<label for="cvv">CVV</label>
<input type="text" id="cvv" name="cvv" />
</div>
</div>
</div>
</div>
<input
type="submit"
value="Continue to checkout"
class="checkout"
/>
</form>
</div>
</div>
<div>
<div class="formContainer">
<h4>
Cart <span class="price" style="color:black"><b>2</b></span>
</h4>
<p>
<a style="text-decoration: none;" href="#">Product 1</a>
<span class="price">$10</span>
</p>
<p>
<a style="text-decoration: none;" href="#">Product 2</a>
<span class="price">$10</span>
</p>
<p>
Total <span class="price" style="color:black"><b>$20</b></span>
</p>
</div>
</div>
</div>
</body>
</html>
실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
데스크톱 화면에서는 청구지 주소 입력 영역과 결제 정보 영역, 그리고 오른쪽에 장바구니 요약이 나란히 배치됩니다. 반면 창 크기를 800px 이하로 줄이면 미디어 쿼리에 의해 각 섹션이 세로로 재배치되어 모바일 기기에서도 편리하게 이용할 수 있습니다.
마무리
이처럼 Flexbox와 미디어 쿼리만으로도 별도의 프레임워크 없이 실용적인 반응형 결제 양식을 손쉽게 만들 수 있습니다. 여기에 입력값 유효성 검사나 카드 아이콘 추가 등을 적용하면 더욱 완성도 높은 결제 페이지를 구현할 수 있습니다.