Cards

카드(Card)는 정보 요약, 컬렉션 목록, 액션 유도 등 가장 자주 쓰이는 컴포넌트입니다. Kosmos DSL로 반복 가능한 카드 패턴을 정의하고 재사용하는 방법을 소개합니다.

기본 카드

가장 단순한 카드 구성입니다. 제목/본문/액션 버튼 조합을 권장합니다.

// Basic Card
public class CompCard implements HtmlComponent {
  private final String title;
  private final String text;
  private final String actionHref;
  private final String actionLabel;

  public CompCard(String title, String text, String actionHref, String actionLabel) {
    this.title = title; this.text = text; this.actionHref = actionHref; this.actionLabel = actionLabel;
  }

  @Override public String render(RenderContext ctx) {
    return El.div().css("card h-100 shadow-sm").children(
      El.div().css("card-body").children(
        El.h3().css("h5 card-title").text(title),
        El.p().css("card-text").text(text),
        El.a().css("btn btn-primary").href(actionHref).attr("aria-label", actionLabel).text(actionLabel)
      )
    ).render(ctx);
  }
}

카드 그리드

리스트 데이터를 카드 그리드로 렌더링합니다. 성능을 위해 for 루프를 권장합니다.

// Card Grid (3열)
El.div().css("row g-3").children(
  IntStream.range(0, items.size()).mapToObj(i -> {
    var it = items.get(i);
    return El.div().css("col-md-4").child(
      new CompCard(it.getTitle(), it.getSummary(), "/items/" + it.getId(), "자세히")
    );
  }).toList()
);

카드 변형(Variants)

유형 설명 DSL 힌트
이미지 카드 상단 이미지 + 본문 + 액션 El.img().css("card-img-top")
리스트 카드 여러 항목 요약 El.ul().css("list-group list-group-flush")
헤더/푸터 제목/상태/메타 El.div().css("card-header|card-footer")
상태 배지 상태 강조 El.span().css("badge text-bg-info")

심화: 이미지 카드

public class CompImageCard implements HtmlComponent {
  private final String imgSrc, title, text, href;
  public CompImageCard(String imgSrc, String title, String text, String href) {
    this.imgSrc = imgSrc; this.title = title; this.text = text; this.href = href;
  }
  @Override public String render(RenderContext ctx) {
    return El.div().css("card h-100").children(
      El.img().css("card-img-top").attr("src", imgSrc).attr("alt", title),
      El.div().css("card-body").children(
        El.h3().css("h5 card-title").text(title),
        El.p().css("card-text").text(text),
        El.a().css("btn btn-outline-primary").href(href).text("더보기")
      )
    ).render(ctx);
  }
}

카드 해부도

card-img-top card-body title / text / actions

접근성 & 성능 팁

  • 이미지 대체 텍스트: alt 속성에 의미 전달
  • 타이틀 계층: 리스트 내부는 h5 등 하위 헤딩 사용
  • 리스트 성능: 50개 이상이면 페이지네이션/무한 스크롤 고려
  • 스켈레톤 UI: 데이터 지연 시 placeholder-glow 활용

주의사항

중복 마크업: 카드 변형이 많아지면 공통 부분을 Comp*로 끌어올리세요.
과도한 그림자/이미지: 목록 밀집 화면에서 렌더 비용이 커질 수 있습니다.

다음으로