Coverage

kind default BASECTA 버튼입니다 기본 동작을 확인합니다. kind default raw-code {{< cta kind = "default" priority = "primary" size = "md" tone = "neutral" align = "center" badge = "BASE" label = "CTA 버튼입니다" surface = "after-content" note = "기본 동작을 확인합니다." target = "_self" href = "https://example.com/" rel = "" aria_label = "" tracking_id = "" analytics_event = "" id = "" class = "" disabled = "false" >}} kind external BASECTA 버튼입니다 기본 동작을 확인합니다. ...

priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다. priority primary raw-code {{< cta kind = "default" priority = "primary" size = "md" tone = "neutral" align = "center" badge = "BASE" label = "CTA 버튼입니다" subtitle = "자세히 보기" note = "기본 동작을 확인합니다." target = "_self" href = "https://example.com/" rel = "" aria_label = "" tracking_id = "" analytics_event = "" id = "" class = "" disabled = "false" >}} priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다. ...

shortcode CTA coverage index 이 페이지는 04-coverage 아래의 모든 예제를 파일 단위로 모아, 렌더링 결과와 원형 코드를 함께 보여 줍니다. content/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/01-default.md 렌더링 결과 BASE기본 CTA자세히 보기 기본 동작을 확인합니다. ...

FALLBACK커스텀 폴백 확인 정의되지 않은 kind는 기본 preset으로 폴백합니다. {{< cta kind="custom" label="커스텀 폴백 확인" href="/contact/" ref="" intent="generic" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="정의되지 않은 kind는 기본 preset으로 폴백합니다." subtitle="" aria_label="" badge="FALLBACK" tracking_id="cta-kind-13" analytics_event="cta_kind_custom" id="cta-kind-custom" class="is-custom" compact="false" disabled="false" >}}

BETA맞춤 제안 보기 현재는 준비 중입니다. 맞춤 제안이 준비되면 이 자리에서 안내합니다. {{< cta kind="custom_offer" label="맞춤 제안 보기" href="/offers/" ref="" intent="generic" priority="primary" surface="footer" size="md" tone="danger" align="center" target="_self" rel="" note="현재는 준비 중입니다." subtitle="" aria_label="" badge="BETA" tracking_id="cta-kind-12" analytics_event="cta_kind_custom_offer" id="cta-kind-custom-offer" class="is-offer" compact="false" disabled="true" >}} 맞춤 제안이 준비되면 이 자리에서 안내합니다. {{< /cta >}}

COPY복사 문서 주소를 복사합니다. {{< cta kind="copy" label="복사" href="/lab/hugo-content-lab/30-components/" ref="" intent="copy" priority="utility" surface="inline" size="xs" tone="neutral" align="left" target="_self" rel="" note="문서 주소를 복사합니다." subtitle="" aria_label="문서 주소를 클립보드로 복사" badge="COPY" tracking_id="cta-kind-11" analytics_event="cta_kind_copy" id="cta-kind-copy" class="u-track-cta" compact="true" disabled="false" >}}

NEW구성 살펴보기 같은 사이트 내부 섹션으로 이동합니다. {{< cta kind="internal" label="구성 살펴보기" href="/lab/hugo-content-lab/30-components/" ref="" intent="internal" priority="secondary" surface="after-content" size="md" tone="neutral" align="left" target="_self" rel="" note="같은 사이트 내부 섹션으로 이동합니다." subtitle="" aria_label="내부 페이지로 이동" badge="NEW" tracking_id="cta-kind-10" analytics_event="cta_kind_internal" id="cta-kind-internal" class="is-internal" compact="false" disabled="false" >}}

COPY복사 클립보드 복사를 유도합니다. {{< cta kind="utility" label="복사" href="/contact/" ref="" intent="copy" priority="utility" surface="inline" size="xs" tone="neutral" align="left" target="_self" rel="" note="클립보드 복사를 유도합니다." subtitle="" aria_label="문서 주소 복사" badge="COPY" tracking_id="cta-kind-09" analytics_event="cta_kind_utility" id="cta-kind-utility" class="u-track-cta" compact="true" disabled="false" >}}

PRICE가격 확인 요금표를 먼저 확인합니다. {{< cta kind="price_check" label="가격 확인" href="https://example.com/pricing" ref="" intent="pricing" priority="secondary" surface="sidebar" size="sm" tone="warning" align="stretch" target="_blank" rel="noopener noreferrer" note="요금표를 먼저 확인합니다." subtitle="" aria_label="가격 확인" badge="PRICE" tracking_id="cta-kind-08" analytics_event="cta_kind_price" id="cta-kind-price" class="is-price" compact="false" disabled="false" >}}

COPY복사클립보드 인라인에서 최소 면적으로 동작합니다. {{< cta kind="copy" label="복사" href="/contact/" ref="/lab/hugo-content-lab/30-components/" intent="copy" priority="utility" surface="inline" size="xs" tone="muted" align="left" target="_self" rel="" note="인라인에서 최소 면적으로 동작합니다." subtitle="클립보드" aria_label="문서 주소 복사" badge="COPY" tracking_id="cta-visual-07" analytics_event="cta_visual_copy" id="cta-visual-copy" class="is-copy" compact="true" disabled="false" >}}

TRIAL무료 체험 시작14일 무료 신용카드 없이 시작할 수 있습니다. {{< cta kind="trial" label="무료 체험 시작" href="/signup/" ref="" intent="trial" priority="primary" surface="hero" size="xl" tone="accent" align="right" target="_self" rel="" note="신용카드 없이 시작할 수 있습니다." subtitle="14일 무료" aria_label="" badge="TRIAL" tracking_id="cta-kind-07" analytics_event="cta_kind_trial" id="cta-kind-trial" class="is-highlighted" compact="false" disabled="false" >}}

NEW뉴스레터 구독매주 한 번 매주 핵심 업데이트를 보냅니다. {{< cta kind="newsletter" label="뉴스레터 구독" href="/newsletter/" ref="" intent="subscribe" priority="primary" surface="header" size="md" tone="accent" align="center" target="_self" rel="" note="매주 핵심 업데이트를 보냅니다." subtitle="매주 한 번" aria_label="뉴스레터 구독" badge="NEW" tracking_id="cta-kind-06" analytics_event="cta_kind_newsletter" id="cta-kind-newsletter" class="is-inline" compact="false" disabled="false" >}}

PDF다운로드 파일을 바로 내려받습니다. {{< cta kind="download" label="다운로드" href="/files/checklist.pdf" ref="" intent="download" priority="utility" surface="inline" size="xs" tone="muted" align="left" target="_self" rel="" note="파일을 바로 내려받습니다." subtitle="" aria_label="" badge="PDF" tracking_id="cta-kind-05" analytics_event="cta_kind_download" id="cta-kind-download" class="u-track-cta" compact="false" disabled="false" >}}

READ다음 글 보기혼합 마크다운 굵게, 링크, 들여쓰기를 섞은 본문 예시입니다. 중요 포인트를 먼저 보고, 자세한 설명으로 넘어가세요. {{< cta kind="related" label="다음 글 보기" href="/lab/hugo-content-lab/70-real-world-posts/medium-post/" ref="/blog/" intent="related" priority="tertiary" surface="in-content" size="sm" tone="neutral" align="left" target="_self" rel="" note="굵게, 링크, 들여쓰기를 섞은 본문 예시입니다." subtitle="혼합 마크다운" aria_label="다음 글 보기" badge="READ" tracking_id="cta-body-04" analytics_event="cta_body_mixed" id="cta-body-mixed" class="is-inline-callout" compact="false" disabled="false" >}} **중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요. {{< /cta >}}

BASE기본 이동href 중심 기본 이동 경로를 보여줍니다. {{< cta kind="default" label="기본 이동" href="/contact/" ref="/blog/" intent="generic" priority="utility" surface="sidebar" size="xs" tone="muted" align="stretch" target="_self" rel="" note="기본 이동 경로를 보여줍니다." subtitle="href 중심" aria_label="기본 이동" badge="BASE" tracking_id="cta-routing-04" analytics_event="cta_default_move" id="cta-routing-href" class="u-track-cta" compact="true" disabled="false" >}}

OFF비활성 상태클릭 불가 disabled 상태의 메타 구성을 보여줍니다. {{< cta kind="default" label="비활성 상태" href="/lab/hugo-content-lab/30-components/" ref="/blog/" intent="generic" priority="secondary" surface="after-content" size="md" tone="warning" align="right" target="_self" rel="" note="disabled 상태의 메타 구성을 보여줍니다." subtitle="클릭 불가" aria_label="비활성 상태" badge="OFF" tracking_id="cta-meta-04" analytics_event="cta_meta_disabled" id="cta-meta-disabled" class="is-disabled" compact="false" disabled="true" >}}

HOT상담 신청도입 전 문의 평일 기준 1영업일 내 회신 상담 주제와 희망 일정을 함께 적어 주세요. {{< cta kind="consult" label="상담 신청" href="/contact/" ref="" intent="consult" priority="primary" surface="after-content" size="md" tone="success" align="center" target="_self" rel="" note="평일 기준 1영업일 내 회신" subtitle="도입 전 문의" aria_label="" badge="HOT" tracking_id="cta-kind-04" analytics_event="cta_kind_consult" id="cta-kind-consult" class="is-consult" compact="false" disabled="false" >}} 상담 주제와 희망 일정을 함께 적어 주세요. {{< /cta >}}

RELATED관련 글 더 보기관련 읽을거리 본문과 이어서 읽기 좋습니다. 추가 설명이 필요한 경우 본문을 여기에 적습니다. {{< cta kind="related" label="관련 글 더 보기" href="/blog/" ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/" intent="related" priority="tertiary" surface="in-content" size="sm" tone="neutral" align="left" target="_self" rel="" note="본문과 이어서 읽기 좋습니다." subtitle="관련 읽을거리" aria_label="" badge="RELATED" tracking_id="cta-kind-03" analytics_event="cta_kind_related" id="cta-kind-related" class="is-related" compact="false" disabled="false" >}} 추가 설명이 필요한 경우 본문을 여기에 적습니다. {{< /cta >}}

SAFE안전한 새 창보안 관계 rel을 명시적으로 넣는 예시입니다. {{< cta kind="external" label="안전한 새 창" href="https://example.com/docs" ref="/blog/" intent="external" priority="primary" surface="hero" size="lg" tone="brand" align="center" target="_blank" rel="noopener noreferrer" note="rel을 명시적으로 넣는 예시입니다." subtitle="보안 관계" aria_label="안전한 새 창 열기" badge="SAFE" tracking_id="cta-fallback-03" analytics_event="cta_fallback_rel" id="cta-fallback-rel" class="is-external" compact="false" disabled="false" >}}

PAGE페이지 참조 이동site.GetPage 경로 ref가 실제 페이지 참조일 때의 구성을 보여줍니다. {{< cta kind="internal" label="페이지 참조 이동" href="/lab/hugo-content-lab/30-components/" ref="/lab/hugo-content-lab/70-real-world-posts/medium-post/" intent="internal" priority="secondary" surface="in-content" size="sm" tone="neutral" align="left" target="_self" rel="" note="ref가 실제 페이지 참조일 때의 구성을 보여줍니다." subtitle="site.GetPage 경로" aria_label="내부 페이지로 이동" badge="PAGE" tracking_id="cta-routing-03" analytics_event="cta_internal_route" id="cta-routing-ref" class="is-internal" compact="false" disabled="false" >}}

STEP상담 신청절차 안내 제목과 목록이 섞인 본문 예시입니다. 확인 순서 접수 검토 회신 {{< cta kind="consult" label="상담 신청" href="/contact/" ref="/blog/" intent="consult" priority="primary" surface="after-content" size="md" tone="success" align="center" target="_self" rel="" note="제목과 목록이 섞인 본문 예시입니다." subtitle="절차 안내" aria_label="상담 신청" badge="STEP" tracking_id="cta-body-03" analytics_event="cta_body_list" id="cta-body-list" class="is-content" compact="false" disabled="false" >}} ### 확인 순서 1. 접수 2. 검토 3. 회신 {{< /cta >}}

HOT전체 메타부가 제목 메타데이터를 한 번에 확인하는 예시입니다. {{< cta kind="external" label="전체 메타" href="https://example.com/docs" ref="/lab/hugo-content-lab/30-components/" intent="external" priority="primary" surface="hero" size="lg" tone="success" align="center" target="_blank" rel="noopener noreferrer" note="메타데이터를 한 번에 확인하는 예시입니다." subtitle="부가 제목" aria_label="전체 메타를 확인" badge="HOT" tracking_id="cta-meta-03" analytics_event="cta_meta_all" id="cta-meta-all" class="is-promo" compact="false" disabled="false" >}}

INFO상담 신청상세 설명 여러 문단 본문 예시입니다. 첫 번째 문단입니다. 두 번째 문단입니다. {{< cta kind="consult" label="상담 신청" href="/contact/" ref="/blog/" intent="consult" priority="primary" surface="after-content" size="md" tone="success" align="center" target="_self" rel="" note="여러 문단 본문 예시입니다." subtitle="상세 설명" aria_label="상담 신청" badge="INFO" tracking_id="cta-body-02" analytics_event="cta_body_multi" id="cta-body-multi" class="is-content" compact="false" disabled="false" >}} 첫 번째 문단입니다. 두 번째 문단입니다. {{< /cta >}}

OFFICIAL새 창 안전 열기보안 속성 포함 외부 도메인은 새 창으로 엽니다. {{< cta kind="external" label="새 창 안전 열기" href="https://example.com/docs" ref="/blog/" intent="external" priority="primary" surface="hero" size="lg" tone="brand" align="center" target="_blank" rel="noopener noreferrer" note="외부 도메인은 새 창으로 엽니다." subtitle="보안 속성 포함" aria_label="새 창으로 외부 문서 열기" badge="OFFICIAL" tracking_id="cta-routing-02" analytics_event="cta_external_open" id="cta-routing-blank" class="is-external" compact="true" disabled="false" >}}

OFFICIAL외부 문서 열기공식 문서 새 창에서 외부 문서를 엽니다. {{< cta kind="external" label="외부 문서 열기" href="https://example.com/docs" ref="/blog/" intent="external" priority="primary" surface="hero" size="lg" tone="brand" align="center" target="_blank" rel="noopener noreferrer" note="새 창에서 외부 문서를 엽니다." subtitle="공식 문서" aria_label="외부 링크" badge="OFFICIAL" tracking_id="cta-kind-02" analytics_event="cta_kind_external" id="cta-kind-external" class="is-external" compact="true" disabled="false" >}}

WARN정렬 폴백정렬 검증 잘못된 align 값은 기본 정렬로 처리됩니다. {{< cta kind="default" label="정렬 폴백" href="/lab/hugo-content-lab/30-components/" ref="/blog/" intent="generic" priority="utility" surface="sidebar" size="xs" tone="warning" align="bogus" target="_self" rel="" note="잘못된 align 값은 기본 정렬로 처리됩니다." subtitle="정렬 검증" aria_label="정렬 폴백" badge="WARN" tracking_id="cta-fallback-02" analytics_event="cta_fallback_align" id="cta-fallback-align" class="is-warning" compact="true" disabled="false" >}}

A11Y이벤트 추적접근성 접근성 라벨과 추적 ID를 함께 넣는 예시입니다. {{< cta kind="default" label="이벤트 추적" href="/lab/hugo-content-lab/30-components/" ref="/blog/" intent="generic" priority="utility" surface="inline" size="sm" tone="brand" align="left" target="_self" rel="" note="접근성 라벨과 추적 ID를 함께 넣는 예시입니다." subtitle="접근성" aria_label="문서 주소를 복사" badge="A11Y" tracking_id="cta-meta-02" analytics_event="cta_meta_track" id="cta-meta-aria" class="u-track-cta" compact="true" disabled="false" >}}

FALLBACK미지의 CTAfallback 알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다. {{< cta kind="mystery_campaign" label="미지의 CTA" href="/lab/hugo-content-lab/30-components/" ref="/blog/" intent="generic" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다." subtitle="fallback" aria_label="미지의 CTA" badge="FALLBACK" tracking_id="cta-fallback-01" analytics_event="cta_fallback_unknown" id="cta-fallback-unknown" class="is-fallback" compact="false" disabled="false" >}}

INFO상담 신청본문 포함 단일 문단 본문 예시입니다. 평일 기준 1영업일 내에 회신드립니다. {{< cta kind="consult" label="상담 신청" href="/contact/" ref="/blog/" intent="consult" priority="primary" surface="after-content" size="md" tone="success" align="center" target="_self" rel="" note="단일 문단 본문 예시입니다." subtitle="본문 포함" aria_label="상담 신청" badge="INFO" tracking_id="cta-body-01" analytics_event="cta_body_single" id="cta-body-single" class="is-content" compact="false" disabled="false" >}} 평일 기준 1영업일 내에 회신드립니다. {{< /cta >}}

TOP핵심 CTA영웅 영역 가장 눈에 띄는 핵심 CTA입니다. {{< cta kind="default" label="핵심 CTA" href="/contact/" ref="/blog/" intent="generic" priority="primary" surface="hero" size="xl" tone="brand" align="center" target="_self" rel="" note="가장 눈에 띄는 핵심 CTA입니다." subtitle="영웅 영역" aria_label="핵심 CTA" badge="TOP" tracking_id="cta-visual-01" analytics_event="cta_visual_top" id="cta-visual-hero" class="is-hero" compact="false" disabled="false" >}}

TEST링크 우선순위 확인우선순위 테스트 href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다. {{< cta kind="related" label="링크 우선순위 확인" href="https://example.com/docs" ref="/lab/hugo-content-lab/30-components/" intent="related" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다." subtitle="우선순위 테스트" aria_label="" badge="TEST" tracking_id="cta-routing-01" analytics_event="cta_route_test" id="cta-routing-both" class="is-test" compact="false" disabled="false" >}}

BASE기본 CTA자세히 보기 기본 동작을 확인합니다. {{< cta kind="default" label="기본 CTA" href="/contact/" ref="" intent="generic" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="기본 동작을 확인합니다." subtitle="자세히 보기" aria_label="" badge="BASE" tracking_id="cta-kind-01" analytics_event="cta_kind_default" id="cta-kind-default" class="is-default" compact="false" disabled="false" >}}

NEW요금제 확인가장 많이 쓰는 구성 배지와 subtitle을 함께 쓰는 예시입니다. {{< cta kind="default" label="요금제 확인" href="/pricing/" ref="/blog/" intent="pricing" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="배지와 subtitle을 함께 쓰는 예시입니다." subtitle="가장 많이 쓰는 구성" aria_label="요금제 확인" badge="NEW" tracking_id="cta-meta-01" analytics_event="cta_meta_badge" id="cta-meta-badge" class="is-highlighted" compact="false" disabled="false" >}}