부트스트랩 (Bootstrap) feat. Card 컴포넌트

부트스트랩 (Bootstrap)

부트스트랩은 HTML, CSS, JavaScript로 구성된 오픈소스 프레임워크입니다. 주요 컴포넌트 중 하나인 'Card 컴포넌트'는 정보나 콘텐츠를 깔끔하게 보여주는 데 사용되며, 제목, 텍스트, 이미지, 링크 등 다양한 요소를 포함할 수 있는 다용도 UI 요소입니다. 트위터에서 개발되었으며, 웹 애플리케이션의 디자인을 빠르게 구현할 수 있도록 다양한 구성 요소와 스타일을 제공합니다.

특징

1. 반응형 디자인 : 다양한 화면 크기와 디바이스에서 잘 동작하는 레이아웃을 제공합니다.
2. CSS 구성 요소 : 버튼, 네비게이션 바, 카드 등 기본 스타일을 가진 UI 요소를 포함합니다.
3. JavaScript 플러그인 : 모달, 드롭다운, 알림창 등 동적인 요소도 쉽게 추가할 수 있습니다.
4. 사용 편의성 : 미리 정의된 클래스와 스타일로 빠른 개발이 가능합니다.

---

Card 컴포넌트

• Card 컴포넌트는 부트스트랩(Bootstrap)에서 가장 많이 사용되는 UI 요소 중 하나로, 정보를 직관적이고 깔끔하게 정리하여 사용자에게 제공할 때 사용됩니다.
• Card는 이미지, 텍스트, 버튼 등을 포함하여 정보를 박스 형태로 정리할 수 있는 부트스트랩의 구성 요소입니다. 이는 HTML 구조를 기반으로 하며, CSS 클래스와 함께 사용하여 스타일을 정의합니다. 이를 통해 복잡한 내용을 시각적으로 쉽게 표현할 수 있습니다. Card 컴포넌트는 가독성과 미관을 동시에 고려한 UI 설계에 매우 유용합니다.

구조

<div class="card" style="width: 18rem;">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">카드 제목</h5>
        <p class="card-text">이것은 카드 컴포넌트의 간단한 예제입니다.</p>
        <a href="#" class="btn btn-primary">자세히 보기</a>
    </div>
</div>

• card 클래스 : 카드 컨테이너를 생성합니다.
• card-img-top 클래스 : 카드 상단에 이미지를 추가합니다.
• card-body 클래스 : 카드의 본문 영역으로, 제목, 텍스트, 버튼 등을 포함합니다.
• card-title, card-text : 제목과 텍스트 스타일을 지정합니다.
• 버튼 (btn) : 카드 내의 작업 버튼을 추가합니다.

---

출처

OpenAI의 ChatGPT (https://openai.com)