Bootstrap - Placeholders: A Beginner's Guide

안녕하세요, 웹 개발자 꿈나이들! 오늘 우리는 Bootstrap placeholders의 fascineting 세상으로 뛰어들어 볼 거예요. 당신의 친절한 이웃 컴퓨터 선생님이자, 저는 이 주제를 단계별로 안내해드리겠습니다. 모든 것을 이해하실 수 있도록 하겠습니다. 그러니 좋아하는 음료를 한 잔 마시고, 편안하게 앉아 이 흥미로운 여정을 함께 시작해 보세요!

How it Works

집을 짓는다고 상상해 보세요. 진짜 가구를 넣기 전에, 가구가 들어갈 자리를 대신할 카드 상자를 사용할 수도 있습니다. 그게 바로 웹 디자인에서 placeholders의 역할입니다! 그들은 여전히 로딩 중이거나 아직 준비되지 않은 콘텐츠의 일시적인 대체물입니다.

Bootstrap placeholders는 원활하고 몰입감 있는 사용자 경험을 만들어주는便利한 기능입니다. 그들은 사용자에게 콘텐츠가 곧 나타날 것을 시각적으로 알려주며, 빈 페이지를 바라보게 만들지 않습니다.

Create Placeholders

기본적인 내용부터 시작해 보겠습니다. Bootstrap에서 placeholder를 생성하는 것은 쉽기 그 자체입니다! 다음은 간단한 예제입니다:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>

이 코드는 전체 너비의 placeholder를 생성하여 페이지를 가로로 채웁니다. placeholder-glow 클래스는 부드러운 애니메이션을 추가하여 뒤에서 일어나고 있는 일을 명확하게 합니다.

Placeholder - Width

우리의 집 짓는 비유에서 왕사이즈 침대를 작은 커피 테이블로 대체할 수는 없잖아요. 마찬가지로 placeholders의 너비를 조정하여 대체할 콘텐츠와 일치시킬 수 있습니다. Bootstrap은 12열 그리드 시스템을 사용하므로 placeholders의 너비를 쉽게 설정할 수 있습니다.

다음은 예제입니다:

<p class="placeholder-glow">
<span class="placeholder col-6"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-4"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-8"></span>
</p>

이 코드에서 우리는 다른 너비의 세 가지 placeholders를 생성하고 있습니다. 첫 번째는 반 너비(6 열), 두 번째는 세분의 너비(4 열), 세 번째는 세분之二의 너비(8 열)를 차지합니다.

Placeholder - Color

이제 placeholders에 색상을 추가해 보겠습니다! 다양한 색상의 상자를 사용하여 다양한 종류의 가구를 나타내는 것처럼, 우리는 placeholders에도 다양한 색상을 사용할 수 있습니다.

다음은 그 방법입니다:

<p class="placeholder-glow">
<span class="placeholder col-12 bg-primary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-secondary"></span>
</p>
<p class="placeholder-glow">
<span class="placeholder col-12 bg-success"></span>
</p>

이 예제에서 우리는 다른 색상의 세 가지 전체 너비 placeholders를 생성하고 있습니다. bg-primary, bg-secondary, bg-success 클래스는 각각 파랑, 회색, 녹색의 placeholders를 제공합니다.

Placeholder - Sizing

가구는 다양한 크기로 나오듯이, placeholders도 크기를 조정할 수 있습니다! Bootstrap은 미리 정의된 클래스를 사용하여 placeholders의 크기를 쉽게 조정할 수 있습니다.

다음 코드를 확인해 보세요:

<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>

여기서 우리는 다양한 크기의 네 가지 placeholders를 생성하고 있습니다. placeholder-lg 클래스는 큰 placeholder를 생성하며, placeholder-sm과 placeholder-xs는 더 작은 placeholders를 생성합니다. 크기 클래스가 없는 것은 기본 크기입니다.

Placeholder - Animation

마지막으로, placeholders에 애니메이션을 추가하여 생기를 더해 보겠습니다! 카드 상자에 "곧 나옵니다" 표지를 추가하는 것처럼, 애니메이션은 사용자에게 무언가가 일어나고 있음을 알려줍니다.

다음은 그 방법입니다:

<p class="placeholder-glow">
<span class="placeholder col-12"></span>
</p>
<p class="placeholder-wave">
<span class="placeholder col-12"></span>
</p>

이 예제에서 우리는 두 가지 다른 애니메이션 스타일을 사용하고 있습니다. placeholder-glow 클래스는 부드러운 빛나는 효과를 만들며, placeholder-wave 클래스는 왼쪽에서 오른쪽으로 파도 모양의 애니메이션을 만듭니다.

Putting It All Together

이제 우리가 배운 모든 멋진 placeholder 기능을 하나의 예제에 결합해 보겠습니다:

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top placeholder-glow" 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 href="#" tabindex="-1" class="btn btn-primary disabled placeholder col-6"></a>
</div>
</div>

이 코드는 이미지, 제목, 텍스트, 그리고 버튼에 대한 placeholders를 포함한 카드를 생성합니다. 마치 카드 상자 가게에서 전시를하는 것처럼입니다!

Conclusion

이제, 친구들이! Bootstrap placeholders를 마스터하셨습니다. placeholders는 콘서트의 오프닝 액트처럼, 무대를 설정하고 본 이벤트(실제 콘텐츠)에 대한 기대를 높입니다.

웹 개발 여정을 계속하면서, placeholders를 사용하는 무수한 창의적인 방법을 찾을 수 있을 것입니다. 그들은 기능적일 뿐만 아니라, 로딩 화면에 개성을 더하는 즐거운 방법이 될 수 있습니다.

계속 연습하고, 실험하고, 가장 중요한 것은 즐겁게 만들어 보세요. 얼마 지나지 않아, 로딩이 끝나기 전에도 멋지게 보이는 웹사이트를 만드는 것을 배우게 될 것입니다!

Method	Description
Create Placeholders	<span class="placeholder"></span>를 <p class="placeholder-glow"> 또는 <p class="placeholder-wave"> 내에 사용하세요
Set Width	Bootstrap의 열 클래스를 사용하세요, 예를 들어 col-6은 반 너비
Change Color	bg-primary, bg-secondary 등과 같은 배경 색상 클래스를 적용하세요
Adjust Size	placeholder-lg, placeholder-sm, placeholder-xs 클래스를 사용하세요
Add Animation	Placeholder를 <p class="placeholder-glow"> 또는 <p class="placeholder-wave">으로 감싸세요

Happy coding, and may your placeholders always be perfectly placed!

Credits: Image by storyset