Bootstrap - 시각적으로 숨김

안녕하세요, 미래의 웹 개발자 여러분! 오늘 우리는 Bootstrap의 매우 흥미롭고 유용한 기능인 시각적으로 숨김 클래스에 대해 배우게 될 것입니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리는 것을 기쁘게 생각합니다. 그麼, 좋아하는 음료를 마시며 편안하게 앉아 이 모험을 함께 시작해 보세요!

Bootstrap - Visually Hidden

시각적으로 숨김은 무엇인가요?

자, 구체적인 내용으로 들어가기 전에 기본 개념부터 설명해 드리겠습니다. Bootstrap의 시각적으로 숨김 클래스는 웹 페이지에서 마법사의 트릭과도 같은东西입니다. 시각적으로 내용을 숨기지만 스크린 리더에게는 여전히 접근할 수 있게 만들어줍니다. 이건 정말 멋지죠?

마법 학교(호그와트라고 부르죠?)의 웹사이트를 디자인하고 있다고 상상해 보세요. 시각 장애를 가진 학생들을 위한 중요한 정보를 포함하고 싶지만, 다른 학생들의 시각 레이아웃을 병목시키고 싶지 않습니다. 이때 시각적으로 숨김 클래스가 구원자로 등장합니다!

어떻게 작동하나요?

시각적으로 숨김 클래스는 CSS를 사용하여 시각 사용자에게 내용을 숨기면서 스크린 리더에게는 계속 가시적으로 유지합니다. 마치 HTML 요소에 대해 보이지 않는 망토를 씌우는 것과 같습니다!

간단한 예제를 보겠습니다:

<h1>환영합니다, 호그와트에</h1>
<p class="visually-hidden">이 내용은 스크린 리더만이 볼 수 있습니다.</p>

이 예제에서 시각 사용자는 "환영합니다, 호그와트에"만 볼 수 있고, 스크린 리더 사용자는 "이 내용은 스크린 리더만이 볼 수 있습니다."라고 들을 수 있습니다.

Bootstrap에서 시각적으로 숨김을 구현하기

이제 개념을 이해했으므로 Bootstrap에서 이를 어떻게 구현할 수 있는지 살펴보겠습니다. Bootstrap은 우리에게 사용할 수 있는 준비된 클래스 .visually-hidden을 제공합니다.

다음과 같이 사용할 수 있습니다:

<div class="visually-hidden">이 내용은 시각적으로 숨겨지지만 스크린 리더에 의해 접근할 수 있습니다.</div>

간단하죠? 클래스를 숨기고 싶은 어떤 요소에 추가하시면 됩니다.

실용적인 예제

시각적으로 숨김 클래스를 사용할 수 있는 몇 가지 실용적인 예제를 살펴보겠습니다:

스킵 네비게이션 링크:

<a href="#main-content" class="visually-hidden">주요 콘텐츠로 건너뛰기</a>
<nav>
<!-- 네비게이션 메뉴 항목 -->
</nav>
<main id="main-content">
<!-- 주요 콘텐츠 -->
</main>

이렇게 하면 스크린 리더 사용자가 주요 콘텐츠로 직접 건너뛰어서 네비게이션 경험을 개선할 수 있습니다.

폼 레이블:

<label for="search" class="visually-hidden">검색</label>
<input type="text" id="search" placeholder="검색">

여기서는 시각 디자인을 영향주지 않고 스크린 리더에 대한 레이블을 제공합니다.

추가 문맥:

<button>
삭제
<span class="visually-hidden">장바구니에서 이 항목을 삭제합니다</span>
</button>

이렇게 하면 시각 사용자에게는 버튼 텍스트를 병목시키지 않고 스크린 리더 사용자에게는 추가 문맥을 제공할 수 있습니다.

시각적으로 숨김 뒤에 숨겨진 마법

이제 커튼 뒤로 가서 시각적으로 숨김 클래스가 어떻게 마법을 부리는지 살펴보겠습니다. 다음은 이 작업을 수행하는 CSS입니다:

.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}

이게 마법의 포션이 보이시나요? 이를 간단히 설명해 드리겠습니다:

position: absolute: 이 요소를 정상적인 문서 흐름에서 제외합니다.
width: 1px; height: 1px: 요소를 매우 작게 만듭니다.
padding: 0; margin: -1px: 요소 주위의 공간을 제거합니다.
overflow: hidden: 내용이 벗어나지 않도록 숨깁니다.
clip: rect(0, 0, 0, 0): 내용을 0x0 사각형으로 자릅니다.
white-space: nowrap: 텍스트가 줄바꿈하지 않도록 합니다.
border: 0: 테두리를 제거합니다.

!important 선언은 다른 CSS 규칙에 의해 재정의되지 않도록 합니다.

시각적으로 숨김 vs 표시 안함

마음 속에 궁금증이 드실 수도 있습니다. "그렇다면 display: none을 왜 사용하지 않을까요?" 그러시군요, 호기심 많은 제 제자여, 중요한 차이가 있습니다:

속성	시각적으로 숨김	표시 안함
시각 표현	숨김	숨김
스크린 리더 접근성	접근 가능	접근 불가
DOM 존재	존재	존재
레이아웃 영향	영향 없음	레이아웃 영향

위와 같이 보시면, 시각적으로 숨김을 사용하면 접근성을 유지하면서 시각적으로 내용을 숨길 수 있습니다.

반응형 가시성

Bootstrap은 화면 크기에 따라 가시성을 전환할 수 있는 클래스도 제공합니다. 이 클래스는 시각적으로 숨김과 반응형 디자인의 개념을 결합합니다:

.d-none: 모든 화면 크기에서 숨김
.d-{sm,md,lg,xl,xxl}-none: 특정 화면 크기에서만 숨김
.d-{sm,md,lg,xl,xxl}-block: 특정 화면 크기에서 블록 요소로 가시화

예를 들어:

<div class="d-none d-md-block">
이 내용은 작은 화면에서 숨겨지지만 중간 이상의 화면에서는 가시화됩니다.
</div>

결론

그렇게 해서, 젊은 마법사 여러분! Bootstrap의 시각적으로 숨김 클래스의 비밀을 풀어냈습니다. 강력한 힘을 가지면 큰 책임도 따릅니다. 이 기술들을 지혜롭게 사용하여 시각적으로 아름답고 모든 사용자에게 접근 가능한 웹사이트를 만들어 나가세요.

우리의 수업을 마무리하면서, 오래된 웹 개발자가 한 말을 떠올립니다. "웹 디자인의 진정한 마법은 보이는 것에 있는 것이 아니라, 보이지 않는 것에 있는 것입니다." 그러므로, 실험하고, 모험하고, 모든 사람에게 마법 같은 웹 경험을 만들어 나가세요!

다음 웹 개발의 여정에서 다시 만나요. 코딩을 계속하고, 호기심을 유지하세요!

Credits: Image by storyset