부트스트랩 - 모달 데모

모달이란?

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 부트스트랩 모달의 흥미로운 세상으로 뛰어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 단계별로 안내해 드리겠습니다. 좋아하는 음료를 한 잔 마시고 편안하게 앉아, 함께 모달의 모험을 시작해 보세요!

Bootstrap - Modals Demo

정의와 목적

웹 개발 용어로서 모달은 현재 페이지 위에 나타나는 팝업 창과 같은 것입니다. 현재 뷰에서 벗어나지 않고 콘텐츠를 표시하는 훌륭한 방법입니다. 예를 들어, 기사를 읽다가 갑자기 특정 용어에 대한 더 많은 정보를 원한다고 가정해 봅시다. 새로운 페이지를 엽니다. 대신, 모달이 나타나 추가 정보를 제공하고, 읽기를 빠르게 계속할 수 있습니다. 멋지죠?

우리의 신뢰할 수 있는 웹 디자인 친구 부트스트랩은 사용하기 쉽고高度로 사용자 정의할 수 있는 모달 컴포넌트를 제공합니다. 이제 이를 어떻게 구현하는지 탐구해 보겠습니다!

기본 모달 구조

HTML 구조

먼저 부트스트랩 모달의 기본 HTML 구조를 살펴보겠습니다:

<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">모달 제목</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<p>모달 본문 텍스트를 여기에 작성합니다.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">닫기</button>
<button type="button" class="btn btn-primary">변경 사항 저장</button>
</div>
</div>
</div>
</div>

이를 구성해 보겠습니다:

가장 바깥쪽 <div>에 class modal은 우리 모달의 컨테이너입니다.
안쪽에는 modal-dialog가 있어 모달 콘텐츠를 중앙에 정렬합니다.
modal-content div는 우리 모달의 실제 콘텐츠를 담고 있습니다.
그런 다음 세 가지 주요 섹션이 있습니다:

modal-header: 제목과 닫기 버튼을 포함합니다.
modal-body: 주요 콘텐츠가 들어갑니다.
modal-footer: 일반적으로 작동 버튼을 포함합니다.

모달 트리거

이제 이 모달을 어떻게 표시할까요? 트리거가 필요합니다! 일반적으로 이는 버튼입니다:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
데모 모달 실행
</button>

data-toggle="modal"과 data-target="#exampleModal"을 주목해 보세요. 이는 부트스트랩에게 무엇을 하여야 할지 (모달을 토글링)과 어떤 모달을 표시할지 (id가 "exampleModal"인 모달)를 알립니다.

모달에 id를 추가하고 data-target와 일치시키는 것을 잊지 마세요:

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- 모달 콘텐츠 여기에 -->
</div>

모달 사용자 정의

크기

부트스트랩은 모달의 크기를 쉽게 변경할 수 있게 해줍니다. modal-dialog div에 클래스를 추가하면 됩니다:

<!-- 작은 모달 -->
<div class="modal-dialog modal-sm">...</div>

<!-- 큰 모달 -->
<div class="modal-dialog modal-lg">...</div>

<!-- 매우 큰 모달 -->
<div class="modal-dialog modal-xl">...</div>

중앙 정렬 모달

모달을 완벽하게 중앙에 정렬하고 싶다면 modal-dialog-centered 클래스를 추가하세요:

<div class="modal-dialog modal-dialog-centered">...</div>

卷动 모달

모달 콘텐츠가 길다면 卷动할 수 있게 만들 수 있습니다:

<div class="modal-dialog modal-dialog-scrollable">...</div>

JavaScript로 기능 추가

부트스트랩의 데이터 어트리뷰트는 기본 기능에 적합하지만, 더 많은 제어가 필요한 경우가 있습니다. 이때 JavaScript가 도움이 됩니다!

// 모달 표시
$('#exampleModal').modal('show');

// 모달 숨기기
$('#exampleModal').modal('hide');

// 모달 토글
$('#exampleModal').modal('toggle');

모달 이벤트에도 듣을 수 있습니다:

$('#exampleModal').on('shown.bs.modal', function () {
console.log('모달이 이제 보입니다!');
})

실제 예제: "삭제 확인" 모달

이제 실제 예제로 모든 것을 통합해 보겠습니다. 예를 들어, 할 일 목록 앱을 만들고, 태스크를 삭제하기 전에 확인하고 싶습니다:

<!-- 삭제 버튼 -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
태스크 삭제
</button>

<!-- 모달 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">삭제 확인</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
이 태스크를 정말로 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">취소</button>
<button type="button" class="btn btn-danger" id="confirmDelete">삭제</button>
</div>
</div>
</div>
</div>

그리고 이를 처리하는 JavaScript 코드:

$('#confirmDelete').on('click', function() {
// 태스크를 삭제하는 코드가 여기에 들어갑니다
console.log('태스크가 삭제되었습니다!');
$('#deleteModal').modal('hide');
});

결론

축하합니다! 부트스트랩 모달의 내외를 배웠습니다. 기본 구조에서 사용자 정의, 그리고 실제 예제까지, 이 강력한 기능을 웹 프로젝트에 추가할 준비가 되었습니다.

기억하세요, 연습이 완벽을 이루게 합니다. 다양한 유형의 모달을 만들어 보고, 크기와 위치를 실험해 보세요. 그리고 가장 중요한 것은, 즐겁게 만들어 보세요! 누가 알겠는가, 여러분의 코딩 친구들 사이에서 "모달 마스터"가 될지도 모릅니다.

기쁜 코딩을 하고, 여러분의 모달이 항상 적절한 순간에 나타나길 바랍니다!

Credits: Image by storyset