부트스트랩 - 목록 그룹 데모
안녕하세요, 웹 개발자 지망생 여러분! 오늘 우리는 부트스트랩의 목록 그룹 세계로 접어들어 볼 거예요. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 여정을 안내해 드리게 되어 기쁩니다. 그럼, 좋아하는 음료를 한 잔 들고 편안하게 앉아, 이 코딩 모험을 함께 떠나보세요!
목록 그룹이란?
이제 바로 실제로 들어가보겠지만, 먼저 기본 개념을 알아보겠습니다. 목록 그룹은 부트스트랩에서 제공하는 유연하고 강력한 컴포넌트로, 일련의 콘텐츠를 표시하는 데 사용됩니다. 이를 통해 목록 항목을 스타일리시하게 표현할 수 있습니다. 단순한 텍스트, 링크, 심지어 사용자 정의 콘텐츠까지, 지루한 목록을 풍요로운 스타일로 변신시킬 수 있습니다!
목록 그룹을 사용하는 이유
목록 그룹은 매우 다재다능합니다. 다음과 같은 용도로 사용할 수 있습니다:
- 단순 목록 표시
- 네비게이션 메뉴 생성
- 사용자 알림 표시
- 구조화된 콘텐츠 표시
이제 목록 그룹이 무엇이고 왜 멋질지 알아보았으니, 손을 dirt고 코딩을 시작해보겠습니다!
기본 목록 그룹
간단한 목록 그룹 예제를 시작해보겠습니다:
<ul class="list-group">
<li class="list-group-item">첫 번째 항목</li>
<li class="list-group-item">두 번째 항목</li>
<li class="list-group-item">세 번째 항목</li>
</ul>이 예제에서는 불순서 목록 (<ul>)에 list-group 클래스를 사용하고, 각 목록 항목 (<li>)에 list-group-item 클래스를 추가합니다. 이렇게 하면 깨끗하고 경계선이 있는 목록이 생성됩니다.
활성 항목
특정 항목을 강조하고 싶을 때가 있습니다. 부트스트랩은 active 클래스를 사용하여 이를 쉽게 할 수 있게 해줍니다:
<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">첫 번째 항목</li>
<li class="list-group-item disabled">비활성 항목</li>
<li class="list-group-item">세 번째 항목</li>
</ul>disabled 항목은 회색으로 칠해져 있어 비호환성을 나타냅니다. 이는 해당 항목에 "触碰勿视" 표지를 달는 것과 같습니다.
링크 포함 목록 그룹
목록 그룹은 정적 목록만으로는 아니며, <a> 태그를 사용하여 클릭 가능한 네비게이션 메뉴로 변환할 수 있습니다:
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active">홈</a>
<a href="#" class="list-group-item list-group-item-action">프로필</a>
<a href="#" class="list-group-item list-group-item-action">메시지</a>
</div>이 예제에서는 <a> 태그를 사용하고 list-group-item 및 list-group-item-action 클래스를 추가합니다. list-group-item-action 클래스는 하버와 활성 상태를 링크에 추가합니다.
Flatten 목록 그룹
외부 경계선과 둥근 모서리를 제거하고 싶다면 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>
</ul>이렇게 하면 깨끗하고 경계선이 없는 목록이 생성되어 페이지의 다른 요소와 원활하게 어울립니다.
수평 목록 그룹
목록 그룹은 수평으로 표시할 수도 있습니다. 이는 탭 모양의 인터페이스를 만드는 데 유용합니다:
<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>list-group-horizontal 클래스는 수직 목록을 수평 목록으로 변환합니다. 이는 목록이 라이머를 춤추는 것과 같습니다 - 얼마나 낮게 갈 수 있을까요?
문맥 클래스
부트스트랩은 문맥 클래스를 제공하여 목록 항목에 색상을 추가할 수 있어 의미를 전달하는 데 도움이 됩니다:
<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>이 문맥 클래스는 목록 항목에 색상을 추가하여 시각적으로 더 매력적이고 정보적이게 합니다.
사용자 정의 콘텐츠
목록 그룹은 텍스트만으로는 아니며, 사용자 정의 콘텐츠를 포함할 수 있습니다:
<div class="list-group">
<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>3일 전</small>
</div>
<p class="mb-1">일부 플레이스홀더 콘텐츠가 포함된 문단.</p>
<small>그리고 일부 작은 인쇄물.</small>
</a>
</div>이 예제는 목록 항목에 제목, 문단, 그리고 추가 텍스트를 포함한 사용자 정의 콘텐츠를 보여줍니다. 이는 목록 항목을 미니 아티클로 변환하는 것과 같습니다!
목록 그룹에.badge 추가
목록 항목에.badge를 추가하여 추가 정보를 표시할 수 있습니다:
<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-warning rounded-pill">2</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-center">
발송
<span class="badge bg-secondary rounded-pill">99+</span>
</li>
</ul>이렇게 하면 목록의 오른쪽에.badge가 표시되어 카운트나 상태 표시에 유용합니다.
결론
그렇습니다, 여러분! 우리는 부트스트랩 목록 그룹의 세계를 함께 여행했습니다. 간단한 목록에서 복잡한 사용자 정의 콘텐츠까지, 다양한 기능을 경험했습니다. 연습이 완벽을 이루는 열쇠라는 것을 기억하고, 이 예제들을 실험하고 자신만의 독특한 목록 그룹을 만들어보세요.
목록 그룹은 웹 디자인의 스위스 아ーミ knife와 같아서, 다재다능하고 실용적이며 항상 도구箱에 두고 있으면 유용합니다. 그러니 앞으로 나아가서 목록을 만들어보세요! 누가 알랍니까? 목록 그룹의 마이کل 앙조니가 될 수도 있죠!
행복한 코딩 되세요, 여러분의 목록이 항상 완벽하게 그룹화되길 바랍니다!
Credits: Image by storyset