Bootstrap - 모달: 초보자 가이드

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 Bootstrap 모달의 흥미로운 세상으로 뛰어들어 볼 거예요. 모달이 무엇인지 들어본 적이 없으시다고 걱정하지 마세요 - 이 튜토리얼이 끝나면 프로처럼 팝업 창을 만드는 법을 배울 거예요!

모달이란?

먼저, 모달이 무엇인지 이해해 보겠습니다. 책을 읽다가 갑자기 중요한 정보가 적힌 작은 스티커가 뛰어나오는 상상해 보세요. 그게 바로 웹사이트에서 모달이 하는 일입니다! 모달은 현재 페이지 위에 나타나는 대화 상자나 팝업 창입니다.

모달 컴포넌트

Bootstrap 모달의 기본 구조를 시작해 보겠습니다:

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

이를 각각의 부분으로 나누어 설명하겠습니다:

• 가장 바깥쪽 <div>에 클래스 "modal"은 주요 컨테이너입니다.
• 안쪽에는 "modal-dialog"가 모달의 형태와 위치를 제어합니다.
• "modal-content"는 우리 모달의 실제 콘텐츠를 담고 있습니다.
• 그런 다음에 헤더, 본문, 푸터 세 부분이 있습니다.

정적 배경

가끔, 모달이 사용자가 상호작용할 때까지 계속 머물기를 원할 때가 있습니다. 그때 정적 배경이 유용하게 사용됩니다:

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- 모달 콘텐츠 여기에 -->
</div>

data-bs-backdrop="static"를 추가하면 모달이 외부를 클릭해도 닫히지 않습니다. data-bs-keyboard="false"는 Esc 키로 닫히지 않도록 합니다.

스크롤 가능 모달

많은 콘텐츠가 있는 경우도 문제ありません! 모달을 스크롤 가능하게 만들어 보세요:

<div class="modal-dialog modal-dialog-scrollable">
<!-- 모달 콘텐츠 여기에 -->
</div>

modal-dialog-scrollable 클래스를 추가하면 모달 본문이 스크롤할 수 있게 되고 헤더와 푸터는 고정됩니다.

수직 중앙 정렬

모달을 화면 중앙에 배치하고 싶다면? 쉽디쉬!

<div class="modal-dialog modal-dialog-centered">
<!-- 모달 콘텐츠 여기에 -->
</div>

modal-dialog-centered 클래스가 모달을 수직 중앙에 정렬합니다.

툴팁과 팝오버

모달 내에서 툴팁과 팝오버를 사용할 수도 있습니다. 초기화만 기억하시면 됩니다:

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

그리드 사용

Bootstrap의 그리드 시스템은 모달 내에서도 작동합니다! 예제를 보겠습니다:

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

이렇게 하면 모달 본문 내에 이이컬 레이아웃을 만들 수 있습니다.

모달 콘텐츠 변화

모달의 콘텐츠를 동적으로 변경할 수 있습니다. 다음과 같이 합니다:

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = '새 메시지를 ' + recipient + '에게'
modalBodyInput.value = recipient
})

이 스크립트는 모달의 콘텐츠를 어떤 버튼이 트리거했는지에 따라 변경합니다.

모달 간 전환

다른 모달로 전환할 수도 있습니다:

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- 첫 번째 모달 콘텐츠 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">두 번째 모달 열기</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- 두 번째 모달 콘텐츠 -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">첫 번째로 돌아가기</button>
</div>

애니메이션 변경

모달의 진입을 더 흥미롭게 만들고 싶다면 애니메이션을 변경해 보세요:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- 모달 콘텐츠 -->
</div>

fade 클래스는 아름다운.fade 효과을 추가합니다. CSS를 사용하여 사용자 정의 애니메이션을 만들 수도 있습니다!

동적 높이

모달은 콘텐츠에 따라 높이를 조정할 수 있습니다:

<div class="modal-dialog modal-dialog-scrollable">
<!-- 콘텐츠 길이에 따라 다른 모달 콘텐츠 -->
</div>

modal-dialog-scrollable 클래스는 모달이 좋게 보이도록 콘텐츠 길이에 관계없이 작동합니다.

접근성

항상 접근성을 고려하세요! aria-labelledby를 사용하여 모달 제목을 참조하도록 합니다:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">모달 제목</h5>
<!-- 나머지 모달 콘텐츠 -->
</div>
</div>
</div>
</div>

선택 사이즈

모달은 다양한 크기로 제공됩니다:

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

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

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

전체 화면 모달

모달을 전체 화면으로 만들고 싶다면 전체 화면 클래스를 사용합니다:

<div class="modal-dialog modal-fullscreen">
<!-- 모달 콘텐츠 -->
</div>

특정 화면 크기에서만 전체 화면으로 만들고 싶다면:

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- 모달 콘텐츠 -->
</div>

이 모달은 작은 화면 이하에서만 전체 화면으로 보입니다.

이제 Bootstrap을 사용하여 놀라운 모달을 만드는 지식을 습득했습니다. 연습이 완벽을 만드는 것을 기억하시고, 이 개념들을 실험해 보세요. 행복한 코딩을!

메서드	설명
.modal(options)	콘텐츠를 모달로 활성화합니다. 선택 사항의 옵션 객체를 받아들입니다.
.modal('toggle')	수동으로 모달을 전환합니다.
.modal('show')	수동으로 모달을 엽니다.
.modal('hide')	수동으로 모달을 닫습니다.
.modal('handleUpdate')	모달이 열려 있을 때 높이가 변화할 경우 모달의 위치를 수동으로 조정합니다.
.modal('dispose')	요소의 모달을 파괴합니다.

Credits: Image by storyset