Cta

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자세히 보기 기본 동작을 확인합니다. ...

OFFICIAL외부 문서 열기공식 문서 새 창에서 열립니다 <!-- CTA shortcode keys (known preset / enum-like values) kind (known presets used in this pack): default | external | related | consult | download | newsletter | trial | price_check | utility | custom | copy | internal | custom_offer unknown kind examples fall back to default behavior. priority: primary | secondary | tertiary | utility surface: inline | hero | in-content | after-content | footer | sidebar | header size: xs | sm | md | lg | xl tone: brand | accent | neutral | muted | success | warning | danger align: left | center | right | stretch target: _self | _blank --> {{< 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-docs-hero" analytics_event="cta_docs_open" id="cta-docs-hero" class="is-promo" compact="true" disabled="false" >}}

자세히 보기 {{< cta kind="default" label="자세히 보기" href="/contact/" ref="" intent="generic" priority="secondary" surface="after-content" size="md" tone="neutral" align="center" target="_self" rel="" note="" subtitle="" aria_label="" badge="" tracking_id="" analytics_event="" id="" class="" compact="false" disabled="false" >}}

{{< cta kind="" label="" href="" ref="" intent="" priority="" surface="" size="" tone="" align="" target="" rel="" note="" subtitle="" aria_label="" badge="" tracking_id="" analytics_event="" id="" class="" compact="" disabled="" >}}

cta shortcode cta는 themes/1/layouts/_shortcodes/readme/custom/cta.html와 1:1로 대응하는 테스트 문서입니다. ...

cta 테스트 목적 CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다. 확인 항목 행동 문구가 짧고 분명한가 보조 설명이 있더라도 주 행동을 가리지 않는가 외부 링크와 내부 링크가 구분되는가 예시 구조 검토 요청 평일 기준 1영업일 내 확인 ...

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" >}}