Placeholders
Placeholders (플레이스홀더)
컴포넌트나 페이지에 로딩 플레이스홀더(스켈레톤 로더)를 써서 무언가 아직 로딩 중일 수 있음을 나타내는 방법을 다룹니다.
출처: 문서
본문
소개 (About)
플레이스홀더는 애플리케이션의 사용자 경험을 개선하는 데 쓸 수 있습니다. HTML과 CSS만으로 만들어지기 때문에 만들 때 자바스크립트가 필요하지 않습니다. 다만 표시 여부를 토글하려면 약간의 커스텀 JavaScript가 필요합니다. 모양, 색상, 크기는 유틸리티 클래스로 쉽게 커스터마이즈할 수 있습니다.
예시 (Example)
아래 예시에서는 일반적인 card 컴포넌트를 가져와서 플레이스홀더를 적용해 "로딩 카드"로 다시 만들었습니다. 두 카드의 크기와 비율은 같습니다.
<div class="card">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
<div class="card" aria-hidden="true">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title placeholder-glow">
<span class="placeholder col-6"></span>
</h5>
<p class="card-text placeholder-glow">
<span class="placeholder col-7"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-4"></span>
<span class="placeholder col-6"></span>
<span class="placeholder col-8"></span>
</p>
<a class="btn btn-primary disabled placeholder col-6" aria-disabled="true"></a>
</div>
</div>
동작 원리 (How it works)
.placeholder 클래스와 그리드 컬럼 클래스(예: .col-6)를 함께 사용해 width를 설정하면서 플레이스홀더를 만들 수 있습니다. 이렇게 하면 요소 안의 텍스트를 대체하거나 기존 컴포넌트에 modifier 클래스로 추가할 수 있습니다.
.btn에는 ::before를 통해 추가 스타일을 적용해 height가 존중되도록 합니다. 필요에 따라 이 패턴을 다른 상황으로 확장할 수도 있고, 실제 텍스트가 그 자리에 렌더링될 때의 높이를 반영하려면 요소 안에 를 넣을 수도 있습니다.
<p aria-hidden="true">
<span class="placeholder col-6"></span>
</p>
<a class="btn btn-primary disabled placeholder col-4" aria-disabled="true"></a>
aria-hidden="true"를 쓰는 것은 그 요소를 스크린 리더에서 숨겨야 한다는 의미일 뿐입니다. 플레이스홀더의 로딩 동작은 작성자가 실제로 플레이스홀더 스타일을 어떻게 쓰고, 어떤 식으로 업데이트할지에 달려 있습니다. 플레이스홀더의 상태를 바꾸고 보조 기술(AT) 사용자에게 업데이트를 알리려면 어떤 JavaScript 코드가 필요할 수도 있습니다.
너비 (Width)
width는 그리드 컬럼 클래스, 너비 유틸리티, 또는 인라인 스타일로 바꿀 수 있습니다.
<span class="placeholder col-6"></span>
<span class="placeholder w-75"></span>
<span class="placeholder" style="width: 25%;"></span>
색상 (Color)
기본적으로 placeholder는 currentColor를 사용합니다. 커스텀 색상이나 유틸리티 클래스로 덮어쓸 수 있습니다.
<span class="placeholder col-12"></span>
<span class="placeholder col-12 bg-primary"></span>
<span class="placeholder col-12 bg-secondary"></span>
<span class="placeholder col-12 bg-success"></span>
<span class="placeholder col-12 bg-danger"></span>
<span class="placeholder col-12 bg-warning"></span>
<span class="placeholder col-12 bg-info"></span>
<span class="placeholder col-12 bg-light"></span>
<span class="placeholder col-12 bg-dark"></span>
크기 (Sizing)
.placeholder의 크기는 부모 요소의 타이포그래피 스타일에 기반합니다. 크기 modifier로 커스터마이즈할 수 있습니다: .placeholder-lg, .placeholder-sm, 또는 .placeholder-xs.
<span class="placeholder col-12 placeholder-lg"></span>
<span class="placeholder col-12"></span>
<span class="placeholder col-12 placeholder-sm"></span>
<span class="placeholder col-12 placeholder-xs"></span>
애니메이션 (Animation)
.placeholder-glow나 .placeholder-wave로 플레이스홀더에 애니메이션을 넣으면 실제로 무언가 로딩되고 있다는 인상을 더 잘 전달할 수 있습니다.
<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>
CSS
Sass 변수
$placeholder-opacity-max: .5;
$placeholder-opacity-min: .2;