부트스트랩 - 디스플레이: 초보자를 위한 종합 가이드

안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩의 가장 유용한 기능 중 하나인 디스플레이 유틸리티에 대해 깊이 알아보겠습니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 명확한 설명과 많은 예제를 통해 이 주제를 안내해 드리겠습니다. 따뜻한 커피(또는 차, 만약 그게 당신의 취향이라면)를 한 잔 마시고, 시작해 보세요!

부트스트랩 디스플레이는 무엇인가요?

이제 구체적인 내용으로 들어가기 전에, 부트스트랩에서 "디스플레이"라는 말이 무엇을 의미하는지 이해해 보겠습니다. 웹 개발에서 "디스플레이"는 요소가 웹 페이지에 어떻게 표시되는지를 의미합니다. 부트스트랩은 요소의 디스플레이 행동을 쉽게 제어할 수 있도록 하는 클래스 집합을 제공합니다.

가구를 정리하는 것을 생각해 보세요. 때로는 요소를 표시하고 싶고, 때로는 숨기고 싶고, 때로는 화면 크기에 따라 다르게 행동하게 하고 싶습니다.

표기법

부트스트랩은 디스플레이 클래스에 대해 간단하고 직관적인 표기법을 사용합니다. 일반 형식은 다음과 같습니다:

.d-{value}

여기서 {value}는 다음 중 하나일 수 있습니다:

Value	Description
none	요소를 숨김
inline	요소를 인라인 요소로 표시
inline-block	요소를 인라인 레벨 블록 컨테이너로 표시
block	요소를 블록 요소로 표시
table	요소를 테이블로 표시
table-cell	요소를 테이블 셀로 표시
table-row	요소를 테이블 행으로 표시
flex	요소를 블록 레벨 플렉스 컨테이너로 표시
inline-flex	요소를 인라인 레벨 플렉스 컨테이너로 표시

다음 예제를 보겠습니다:

<div class="d-inline p-2 bg-primary text-white">d-inline</div>
<div class="d-inline p-2 bg-dark text-white">d-inline</div>

이 예제에서 우리는 d-inline를 사용하여 두 개의 div 요소를 인라인으로 표시합니다. 이들은 가로로 나열됩니다.

<span class="d-block p-2 bg-primary text-white">d-block</span>
<span class="d-block p-2 bg-dark text-white">d-block</span>

여기서 우리는 d-block를 사용하여 span 요소(정상적으로는 인라인입니다)를 블록으로 표시합니다. 이들은 수직으로 쌓입니다.

반응형 변형

이제 흥미로운 부분으로 넘어가겠습니다! 부트스트랩은 화면 크기에 따라 다른 디스플레이 속성을 적용할 수 있도록 합니다. 이를 위한 형식은 다음과 같습니다:

.d-{breakpoint}-{value}

여기서 {breakpoint}는 다음 중 하나일 수 있습니다:

Breakpoint	Description
sm	작은 기기 (≥576px)
md	중간 크기 기기 (≥768px)
lg	큰 기기 (≥992px)
xl	超大 기기 (≥1200px)

예를 들어:

<div class="d-none d-md-block">
이 텍스트는 작은 화면에서 숨겨지지만 중간 크기와 더 큰 화면에서 보입니다.
</div>

이 div는 기본적으로 숨겨져 있지만(d-none), 중간 크기 화면에서는 블록으로 표시됩니다(d-md-block).

요소 숨기기

반응형 디자인에서 요소를 숨기는 것은 일반적인 작업입니다. 부트스트랩은 d-none 클래스로 이를 간단하게 만들어줍니다:

<div class="d-none">당신은 나를 볼 수 없습니다!</div>

이 요소는 화면 크기에 관계없이 완전히 숨겨집니다.

하지만 특정 화면 크기에서만 요소를 숨기고 싶다면? 이때 반응형 변형이 유용합니다:

<div class="d-lg-none">대형 화면보다 작은 화면에서만 보입니다.</div>
<div class="d-none d-lg-block">대형 화면과 그 이상에서만 나타납니다.</div>

인쇄 시 디스플레이

부트스트랩은 인쇄 시 요소의 디스플레이를 제어할 수 있도록도 합니다! d-print-{value} 클래스를 사용하면 됩니다:

<div class="d-none d-print-block">페이지를 인쇄할 때만 나타납니다!</div>
<div class="d-print-none">페이지를 인쇄할 때 사라집니다.</div>

이는 인쇄 친화적인 웹 페이지를 만들 때 매우 유용합니다.

모든 것을 통합하다

이제 여러 가지 디스플레이 유틸리티를 사용하는 작은 예제를 만들어 보겠습니다:

<div class="container">
<h1 class="d-none d-md-block">Welcome to My Website</h1>
<h2 class="d-md-none">Welcome</h2>

<p class="d-inline-block bg-light p-2">I'm always inline-block.</p>
<p class="d-none d-lg-inline-block bg-light p-2">I appear inline on large screens.</p>

<div class="d-flex justify-content-between">
<div>Flex item 1</div>
<div>Flex item 2</div>
<div class="d-none d-xl-block">I only show on extra large screens</div>
</div>

<footer class="d-print-none">This footer won't appear when printed.</footer>
</div>

이 예제에서:

• 중간 화면과 그 이상에서 큰 제목을 표시하고, 작은 화면에서 작은 제목을 표시합니다.
• 두 개의段落 중 하나는 대형 화면에서만 인라인으로 표시됩니다.
• 플렉스 박스를 사용하여 세 번째 항목이超大 화면에서만 표시됩니다.
• 푸터는 인쇄 시 표시되지 않습니다.

결론

이제 여러분! 부트스트랩의 디스플레이 유틸리티에 대해 깊이 이해했습니다. 이를 마스터하려면 연습이 중요합니다. 자신만의 레이아웃을 만들어보고, 다양한 화면 크기를 실험하고, 이 클래스들을 섞고 맞춰보세요.

여러분의 오래된 컴퓨터 선생님이자 저는 이 유틸리티들이 실제 웹 개발에서 얼마나 유용한지 강조할 수 없습니다. 이들은 수많은 시간을 절약하고 레이아웃 문제를 디버깅하는 데 도움을 줄 것입니다.

이제 자신감 있게 반응형, 적응형 레이아웃을 만들어 나가세요! 그리고 웹 개발에서도, 인생에서도, 가장 강력한 도구는 때로는 무언가를 숨기는 것임을 기억하세요. 행복하게 코딩하세요!

Credits: Image by storyset