항목

Cta

연결된 항목을 한눈에 살펴보세요.

shortcode CTA TEST

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 버튼입니다 기본 동작을 확인합니다. ...

8분 읽기

shortcode CTA default

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

1분 읽기

shortcode CTA coverage index

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

12분 읽기

cta-enum-commented

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

1분 읽기

cta-default-only

자세히 보기 {{< 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" >}}

1분 읽기

cta-all-empty

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

1분 읽기

cta shortcode

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

2분 읽기

CTA

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

1분 읽기

13-custom

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

1분 읽기

12-custom_offer

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

1분 읽기

11-copy

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

1분 읽기

10-internal

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

1분 읽기

09-utility

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

1분 읽기

08-price_check

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

1분 읽기

07-utility-inline-xs-muted-left

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

1분 읽기

07-trial

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

1분 읽기

06-newsletter

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

1분 읽기

05-download

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

1분 읽기

04-mixed-markdown

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

1분 읽기

04-fallback-href

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

1분 읽기

04-disabled-state

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

1분 읽기

04-consult

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

1분 읽기

03-related

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

1분 읽기

03-rel-explicit

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

1분 읽기

03-internal-ref

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

1분 읽기

03-heading-and-list

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

1분 읽기

03-all-meta

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

1분 읽기

02-multi-paragraph

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

1분 읽기

02-external-target-blank

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

1분 읽기

02-external

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

1분 읽기

02-bogus-align

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

1분 읽기

02-aria-tracking

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

1분 읽기

01-unknown-kind

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

1분 읽기

01-single-paragraph

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

1분 읽기

01-primary-hero-xl-brand-center

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

1분 읽기

01-href-and-ref

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

1분 읽기

01-default

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

1분 읽기

01-badge-subtitle

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

1분 읽기