[부트스트랩] 댓글 입력 폼 만들기

소요 시간: 3분 조회수: 164

부트스트랩을 사용하면 다양한 UI 컴포넌트를 손쉽게 만들 수 있습니다. 이번 가이드에서는 부트스트랩을 사용하여 간단하고 깔끔한 댓글 입력 폼을 만들어보겠습니다. 댓글 입력 폼은 웹사이트의 기본적인 기능 중 하나로, 사용자와의 소통을 원활하게 할 수 있습니다. 부트스트랩의 강력한 스타일링 기능을 통해 시간과 노력을 절약하며, 일관된 디자인을 구현할 수 있습니다.


댓글 입력 폼 구성 요소

댓글 폼을 구성하고 있는 요소들을 하나씩 살펴보겠습니다. 댓글 입력 폼은 컨테이너, 입력 라벨, 입력 폼, 버튼으로 구성됩니다.

1. 컨테이너

먼저 댓글 폼을 담고 있는 컨테이너를 만듭니다. 여기서 컨테이너는 결과 이미지에서 하얀색 배경의 카드를 의미합니다.

<body class="bg-light">
    <div class="mt-2 p-3 bg-body rounded shadow-sm">
    </div>
</body>

제목

댓글 폼을 사용자에게 알리는 제목을 추가합니다. h2 태그를 사용하지만 기본 스타일이 너무 크므로 fs-6 클래스를 추가하여 p 태그 폰트 크기와 같아지도록 합니다.

<div class="mt-2 p-3 bg-body rounded shadow-sm">
    <h2 class="fs-6">댓글 쓰기</h2>
</div>

댓글 입력 폼

댓글 입력 폼을 추가합니다. input 태그에서 타입을 text로 설정합니다.

<h2 class="fs-6">댓글 쓰기</h2>
<input class="form-control" type="text">

버튼

입력 폼 아래에 댓글 등록 버튼을 추가합니다. 모바일에서도 누르기 편하게 버튼을 오른쪽 끝으로 이동시킵니다.

<input class="form-control" type="text">
<div class="d-flex justify-content-end">
    <button class="btn btn-primary">등록</button>
</div>

안내 문구 추가

댓글 작성 후 존중을 독려하는 안내 문구를 입력 폼 아래 추가합니다.

<input class="form-control" type="text">
<div class="form-text">존중과 배려하는 마음으로 건강한 댓글 문화를 함께 만들어가요.</div>
<div class="d-flex justify-content-end">
    <button class="btn btn-primary">등록</button>
</div>


전체 코드

전체 코드를 종합하면 다음과 같습니다:

<body class="bg-light">
    <div class="mt-2 p-3 bg-body rounded shadow-sm">
        <h2 class="fs-6">댓글 쓰기</h2>
        <input class="form-control" type="text">
        <div class="form-text">존중과 배려하는 마음으로 건강한 댓글 문화를 함께 만들어가요.</div>
        <div class="d-flex justify-content-end">
            <button class="btn btn-primary">등록</button>
        </div>
    </div>
</body>


결론

이번 가이드에서는 부트스트랩을 사용하여 간단한 댓글 입력 폼을 만들어 보았습니다. 부트스트랩의 강력한 스타일링 도구를 통해 짧은 시간 안에 깔끔하고 반응형 디자인을 구현할 수 있었습니다. 부트스트랩을 사용하면 다양한 컴포넌트를 쉽게 추가하고, 일관된 디자인을 유지할 수 있어 웹 개발의 효율성을 크게 높일 수 있습니다. 앞으로도 부트스트랩을 활용하여 더욱 다양한 UI 요소를 쉽게 구현해보세요.

인기글

부트스트랩 리스트