부트스트랩 - 스피너

웹 개발자 지망생 여러분 환영합니다! 오늘 우리는 부트스트랩 스피너의 흥미로운 세계로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 교사로서, 이 여정을 단계별로 안내해 드리겠습니다. 그럼 사랑하는 음료를 한 잔 챙기고 편안하게 앉아, 이 튜토리얼을 통해 스피너를 돌리는 것을 시작해 보세요!

작동 방식

부트스트랩의 스피너는 웹 애플리케이션에서 로딩 상태를 나타내기 위해 사용됩니다. 이 스피너는 웹사이트가 콘텐츠를 로드할 때 볼 수 있는 작은 회전하는 원형과 같습니다. 이 유용한 컴포넌트는 시각적 피드백을 제공하여 뒤에서 무언가가 일어나고 있음을 알려주어 사용자 경험을 향상시킵니다.

부트스트랩 스피너는 HTML, CSS, 그리고 조금의 자바스크립트 마법으로 구축되었습니다. 이 스피너는 사용자 정의 CSS를 통해 회전 애니메이션을 만들어 다양한 브라우저와 장치에서 원활하고 일관된 외관을 유지합니다.

테두리 스피너

가장 기본적인 스피너로 시작해 보겠습니다: 테두리 스피너. 이는 부트스트랩의 기본 스피너 스타일입니다.

<div class="spinner-border" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

이 예제에서 우리는 두 가지 클래스를 가진 div 엘리먼트를 사용하고 있습니다: spinner-border와 role="status"입니다. spinner-border 클래스는 회전 애니메이션을 적용하며, role="status"은 스크린 리더가 이를 상태 표시기로 인식할 수 있도록 도와줍니다.

div 내부에는 span 엘리먼트가 있으며, visually-hidden 클래스를 가지고 있습니다. 이 텍스트는 화면에 보이지 않지만 스크린 리더에 의해 읽혀져 시각 장애인 사용자의 접근성을 향상시킵니다.

색상

도마뱀처럼 색상을 변화시킬 수 있는 우리의 스피너는 다양한 테마에 맞춰질 수 있습니다! 부트스트랩은 텍스트 색상 유틸리티를 사용하여 스피너의 색상을 커스터마이징할 수 있게 합니다.

<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-secondary" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-success" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-danger" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-warning" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-info" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-light" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-border text-dark" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

이 예제의 각 스피너는 text-primary, text-secondary 등과 같은 추가 클래스를 가지고 있습니다. 이 클래스는 스피너의 색상을 부트스트랩의 색상 테마와 일치시킵니다.

성장하는 스피너

테두리 스피너가 당신의 마음에 든다면, 부트스트랩은 또 다른 맛을 제공합니다: 성장하는 스피너. 이 스피너는 회전하는 대신 커지고 작아집니다.

<div class="spinner-grow" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

이 구조는 테두리 스피너와 유사하지만 spinner-grow 클래스를 사용합니다.

정렬

스피너를 정렬하는 것은 부트스트랩의 flebox 유틸리티로 간단합니다. 몇 가지 예제를 보겠습니다:

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
</div>

<div class="d-flex align-items-center">
<strong>로딩 중...</strong>
<div class="spinner-border ms-auto" role="status" aria-hidden="true"></div>
</div>

첫 번째 예제에서 우리는 justify-content-center를 사용하여 스피너를 수평으로 중앙에 정렬합니다. 두 번째 예제에서는 텍스트와 함께 수직으로 정렬합니다.

여백

스피너 주변에 공간이 필요하다면, 부트스트랩의 여백 유틸리티가 도와줍니다!

<div class="spinner-border m-5" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

m-5 클래스는 스피너의 모든 측면에 5 크기의 여백을 추가합니다.

배치

스피너는 다양한 다른 엘리먼트 내부에 배치될 수 있습니다. 여기서는 스피너를 버튼 내부에 넣는 방법을 보여드리겠습니다:

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">로딩 중...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
로딩 중...
</button>

이 예제에서 우리는 스피너를 버튼 내부에 배치하고 spinner-border-sm를 사용하여 더 작게 만듭니다.

Flex

Flexbox 유틸리티를 사용하면 스피너로 더 복잡한 레이아웃을 만들 수 있습니다:

<div class="d-flex justify-content-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
</div>

이는 스피너를 수평으로 중앙에 정렬합니다.

浮动

스피너를浮动시키기 위해 부트스트랩의浮动유틸리티를 사용할 수 있습니다:

<div class="clearfix">
<div class="spinner-border float-end" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
</div>

float-end 클래스는 스피너를 컨테이너의 오른쪽에浮动시킵니다.

텍스트 정렬

텍스트 정렬 유틸리티를 사용하여 스피너와 텍스트를 정렬할 수 있습니다:

<div class="text-center">
<div class="spinner-border" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
</div>

이는 스피너를 컨테이너 내에서 중앙에 정렬합니다.

크기

때로는 크기가 중요합니다! 스피너의 크기를 조정할 수 있는 부트스트랩의 크기 클래스를 사용할 수 있습니다:

<div class="spinner-border spinner-border-sm" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-grow spinner-grow-sm" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

<div class="spinner-border" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>
<div class="spinner-grow" style="width: 3rem; height: 3rem;" role="status">
<span class="visually-hidden">로딩 중...</span>
</div>

spinner-border-sm 또는 spinner-grow-sm을 사용하여 작은 스피너를 만들 수 있습니다. 커스터마이즈된 크기는 인라인 스타일을 사용하여 지정할 수 있습니다.

버튼

마지막으로, 버튼 내부에서 스피너를 사용하는 방법을 살펴보겠습니다:

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">로딩 중...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
로딩 중...
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
<span class="visually-hidden">로딩 중...</span>
</button>

<button class="btn btn-primary" type="button" disabled>
<span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span>
로딩 중...
</button>

이 예제는 텍스트와 함께 border 및 growing 스피너를 버튼에 통합하는 방법을 보여줍니다.

이제 여러분은 부트스트랩 스피너의 전문가가 되었습니다. 연습이 완벽을 이루게 하세요, 그러면 여러분의 웹 페이지가 항상 스타일 있게 돌아갑니다! 행복한 코딩을 기원하며, 여러분의 웹 페이지가 항상 멋지게 돌아가길 바랍니다!

방법	설명
spinner-border	회전하는 테두리 스피너를 생성합니다
spinner-grow	커지고 작아지는 스피너를 생성합니다
text-[color]	스피너의 색상을 변경합니다 (예: text-primary, text-secondary)
spinner-border-sm	작은 테두리 스피너를 생성합니다
spinner-grow-sm	작은 성장하는 스피너를 생성합니다
m-[size]	스피너 주변에 여백을 추가합니다 (예: m-5)
d-flex	flebox 컨테이너를 생성합니다
justify-content-center	flebox 컨테이너 내에서 수평으로 중앙에 정렬합니다
align-items-center	flebox 컨테이너 내에서 수직으로 중앙에 정렬합니다
float-[direction]	스피너를浮动시킵니다 (예: float-end)
text-center	텍스트 정렬을 사용하여 스피너를 중앙에 정렬합니다
visually-hidden	시각적으로 텍스트를 숨기지만 스크린 리더에 의해 읽혀집니다

Credits: Image by storyset