부트스트랩 - 리스트 그룹: 초보자를 위한 종합 가이드

안녕하세요, 웹 개발자 지망생 여러분! 부트스트랩의 리스트 그룹을 통해 흥미로운 여정을 함께할 수 있게 되어 기쁩니다. 컴퓨터 과학을 10년 넘게 가르쳐온 경험을 바탕으로, 이 컴포넌트를 마스터하면 웹 디자인 도구킷에서 게임 체인저가 될 것이라 확신합니다. 그럼 시작해보겠습니다!

리스트 그룹이란?

시작하기 전에 리스트 그룹이 무엇인지 이해해보겠습니다. 할 일 목록 앱을 만들고 있다고 상상해보세요. 작업을 깔끔하게 정리하고 싶을 텐데, 그게 바로 리스트 그룹의 역할입니다. 웹 디자인에서 리스트 그룹은 내용을 표시하는 유연하고 강력한 방법입니다. 단순한 쇼핑 목록에서 복잡한 네비게이션 메뉴까지, 리스트 그룹이 당신을 도와줄 것입니다!

기본 아이템

그럼 기본적인 리스트 그룹을 만들어보겠습니다. 이 작업은 쉽기만 합니다. 다음과 같이 합니다:

<ul class="list-group">
<li class="list-group-item">한 아이템</li>
<li class="list-group-item">두 번째 아이템</li>
<li class="list-group-item">세 번째 아이템</li>
<li class="list-group-item">네 번째 아이템</li>
<li class="list-group-item">다섯 번째 아이템</li>
</ul>

이 예제에서 우리는 list-group 클래스를 사용한 비ordered 목록 (<ul>)을 사용하고 있습니다. 각 목록 아이템 (<li>)에 list-group-item 클래스를 추가합니다. 이렇게 하면 아주 깨끗하고 스타일이 지정된 리스트를 마음껏 사용할 수 있습니다!

활성 아이템

occasionally, you might want to highlight an item in your list. Perhaps it's the current page in a navigation menu. That's where the active class comes in handy:

<ul class="list-group">
<li class="list-group-item active">활성 아이템</li>
<li class="list-group-item">두 번째 아이템</li>
<li class="list-group-item">세 번째 아이템</li>
</ul>

active 클래스는 아이템을 다른 배경색으로 강조시켜줍니다. 특정 아이템에 스포트라이트를 비추는 것과 같습니다!

비활성 아이템

사용자가 상호작용할 수 없도록 아이템을 표시하고 싶을 때는 disabled 클래스를 사용합니다:

<ul class="list-group">
<li class="list-group-item disabled" aria-disabled="true">비활성 아이템</li>
<li class="list-group-item">두 번째 아이템</li>
<li class="list-group-item">세 번째 아이템</li>
</ul>

disabled 클래스는 아이템을 회색으로 만들어 클릭할 수 없게 합니다. "touch me not" 표지를 달아둔 것과 같습니다!

링크와 버튼

리스트 그룹은 정적 목록에만 국한되지 않습니다. 목록 아이템을 클릭 가능한 링크나 버튼으로 만들 수 있습니다:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
현재 링크 아이템
</a>
<a href="#" class="list-group-item list-group-item-action">두 번째 링크 아이템</a>
<a href="#" class="list-group-item list-group-item-action">세 번째 링크 아이템</a>
<a href="#" class="list-group-item list-group-item-action">네 번째 링크 아이템</a>
<a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">비활성 링크 아이템</a>
</div>

여기서 우리는 <a> 태그를 사용하여 링크를 만들고, list-group-item-action 클래스를 추가하여 이 링크를 버튼처럼 보이고 행동하게 합니다. 쇼핑 목록을 옵션 메뉴로 변환하는 것과 같습니다!

플러시

外边框과 둥근 모서리를 제거하고 싶다면 list-group-flush 클래스가 도와줍니다:

<ul class="list-group list-group-flush">
<li class="list-group-item">한 아이템</li>
<li class="list-group-item">두 번째 아이템</li>
<li class="list-group-item">세 번째 아이템</li>
<li class="list-group-item">네 번째 아이템</li>
<li class="list-group-item">다섯 번째 아이템</li>
</ul>

이렇게 하면 리스트 그룹이 더 깨끗하고 원활한 모습을 보입니다. 주변 콘텐츠와 자연스럽게 어울리는 것이 좋습니다.

번호 매기기

학교에서 사용했던 번호 매기기 목록을 기억하시나요? 부트스트랩에서도 그런 목록을 만들 수 있습니다:

<ol class="list-group list-group-numbered">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Cras justo odio</li>
</ol>

list-group-numbered 클래스는 목록 아이템을 자동으로 번호 매기기 합니다. 개인 비서가 할 일 목록을 번호 매기하는 것과 같습니다!

수평

리스트는 항상 수직일 필요는 없습니다. 부트스트랩을 사용하면 수평으로 만들 수 있습니다:

<ul class="list-group list-group-horizontal">
<li class="list-group-item">한 아이템</li>
<li class="list-group-item">두 번째 아이템</li>
<li class="list-group-item">세 번째 아이템</li>
</ul>

이렇게 하면 아이템들이 나란히 배치됩니다. 네비게이션 메뉴나 카테고리를 표시하는 데 적합합니다.

변형

부트스트랩은 다양한 색상 변형을 제공하여 의미를 전달할 수 있습니다:

<ul class="list-group">
<li class="list-group-item">간단한 기본 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-primary">간단한 주요 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-secondary">간단한 보조 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-success">간단한 성공 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-danger">간단한 위험 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-warning">간단한 경고 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-info">간단한 정보 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-light">간단한 밝은 리스트 그룹 아이템</li>
<li class="list-group-item list-group-item-dark">간단한 어두운 리스트 그룹 아이템</li>
</ul>

이 색상 변형은 다양한 상태나 우선순위를 나타내는 데 사용될 수 있습니다. 중요도에 따라 작업을 색상으로 구분하는 것과 같습니다!

배지 추가

목록 아이템에 추가 정보를 추가하고 싶다면 배지가 좋은 방법입니다:

<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
리스트 아이템
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
두 번째 리스트 아이템
<span class="badge bg-primary rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
세 번째 리스트 아이템
<span class="badge bg-primary rounded-pill">1</span>
</li>
</ul>

이렇게 하면 목록 아이템에 작은 배지 요소를 추가할 수 있어, 개수나 상태 표시에 매우 유용합니다.

커스텀 콘텐츠

리스트 그룹은 텍스트만으로 구성되지 않습니다. 커스텀 콘텐츠를 추가하여 풍부한 정보를 제공할 수 있습니다:

<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">리스트 그룹 아이템 제목</h5>
<small>3 일 전</small>
</div>
<p class="mb-1">일부 플레이스홀더 콘텐츠가 포함된 문단.</p>
<small>그리고 일부 작은 인쇄물.</small>
</a>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">리스트 그룹 아이템 제목</h5>
<small class="text-muted">3 일 전</small>
</div>
<p class="mb-1">일부 플레이스홀더 콘텐츠가 포함된 문단.</p>
<small class="text-muted">그리고 일부 흐릿한 작은 인쇄물.</small>
</a>
</div>

이렇게 하면 제목, 문단, 그리고 다른 요소를 포함한 복잡한 리스트 아이템을 만들 수 있습니다. 간단한 쇼핑 목록을 상세한 제품 카탈로그로 변환하는 것과 같습니다!

체크박스와 라디오

마지막으로, 리스트 그룹에 체크박스나 라디오 버튼을 추가할 수 있습니다:

<ul class="list-group">
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
첫 번째 체크박스
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
두 번째 체크박스
</li>
<li class="list-group-item">
<input class="form-check-input me-1" type="checkbox" value="" aria-label="...">
세 번째 체크박스
</li>
</ul>

이는 상호작용이 가능한 리스트를 만드는 데 매우 유용합니다. 예를 들어, 사용자가 완료된 작업을 체크할 수 있는 할 일 목록을 만들 수 있습니다.

결론

이제 부트스트랩의 리스트 그룹에 대해 알아보는 흥미로운 여정을 마쳤습니다. 기본적인 리스트에서 복잡한 상호작용 컴포넌트까지, 리스트 그룹은 구조화된, 매력적인 방식으로 콘텐츠를 표시하는 유연한 솔루션을 제공합니다.

이 개념을 마스터하려면 연습이 중요합니다. 그러니 이 예제들을 실험해보고, 다양한 기능을 혼합하여 뭘 만들 수 있는지 보세요. 행복한 코딩을 기원합니다!

방법	설명
기본 아이템	list-group과 list-group-item 클래스를 사용하여 간단한 리스트 그룹 만들기
활성 아이템	active 클래스를 사용하여 아이템 강조하기
비활성 아이템	disabled 클래스를 사용하여 아이템 비활성화하기
링크와 버튼	list-group-item-action 클래스를 사용하여 클릭 가능한 아이템 만들기
플러시	list-group-flush 클래스를 사용하여 외边框과 둥근 모서리 제거하기
번호 매기기	list-group-numbered 클래스를 사용하여 번호 매기기 목록 만들기
수평	list-group-horizontal 클래스를 사용하여 수평 리스트 만들기
변형	색상 변형을 사용하여 의미 전달하기
배지 추가	배지를 사용하여 추가 정보 제공하기
커스텀 콘텐츠	커스텀 콘텐츠를 사용하여 풍부한 리스트 아이템 만들기
체크박스와 라디오	체크박스나 라디오 버튼을 사용하여 상호작용 가능한 리스트 만들기

Credits: Image by storyset