부트스트랩 - 팝오버: 초보자 가이드

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩 팝오버의 fascinujący 세상으로 뛰어들어 보겠습니다. 초보자라고 걱정하지 마세요; 저는 여러해 동안 수업에서 사용한 같은 인내로 단계별로 안내해 드리겠습니다. 이 튜토리얼이 끝나면 여러분은 마치 프로처럼 팝오버를 사용할 수 있을 것입니다!

Bootstrap - Popovers

팝오버는 무엇인가요?

가서 보겠습니다, 팝오버가 무엇인지 이해하기 전에. 책을 읽다가 단어 옆에 작은 별표가 있다고 상상해 보세요. 페이지 아래쪽을 보면 그 단어에 대한 추가 정보를 찾을 수 있습니다. 웹페이지에서 팝오버는 이와 같은 역할을 합니다 - 사용자가 요소와 상호작용할 때 추가 정보를 제공합니다.

팝오버 활성화

우선 팝오버를 활성화해야 합니다. 책을 읽기 전에 불을 켜는 것과 같은 것입니다 - 사용하기 전에 설정을 해야 합니다.

팝오버를 활성화하려면 Bootstrap의 JavaScript와 CSS 파일을 HTML 문서에 포함시켜야 합니다. 다음은 그 방법입니다:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- 여러분의 콘텐츠가 여기 들어갑니다 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

이 코드는 HTML 문서의 기본 구조를 설정하고 Bootstrap의 CSS와 JavaScript 파일을 포함시킵니다. 하단의 스크립트는 페이지에 있는 모든 팝오버를 초기화합니다.

팝오버 생성

이제 무대를 설정했으니, 우리의 첫 번째 팝오버를 만들어 보겠습니다! 버튼에 몇 가지 속성을 추가하는 것만으로 충분합니다.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover 제목" data-bs-content="그리고 여기에 놀라운 콘텐츠가 있습니다. 매우 흥미롭죠?">팝오버 토글 클릭</button>

이를 분해해 보겠습니다:

class="btn btn-lg btn-danger": 버튼을 크고 붉게 만듭니다.
data-bs-toggle="popover": 이 요소가 팝오버를 트리거해야 한다는 것을 Bootstrap에 알립니다.
title="Popover 제목": 팝오버의 제목을 설정합니다.
data-bs-content="...": 팝오버의 주요 콘텐츠입니다.

팝오버 위치 지정

가구를 방에 배치하는 것처럼, 팝오버를 다양한 방식으로 위치 지정할 수 있습니다. Bootstrap은 요소의 상단, 우측, 하단, 좌측에 팝오버를 배치할 수 있도록 허용합니다.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="상단 팝오버">
상단에 팝오버 표시
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="우측 팝오버">
우측에 팝오버 표시
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="하단 팝오버">
하단에 팝오버 표시
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="좌측 팝오버">
좌측에 팝오버 표시
</button>

data-bs-placement 속성은 팝오버가 버튼에 대해 어디에 나타날지 결정합니다.

사용자 정의 팝오버

팝오버에 개인적인 터치를 추가하고 싶으신가요? 자신의 HTML 콘텐츠로 사용자 정의할 수 있습니다!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>사용자 정의 제목</h3>" data-bs-content="<b>볼드</b> 콘텐츠. <a href='#'>링크</a> 포함.">
사용자 정의 HTML 팝오버
</button>

여기서 data-bs-html="true"를 설정하여 팝오버 콘텐츠에 HTML을 허용합니다. 이제 제목과 콘텐츠에 HTML 태그를 사용할 수 있습니다!

닫을 수 있는 팝오버

때로는 팝오버가 사용자가 명시적으로 닫을 때까지 남아 있기를 원할 수 있습니다. 이때 닫을 수 있는 팝오버가 유용합니다.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="닫을 수 있는 팝오버" data-bs-content="그리고 여기에 놀라운 콘텐츠가 있습니다. 매우 흥미롭죠?">닫을 수 있는 팝오버</a>

여기서 중요한 것은 data-bs-trigger="focus"입니다. 이는 팝오버가 다른 곳을 클릭할 때까지 열려 있도록 합니다.

팝오버의悬浮

사용자가 요소에悬浮할 때 팝오버가 나타나기를 원하신다면? 쉽습니다!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Hover 나타나는 팝오버">
悬浮하여 팝오버 트리거
</button>

data-bs-trigger="hover" 속성은悬浮 시 팝오버가 나타나도록 합니다.

비활성화 요소의 팝오버

일반적으로 비활성화된 요소는 사용자 상호작용을 트리거하지 않습니다. 하지만 약간의 트릭으로 비활성화된 요소에도 팝오버를 작동시킬 수 있습니다!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="비활성화된 팝오버">
<button class="btn btn-primary" type="button" disabled>비활성화된 버튼</button>
</span>

비활성화된 버튼을 감싸는 <span> 요소가 팝오버 트리거를 처리합니다.

옵션

Bootstrap은 팝오버를 사용자 정의할 수 있는 다양한 옵션을 제공합니다. 다음은 일부 흔한 옵션입니다:

옵션	유형	기본값	설명
animation	boolean	true	팝오버에 CSS fade 트랜지션 적용
container	string \| element \| false	false	팝오버를 특정 요소에 추가
content	string \| element \| function	''	`data-bs-content` 속성이 없을 때 기본 콘텐츠 값
delay	number \| object	0	팝오버 표시 및 숨김 지연 시간 (ms)
html	boolean	false	팝오버에 HTML 허용
placement	string \| function	'right'	팝오버 위치 지정
selector	string \| false	false	선택자가 제공되면, 팝오버 객체는 지정된 대상에委譮됩니다
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	팝오버를 생성할 때 사용되는 기본 HTML
title	string \| element \| function	''	`title` 속성이 없을 때 기본 제목 값
trigger	string	'click'	팝오버 트리거 방법 - click \| hover \| focus \| manual

이러한 옵션을 JavaScript로 팝오버를 초기화할 때 사용할 수 있습니다:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

이제 부트스트랩 팝오버의 프로가 되셨습니다! 이를 습득하는 데 있어 중요한 것은 연습입니다. 따라서 이 예제들을 조합하고, 혼합하고, 놀라운 것을 만들어 보세요. 행복한 코딩을 기원합니다!

Credits: Image by storyset