El.* Catalog

Kosmos DSL의 El.* 클래스는 HTML 태그를 Java 코드로 안전하게 빌드하기 위한 정적 팩토리 메서드 집합입니다.
이 문서에서는 각 태그별 DSL 생성자, 주요 속성, 예시를 정리합니다.

El 클래스: 모든 HTML 요소 생성의 진입점입니다. 예: El.div(), El.h1(), El.img(), El.a()

1. 기본 구조

public final class El {
  public static HtmlTag div() { return new HtmlTag("div"); }
  public static HtmlTag p() { return new HtmlTag("p"); }
  public static HtmlTag h1() { return new HtmlTag("h1"); }
  public static HtmlTag a() { return new HtmlTag("a"); }
  public static VoidTag img() { return new VoidTag("img"); }
  public static VoidTag input() { return new VoidTag("input"); }
}

모든 El.*() 메서드는 HtmlTag 또는 VoidTag를 반환하며, 내부적으로 태그 이름을 하드코딩하여 HTML 오타를 원천 차단합니다.

2. 주요 메서드 요약

메서드 태그 타입 주요 용도
El.div() HtmlTag 가장 기본적인 컨테이너
El.span() HtmlTag 인라인 요소 그룹
El.h1() ~ El.h6() HtmlTag 헤딩 레벨 구성
El.p() HtmlTag 문단 텍스트
El.a() HtmlTag 링크, 버튼 역할
El.img() VoidTag 이미지 삽입
El.input() VoidTag 폼 입력 필드
El.button() HtmlTag 버튼, 액션 트리거
El.form() HtmlTag 입력 폼 구조
El.table() HtmlTag 데이터 테이블

3. 메서드 체이닝 규칙

  • css(String) → addClass() 내부 호출
  • attr(String, String) → addAttribute() 내부 호출
  • child(HtmlComponent) → 자식 1개 추가
  • children(HtmlComponent...) → 자식 다수 추가
  • text(String) → 텍스트 노드 생성
// 예시
El.div().css("card p-3").children(
  El.h3().text("Hello, Kosmos!"),
  El.p().text("Java DSL로 작성된 HTML")
);

4. 카테고리별 DSL 목록

📦 Structure
  • El.html() / El.head() / El.body()
  • El.div() / El.section() / El.article()
  • El.header() / El.footer() / El.main()
🧩 Text & Heading
  • El.h1() ~ El.h6()
  • El.p(), El.span(), El.strong(), El.em()
🖱️ Interactive
  • El.a(), El.button(), El.nav(), El.ul(), El.li()
📊 Data
  • El.table(), El.thead(), El.tbody(), El.tr(), El.td()
📄 Form Elements
  • El.form(), El.input(), El.textarea(), El.select(), El.option()
🖼️ Media & Visual
  • El.img(), El.figure(), El.figcaption()
🧭 Meta & Utility
  • El.meta(), El.link(), El.script(), El.style()

5. 실전 예시

다음은 카드 UI를 DSL로 구현한 예시입니다.

// DSL 예시: Card Component
String card = El.div().css("card shadow-sm p-4").children(
  El.img().attr("src", "/assets/img/logo.svg").attr("alt", "Kosmos Logo").css("mb-3"),
  El.h4().text("Kosmos Java HTML DSL"),
  El.p().text("Atomic Design 기반의 서버사이드 DSL 프레임워크"),
  El.a().css("btn btn-primary").attr("href", "/docs/kosmos/getting-started")
       .text("Getting Started")
).render();
이 DSL은 실제 HTML로 변환 시 다음과 같이 출력됩니다.
<div class="card shadow-sm p-4">
  <img src="/assets/img/logo.svg" alt="Kosmos Logo" class="mb-3" />
  <h4>Kosmos Java HTML DSL</h4>
  <p>Atomic Design 기반의 서버사이드 DSL 프레임워크</p>
  <a href="/docs/kosmos/getting-started" class="btn btn-primary">Getting Started</a>
</div>

6. 표준화 가이드

  • 모든 El.*() 함수명은 HTML 태그명과 동일하게 유지합니다.
  • 자식이 없는 태그(img, br, input 등)는 VoidTag로 관리합니다.
  • CSS는 css(), 속성은 attr(), 텍스트는 text()로만 지정합니다.
  • 조건부 렌더링은 El.cond() 또는 RenderContext.if()를 사용합니다.

7. 전체 DSL 카탈로그

태그 유형 메서드 비고
div HtmlTag El.div() 가장 많이 사용되는 컨테이너
p HtmlTag El.p() 문단 텍스트
a HtmlTag El.a() 링크 또는 버튼
img VoidTag El.img() 이미지 요소
input VoidTag El.input() 입력 필드
form HtmlTag El.form() 폼 영역
table HtmlTag El.table() 데이터 테이블
ul/li HtmlTag El.ul(), El.li() 리스트 구조
h1~h6 HtmlTag El.h1() ... El.h6() 헤더 제목

다음으로