[{"content":" NEW요금제 확인가장 많이 쓰는 구성 배지와 subtitle을 함께 쓰는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;요금제 확인\u0026#34; href=\u0026#34;/pricing/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;pricing\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;배지와 subtitle을 함께 쓰는 예시입니다.\u0026#34; subtitle=\u0026#34;가장 많이 쓰는 구성\u0026#34; aria_label=\u0026#34;요금제 확인\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-meta-01\u0026#34; analytics_event=\u0026#34;cta_meta_badge\u0026#34; id=\u0026#34;cta-meta-badge\u0026#34; class=\u0026#34;is-highlighted\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/01-badge-subtitle/","summary":"\u003cdiv id=\"cta-meta-badge\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-highlighted\" data-cta-kind=\"default\" data-cta-intent=\"pricing\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-meta-01\" data-analytics-event=\"cta_meta_badge\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/pricing/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"요금제 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e요금제 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e가장 많이 쓰는 구성\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e배지와 subtitle을 함께 쓰는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;요금제 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/pricing/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;배지와 subtitle을 함께 쓰는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;가장 많이 쓰는 구성\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;요금제 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_badge\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-badge\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-highlighted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-badge-subtitle"},{"content":" BASE기본 CTA자세히 보기 기본 동작을 확인합니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 동작을 확인합니다.\u0026#34; subtitle=\u0026#34;자세히 보기\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-kind-01\u0026#34; analytics_event=\u0026#34;cta_kind_default\u0026#34; id=\u0026#34;cta-kind-default\u0026#34; class=\u0026#34;is-default\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/01-default/","summary":"\u003cdiv id=\"cta-kind-default\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-default\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-01\" data-analytics-event=\"cta_kind_default\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e기본 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;기본 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-default"},{"content":" TEST링크 우선순위 확인우선순위 테스트 href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\n{{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;링크 우선순위 확인\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u0026#34; subtitle=\u0026#34;우선순위 테스트\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;TEST\u0026#34; tracking_id=\u0026#34;cta-routing-01\u0026#34; analytics_event=\u0026#34;cta_route_test\u0026#34; id=\u0026#34;cta-routing-both\u0026#34; class=\u0026#34;is-test\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/01-href-and-ref/","summary":"\u003cdiv id=\"cta-routing-both\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-test\" data-cta-kind=\"related\" data-cta-intent=\"related\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-routing-01\" data-analytics-event=\"cta_route_test\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTEST\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e링크 우선순위 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e우선순위 테스트\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003ehref와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;링크 우선순위 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;href와 ref가 동시에 들어가도 렌더 규칙을 확인할 수 있습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;우선순위 테스트\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TEST\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_route_test\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-both\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-test\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-href-and-ref"},{"content":" TOP핵심 CTA영웅 영역 가장 눈에 띄는 핵심 CTA입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;핵심 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;xl\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;가장 눈에 띄는 핵심 CTA입니다.\u0026#34; subtitle=\u0026#34;영웅 영역\u0026#34; aria_label=\u0026#34;핵심 CTA\u0026#34; badge=\u0026#34;TOP\u0026#34; tracking_id=\u0026#34;cta-visual-01\u0026#34; analytics_event=\u0026#34;cta_visual_top\u0026#34; id=\u0026#34;cta-visual-hero\u0026#34; class=\u0026#34;is-hero\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/01-primary-hero-xl-brand-center/","summary":"\u003cdiv id=\"cta-visual-hero\" class=\"cta cta--kind-default cta--priority-primary cta--surface-hero cta--size-xl cta--tone-brand cta--align-center cta--has-body is-hero\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"xl\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-visual-01\" data-analytics-event=\"cta_visual_top\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"핵심 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTOP\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e핵심 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e영웅 영역\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e가장 눈에 띄는 핵심 CTA입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;핵심 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xl\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;가장 눈에 띄는 핵심 CTA입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;영웅 영역\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;핵심 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TOP\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_top\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-primary-hero-xl-brand-center"},{"content":" INFO상담 신청본문 포함 단일 문단 본문 예시입니다.\n평일 기준 1영업일 내에 회신드립니다. {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;단일 문단 본문 예시입니다.\u0026#34; subtitle=\u0026#34;본문 포함\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;INFO\u0026#34; tracking_id=\u0026#34;cta-body-01\u0026#34; analytics_event=\u0026#34;cta_body_single\u0026#34; id=\u0026#34;cta-body-single\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 평일 기준 1영업일 내에 회신드립니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/01-single-paragraph/","summary":"\u003cdiv id=\"cta-body-single\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-01\" data-analytics-event=\"cta_body_single\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eINFO\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e본문 포함\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e단일 문단 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e평일 기준 1영업일 내에 회신드립니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;단일 문단 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;본문 포함\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;INFO\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_single\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-single\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e평일 기준 1영업일 내에 회신드립니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-single-paragraph"},{"content":" FALLBACK미지의 CTAfallback 알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\n{{\u0026lt; cta kind=\u0026#34;mystery_campaign\u0026#34; label=\u0026#34;미지의 CTA\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u0026#34; subtitle=\u0026#34;fallback\u0026#34; aria_label=\u0026#34;미지의 CTA\u0026#34; badge=\u0026#34;FALLBACK\u0026#34; tracking_id=\u0026#34;cta-fallback-01\u0026#34; analytics_event=\u0026#34;cta_fallback_unknown\u0026#34; id=\u0026#34;cta-fallback-unknown\u0026#34; class=\u0026#34;is-fallback\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/01-unknown-kind/","summary":"\u003cdiv id=\"cta-fallback-unknown\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-fallback\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-fallback-01\" data-analytics-event=\"cta_fallback_unknown\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"미지의 CTA\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eFALLBACK\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e미지의 CTA\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003efallback\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;mystery_campaign\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;미지의 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;알 수 없는 kind가 들어와도 기본 preset으로 폴백합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;fallback\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;미지의 CTA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;FALLBACK\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-01\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_unknown\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-unknown\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-fallback\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"01-unknown-kind"},{"content":" A11Y이벤트 추적접근성 접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;이벤트 추적\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u0026#34; subtitle=\u0026#34;접근성\u0026#34; aria_label=\u0026#34;문서 주소를 복사\u0026#34; badge=\u0026#34;A11Y\u0026#34; tracking_id=\u0026#34;cta-meta-02\u0026#34; analytics_event=\u0026#34;cta_meta_track\u0026#34; id=\u0026#34;cta-meta-aria\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/02-aria-tracking/","summary":"\u003cdiv id=\"cta-meta-aria\" class=\"cta cta--kind-default cta--priority-utility cta--surface-inline cta--size-sm cta--tone-brand cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"sm\" data-cta-tone=\"brand\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-meta-02\" data-analytics-event=\"cta_meta_track\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소를 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eA11Y\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e이벤트 추적\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e접근성\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;이벤트 추적\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;접근성 라벨과 추적 ID를 함께 넣는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;접근성\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소를 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;A11Y\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_track\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-aria\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-aria-tracking"},{"content":" WARN정렬 폴백정렬 검증 잘못된 align 값은 기본 정렬로 처리됩니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;정렬 폴백\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;bogus\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;잘못된 align 값은 기본 정렬로 처리됩니다.\u0026#34; subtitle=\u0026#34;정렬 검증\u0026#34; aria_label=\u0026#34;정렬 폴백\u0026#34; badge=\u0026#34;WARN\u0026#34; tracking_id=\u0026#34;cta-fallback-02\u0026#34; analytics_event=\u0026#34;cta_fallback_align\u0026#34; id=\u0026#34;cta-fallback-align\u0026#34; class=\u0026#34;is-warning\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/02-bogus-align/","summary":"\u003cdiv id=\"cta-fallback-align\" class=\"cta cta--kind-default cta--priority-utility cta--surface-sidebar cta--size-xs cta--tone-warning cta--align-center cta--has-body cta--compact is-warning\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"sidebar\" data-cta-size=\"xs\" data-cta-tone=\"warning\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-fallback-02\" data-analytics-event=\"cta_fallback_align\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"정렬 폴백\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eWARN\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e정렬 폴백\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e정렬 검증\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e잘못된 align 값은 기본 정렬로 처리됩니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;정렬 폴백\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;bogus\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;잘못된 align 값은 기본 정렬로 처리됩니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;정렬 검증\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;정렬 폴백\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;WARN\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_align\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-align\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-bogus-align"},{"content":" OFFICIAL외부 문서 열기공식 문서 새 창에서 외부 문서를 엽니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 링크\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-kind-02\u0026#34; analytics_event=\u0026#34;cta_kind_external\u0026#34; id=\u0026#34;cta-kind-external\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/02-external/","summary":"\u003cdiv id=\"cta-kind-external\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-02\" data-analytics-event=\"cta_kind_external\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"외부 링크\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e외부 문서 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e공식 문서\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e새 창에서 외부 문서를 엽니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;공식 문서\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;외부 링크\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-external"},{"content":" OFFICIAL새 창 안전 열기보안 속성 포함 외부 도메인은 새 창으로 엽니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;새 창 안전 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;외부 도메인은 새 창으로 엽니다.\u0026#34; subtitle=\u0026#34;보안 속성 포함\u0026#34; aria_label=\u0026#34;새 창으로 외부 문서 열기\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-routing-02\u0026#34; analytics_event=\u0026#34;cta_external_open\u0026#34; id=\u0026#34;cta-routing-blank\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/02-external-target-blank/","summary":"\u003cdiv id=\"cta-routing-blank\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-routing-02\" data-analytics-event=\"cta_external_open\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"새 창으로 외부 문서 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e새 창 안전 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e보안 속성 포함\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e외부 도메인은 새 창으로 엽니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;새 창 안전 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;외부 도메인은 새 창으로 엽니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;보안 속성 포함\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;새 창으로 외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_external_open\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-external-target-blank"},{"content":" INFO상담 신청상세 설명 여러 문단 본문 예시입니다.\n첫 번째 문단입니다.\n두 번째 문단입니다.\n{{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;여러 문단 본문 예시입니다.\u0026#34; subtitle=\u0026#34;상세 설명\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;INFO\u0026#34; tracking_id=\u0026#34;cta-body-02\u0026#34; analytics_event=\u0026#34;cta_body_multi\u0026#34; id=\u0026#34;cta-body-multi\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 첫 번째 문단입니다. 두 번째 문단입니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/02-multi-paragraph/","summary":"\u003cdiv id=\"cta-body-multi\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-02\" data-analytics-event=\"cta_body_multi\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eINFO\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e상세 설명\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e여러 문단 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003cp\u003e첫 번째 문단입니다.\u003c/p\u003e\n\u003cp\u003e두 번째 문단입니다.\u003c/p\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;여러 문단 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;상세 설명\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;INFO\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-02\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_multi\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-multi\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e첫 번째 문단입니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e두 번째 문단입니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"02-multi-paragraph"},{"content":" HOT전체 메타부가 제목 메타데이터를 한 번에 확인하는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;전체 메타\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;메타데이터를 한 번에 확인하는 예시입니다.\u0026#34; subtitle=\u0026#34;부가 제목\u0026#34; aria_label=\u0026#34;전체 메타를 확인\u0026#34; badge=\u0026#34;HOT\u0026#34; tracking_id=\u0026#34;cta-meta-03\u0026#34; analytics_event=\u0026#34;cta_meta_all\u0026#34; id=\u0026#34;cta-meta-all\u0026#34; class=\u0026#34;is-promo\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/03-all-meta/","summary":"\u003cdiv id=\"cta-meta-all\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-success cta--align-center cta--has-body is-promo\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-meta-03\" data-analytics-event=\"cta_meta_all\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"전체 메타를 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eHOT\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e전체 메타\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e부가 제목\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e메타데이터를 한 번에 확인하는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;전체 메타\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;메타데이터를 한 번에 확인하는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;부가 제목\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;전체 메타를 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;HOT\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_all\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-all\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-promo\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-all-meta"},{"content":" STEP상담 신청절차 안내 제목과 목록이 섞인 본문 예시입니다.\n확인 순서 접수 검토 회신 {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;제목과 목록이 섞인 본문 예시입니다.\u0026#34; subtitle=\u0026#34;절차 안내\u0026#34; aria_label=\u0026#34;상담 신청\u0026#34; badge=\u0026#34;STEP\u0026#34; tracking_id=\u0026#34;cta-body-03\u0026#34; analytics_event=\u0026#34;cta_body_list\u0026#34; id=\u0026#34;cta-body-list\u0026#34; class=\u0026#34;is-content\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ### 확인 순서 1. 접수 2. 검토 3. 회신 {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/03-heading-and-list/","summary":"\u003cdiv id=\"cta-body-list\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-content\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-03\" data-analytics-event=\"cta_body_list\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"상담 신청\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eSTEP\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e절차 안내\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e제목과 목록이 섞인 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003ch3 id=\"확인-순서\"\u003e확인 순서\u003c/h3\u003e\n\u003col\u003e\n\u003cli\u003e접수\u003c/li\u003e\n\u003cli\u003e검토\u003c/li\u003e\n\u003cli\u003e회신\u003c/li\u003e\n\u003c/ol\u003e\n\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;제목과 목록이 섞인 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;절차 안내\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;STEP\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_list\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-list\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e### 확인 순서\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e1. 접수\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e2. 검토\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e3. 회신\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-heading-and-list"},{"content":" PAGE페이지 참조 이동site.GetPage 경로 ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;internal\u0026#34; label=\u0026#34;페이지 참조 이동\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; intent=\u0026#34;internal\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u0026#34; subtitle=\u0026#34;site.GetPage 경로\u0026#34; aria_label=\u0026#34;내부 페이지로 이동\u0026#34; badge=\u0026#34;PAGE\u0026#34; tracking_id=\u0026#34;cta-routing-03\u0026#34; analytics_event=\u0026#34;cta_internal_route\u0026#34; id=\u0026#34;cta-routing-ref\u0026#34; class=\u0026#34;is-internal\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/03-internal-ref/","summary":"\u003cdiv id=\"cta-routing-ref\" class=\"cta cta--kind-internal cta--priority-secondary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-internal\" data-cta-kind=\"internal\" data-cta-intent=\"internal\" data-cta-priority=\"secondary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-routing-03\" data-analytics-event=\"cta_internal_route\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"내부 페이지로 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePAGE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e페이지 참조 이동\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003esite.GetPage 경로\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003eref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;페이지 참조 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;ref가 실제 페이지 참조일 때의 구성을 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;site.GetPage 경로\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;내부 페이지로 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PAGE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_internal_route\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-ref\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-internal-ref"},{"content":" SAFE안전한 새 창보안 관계 rel을 명시적으로 넣는 예시입니다.\n{{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;안전한 새 창\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;rel을 명시적으로 넣는 예시입니다.\u0026#34; subtitle=\u0026#34;보안 관계\u0026#34; aria_label=\u0026#34;안전한 새 창 열기\u0026#34; badge=\u0026#34;SAFE\u0026#34; tracking_id=\u0026#34;cta-fallback-03\u0026#34; analytics_event=\u0026#34;cta_fallback_rel\u0026#34; id=\u0026#34;cta-fallback-rel\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/05-fallback/03-rel-explicit/","summary":"\u003cdiv id=\"cta-fallback-rel\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body is-external\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-fallback-03\" data-analytics-event=\"cta_fallback_rel\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"안전한 새 창 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eSAFE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e안전한 새 창\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e보안 관계\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003erel을 명시적으로 넣는 예시입니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;안전한 새 창\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;rel을 명시적으로 넣는 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;보안 관계\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;안전한 새 창 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;SAFE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-fallback-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_fallback_rel\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-fallback-rel\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-rel-explicit"},{"content":" RELATED관련 글 더 보기관련 읽을거리 본문과 이어서 읽기 좋습니다.\n추가 설명이 필요한 경우 본문을 여기에 적습니다. {{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;관련 글 더 보기\u0026#34; href=\u0026#34;/blog/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;tertiary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;본문과 이어서 읽기 좋습니다.\u0026#34; subtitle=\u0026#34;관련 읽을거리\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;RELATED\u0026#34; tracking_id=\u0026#34;cta-kind-03\u0026#34; analytics_event=\u0026#34;cta_kind_related\u0026#34; id=\u0026#34;cta-kind-related\u0026#34; class=\u0026#34;is-related\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 추가 설명이 필요한 경우 본문을 여기에 적습니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/03-related/","summary":"\u003cdiv id=\"cta-kind-related\" class=\"cta cta--kind-related cta--priority-tertiary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-related\" data-cta-kind=\"related\" data-cta-intent=\"related\" data-cta-priority=\"tertiary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-03\" data-analytics-event=\"cta_kind_related\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/blog/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eRELATED\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e관련 글 더 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e관련 읽을거리\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e본문과 이어서 읽기 좋습니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e추가 설명이 필요한 경우 본문을 여기에 적습니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;관련 글 더 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;tertiary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;본문과 이어서 읽기 좋습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;관련 읽을거리\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;RELATED\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-03\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e추가 설명이 필요한 경우 본문을 여기에 적습니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"03-related"},{"content":" HOT상담 신청도입 전 문의 평일 기준 1영업일 내 회신\n상담 주제와 희망 일정을 함께 적어 주세요. {{\u0026lt; cta kind=\u0026#34;consult\u0026#34; label=\u0026#34;상담 신청\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;consult\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;success\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;평일 기준 1영업일 내 회신\u0026#34; subtitle=\u0026#34;도입 전 문의\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;HOT\u0026#34; tracking_id=\u0026#34;cta-kind-04\u0026#34; analytics_event=\u0026#34;cta_kind_consult\u0026#34; id=\u0026#34;cta-kind-consult\u0026#34; class=\u0026#34;is-consult\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 상담 주제와 희망 일정을 함께 적어 주세요. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/04-consult/","summary":"\u003cdiv id=\"cta-kind-consult\" class=\"cta cta--kind-consult cta--priority-primary cta--surface-after-content cta--size-md cta--tone-success cta--align-center cta--has-body is-consult\" data-cta-kind=\"consult\" data-cta-intent=\"consult\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"success\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-04\" data-analytics-event=\"cta_kind_consult\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eHOT\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e상담 신청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e도입 전 문의\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e평일 기준 1영업일 내 회신\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e상담 주제와 희망 일정을 함께 적어 주세요.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;상담 신청\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;success\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;평일 기준 1영업일 내 회신\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;도입 전 문의\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;HOT\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-consult\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e상담 주제와 희망 일정을 함께 적어 주세요.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-consult"},{"content":" OFF비활성 상태클릭 불가 disabled 상태의 메타 구성을 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;비활성 상태\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;disabled 상태의 메타 구성을 보여줍니다.\u0026#34; subtitle=\u0026#34;클릭 불가\u0026#34; aria_label=\u0026#34;비활성 상태\u0026#34; badge=\u0026#34;OFF\u0026#34; tracking_id=\u0026#34;cta-meta-04\u0026#34; analytics_event=\u0026#34;cta_meta_disabled\u0026#34; id=\u0026#34;cta-meta-disabled\u0026#34; class=\u0026#34;is-disabled\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;true\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/03-meta/04-disabled-state/","summary":"\u003cdiv id=\"cta-meta-disabled\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-warning cta--align-right cta--has-body cta--disabled is-disabled\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"warning\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"true\" data-cta-compact=\"false\" data-tracking-id=\"cta-meta-04\" data-analytics-event=\"cta_meta_disabled\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003cspan class=\"cta__static\" aria-disabled=\"true\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFF\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e비활성 상태\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e클릭 불가\u003c/span\u003e\u003c/span\u003e\n \u003c/span\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003edisabled 상태의 메타 구성을 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;비활성 상태\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;disabled 상태의 메타 구성을 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;클릭 불가\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;비활성 상태\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFF\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-meta-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_meta_disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-meta-disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-disabled\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;true\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-disabled-state"},{"content":" BASE기본 이동href 중심 기본 이동 경로를 보여줍니다.\n{{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 이동\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;stretch\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 이동 경로를 보여줍니다.\u0026#34; subtitle=\u0026#34;href 중심\u0026#34; aria_label=\u0026#34;기본 이동\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-routing-04\u0026#34; analytics_event=\u0026#34;cta_default_move\u0026#34; id=\u0026#34;cta-routing-href\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/01-routing/04-fallback-href/","summary":"\u003cdiv id=\"cta-routing-href\" class=\"cta cta--kind-default cta--priority-utility cta--surface-sidebar cta--size-xs cta--tone-muted cta--align-stretch cta--has-body cta--compact u-track-cta\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"utility\" data-cta-surface=\"sidebar\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"stretch\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-routing-04\" data-analytics-event=\"cta_default_move\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"기본 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e기본 이동\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003ehref 중심\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 이동 경로를 보여줍니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;기본 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;stretch\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;기본 이동 경로를 보여줍니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;href 중심\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;기본 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-routing-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_default_move\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-routing-href\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-fallback-href"},{"content":" READ다음 글 보기혼합 마크다운 굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\n중요 포인트를 먼저 보고, 자세한 설명으로 넘어가세요. {{\u0026lt; cta kind=\u0026#34;related\u0026#34; label=\u0026#34;다음 글 보기\u0026#34; href=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;related\u0026#34; priority=\u0026#34;tertiary\u0026#34; surface=\u0026#34;in-content\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u0026#34; subtitle=\u0026#34;혼합 마크다운\u0026#34; aria_label=\u0026#34;다음 글 보기\u0026#34; badge=\u0026#34;READ\u0026#34; tracking_id=\u0026#34;cta-body-04\u0026#34; analytics_event=\u0026#34;cta_body_mixed\u0026#34; id=\u0026#34;cta-body-mixed\u0026#34; class=\u0026#34;is-inline-callout\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} **중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/04-body/04-mixed-markdown/","summary":"\u003cdiv id=\"cta-body-mixed\" class=\"cta cta--kind-related cta--priority-tertiary cta--surface-in-content cta--size-sm cta--tone-neutral cta--align-left cta--has-body is-inline-callout\" data-cta-kind=\"related\" data-cta-intent=\"related\" data-cta-priority=\"tertiary\" data-cta-surface=\"in-content\" data-cta-size=\"sm\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-body-04\" data-analytics-event=\"cta_body_mixed\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/70-real-world-posts/medium-post/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"다음 글 보기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eREAD\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다음 글 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e혼합 마크다운\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e\u003cstrong\u003e중요 포인트\u003c/strong\u003e를 먼저 보고, \u003ca href=\"/lab/hugo-content-lab/30-components/\"\u003e자세한 설명\u003c/a\u003e으로 넘어가세요.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;다음 글 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/70-real-world-posts/medium-post/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;related\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;tertiary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;in-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;굵게, 링크, 들여쓰기를 섞은 본문 예시입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;혼합 마크다운\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;다음 글 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;READ\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-body-04\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_body_mixed\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-body-mixed\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-inline-callout\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e**중요 포인트**를 먼저 보고, [자세한 설명](/lab/hugo-content-lab/30-components/)으로 넘어가세요.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"04-mixed-markdown"},{"content":" PDF다운로드 파일을 바로 내려받습니다.\n{{\u0026lt; cta kind=\u0026#34;download\u0026#34; label=\u0026#34;다운로드\u0026#34; href=\u0026#34;/files/checklist.pdf\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;download\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;파일을 바로 내려받습니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;PDF\u0026#34; tracking_id=\u0026#34;cta-kind-05\u0026#34; analytics_event=\u0026#34;cta_kind_download\u0026#34; id=\u0026#34;cta-kind-download\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/05-download/","summary":"\u003cdiv id=\"cta-kind-download\" class=\"cta cta--kind-download cta--priority-utility cta--surface-inline cta--size-xs cta--tone-muted cta--align-left cta--has-body u-track-cta\" data-cta-kind=\"download\" data-cta-intent=\"download\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-05\" data-analytics-event=\"cta_kind_download\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/files/checklist.pdf\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePDF\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다운로드\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e파일을 바로 내려받습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;다운로드\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/files/checklist.pdf\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;파일을 바로 내려받습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PDF\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-05\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-download\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"05-download"},{"content":" NEW뉴스레터 구독매주 한 번 매주 핵심 업데이트를 보냅니다.\n{{\u0026lt; cta kind=\u0026#34;newsletter\u0026#34; label=\u0026#34;뉴스레터 구독\u0026#34; href=\u0026#34;/newsletter/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;subscribe\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;header\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;accent\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;매주 핵심 업데이트를 보냅니다.\u0026#34; subtitle=\u0026#34;매주 한 번\u0026#34; aria_label=\u0026#34;뉴스레터 구독\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-kind-06\u0026#34; analytics_event=\u0026#34;cta_kind_newsletter\u0026#34; id=\u0026#34;cta-kind-newsletter\u0026#34; class=\u0026#34;is-inline\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/06-newsletter/","summary":"\u003cdiv id=\"cta-kind-newsletter\" class=\"cta cta--kind-newsletter cta--priority-primary cta--surface-header cta--size-md cta--tone-accent cta--align-center cta--has-body is-inline\" data-cta-kind=\"newsletter\" data-cta-intent=\"subscribe\" data-cta-priority=\"primary\" data-cta-surface=\"header\" data-cta-size=\"md\" data-cta-tone=\"accent\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-06\" data-analytics-event=\"cta_kind_newsletter\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/newsletter/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"뉴스레터 구독\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e뉴스레터 구독\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e매주 한 번\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e매주 핵심 업데이트를 보냅니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;뉴스레터 구독\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/newsletter/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;subscribe\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;header\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;accent\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;매주 핵심 업데이트를 보냅니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;매주 한 번\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;뉴스레터 구독\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-06\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-newsletter\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"06-newsletter"},{"content":" TRIAL무료 체험 시작14일 무료 신용카드 없이 시작할 수 있습니다.\n{{\u0026lt; cta kind=\u0026#34;trial\u0026#34; label=\u0026#34;무료 체험 시작\u0026#34; href=\u0026#34;/signup/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;trial\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;xl\u0026#34; tone=\u0026#34;accent\u0026#34; align=\u0026#34;right\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;신용카드 없이 시작할 수 있습니다.\u0026#34; subtitle=\u0026#34;14일 무료\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;TRIAL\u0026#34; tracking_id=\u0026#34;cta-kind-07\u0026#34; analytics_event=\u0026#34;cta_kind_trial\u0026#34; id=\u0026#34;cta-kind-trial\u0026#34; class=\u0026#34;is-highlighted\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/07-trial/","summary":"\u003cdiv id=\"cta-kind-trial\" class=\"cta cta--kind-trial cta--priority-primary cta--surface-hero cta--size-xl cta--tone-accent cta--align-right cta--has-body is-highlighted\" data-cta-kind=\"trial\" data-cta-intent=\"trial\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"xl\" data-cta-tone=\"accent\" data-cta-align=\"right\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-07\" data-analytics-event=\"cta_kind_trial\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/signup/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eTRIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e무료 체험 시작\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e14일 무료\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e신용카드 없이 시작할 수 있습니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;무료 체험 시작\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/signup/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xl\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;accent\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;right\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;신용카드 없이 시작할 수 있습니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;14일 무료\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;TRIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-07\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-trial\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-highlighted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"07-trial"},{"content":" COPY복사클립보드 인라인에서 최소 면적으로 동작합니다.\n{{\u0026lt; cta kind=\u0026#34;copy\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;인라인에서 최소 면적으로 동작합니다.\u0026#34; subtitle=\u0026#34;클립보드\u0026#34; aria_label=\u0026#34;문서 주소 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-visual-07\u0026#34; analytics_event=\u0026#34;cta_visual_copy\u0026#34; id=\u0026#34;cta-visual-copy\u0026#34; class=\u0026#34;is-copy\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/02-visual/07-utility-inline-xs-muted-left/","summary":"\u003cdiv id=\"cta-visual-copy\" class=\"cta cta--kind-copy cta--priority-utility cta--surface-inline cta--size-xs cta--tone-muted cta--align-left cta--has-body cta--compact is-copy\" data-cta-kind=\"copy\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"muted\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-visual-07\" data-analytics-event=\"cta_visual_copy\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e클립보드\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e인라인에서 최소 면적으로 동작합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;muted\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;인라인에서 최소 면적으로 동작합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;클립보드\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-visual-07\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_visual_copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-visual-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"07-utility-inline-xs-muted-left"},{"content":" PRICE가격 확인 요금표를 먼저 확인합니다.\n{{\u0026lt; cta kind=\u0026#34;price_check\u0026#34; label=\u0026#34;가격 확인\u0026#34; href=\u0026#34;https://example.com/pricing\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;pricing\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;sidebar\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;warning\u0026#34; align=\u0026#34;stretch\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;요금표를 먼저 확인합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;가격 확인\u0026#34; badge=\u0026#34;PRICE\u0026#34; tracking_id=\u0026#34;cta-kind-08\u0026#34; analytics_event=\u0026#34;cta_kind_price\u0026#34; id=\u0026#34;cta-kind-price\u0026#34; class=\u0026#34;is-price\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/08-price-check/","summary":"\u003cdiv id=\"cta-kind-price\" class=\"cta cta--kind-price_check cta--priority-secondary cta--surface-sidebar cta--size-sm cta--tone-warning cta--align-stretch cta--has-body is-price\" data-cta-kind=\"price_check\" data-cta-intent=\"pricing\" data-cta-priority=\"secondary\" data-cta-surface=\"sidebar\" data-cta-size=\"sm\" data-cta-tone=\"warning\" data-cta-align=\"stretch\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-08\" data-analytics-event=\"cta_kind_price\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/pricing\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"가격 확인\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003ePRICE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e가격 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e요금표를 먼저 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;price_check\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;가격 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;pricing\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;sidebar\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;sm\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;warning\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;stretch\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;요금표를 먼저 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;가격 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;PRICE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-08\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-price\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"08-price_check"},{"content":" COPY복사 클립보드 복사를 유도합니다.\n{{\u0026lt; cta kind=\u0026#34;utility\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;클립보드 복사를 유도합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;문서 주소 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-kind-09\u0026#34; analytics_event=\u0026#34;cta_kind_utility\u0026#34; id=\u0026#34;cta-kind-utility\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/09-utility/","summary":"\u003cdiv id=\"cta-kind-utility\" class=\"cta cta--kind-utility cta--priority-utility cta--surface-inline cta--size-xs cta--tone-neutral cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"utility\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-09\" data-analytics-event=\"cta_kind_utility\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e클립보드 복사를 유도합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;클립보드 복사를 유도합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-09\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"09-utility"},{"content":" NEW구성 살펴보기 같은 사이트 내부 섹션으로 이동합니다.\n{{\u0026lt; cta kind=\u0026#34;internal\u0026#34; label=\u0026#34;구성 살펴보기\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;internal\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;같은 사이트 내부 섹션으로 이동합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;내부 페이지로 이동\u0026#34; badge=\u0026#34;NEW\u0026#34; tracking_id=\u0026#34;cta-kind-10\u0026#34; analytics_event=\u0026#34;cta_kind_internal\u0026#34; id=\u0026#34;cta-kind-internal\u0026#34; class=\u0026#34;is-internal\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/10-internal/","summary":"\u003cdiv id=\"cta-kind-internal\" class=\"cta cta--kind-internal cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-left cta--has-body is-internal\" data-cta-kind=\"internal\" data-cta-intent=\"internal\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-10\" data-analytics-event=\"cta_kind_internal\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"내부 페이지로 이동\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eNEW\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구성 살펴보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e같은 사이트 내부 섹션으로 이동합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;구성 살펴보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;같은 사이트 내부 섹션으로 이동합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;내부 페이지로 이동\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;NEW\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-10\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-internal\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"10-internal"},{"content":" COPY복사 문서 주소를 복사합니다.\n{{\u0026lt; cta kind=\u0026#34;copy\u0026#34; label=\u0026#34;복사\u0026#34; href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;copy\u0026#34; priority=\u0026#34;utility\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;xs\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;left\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;문서 주소를 복사합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;문서 주소를 클립보드로 복사\u0026#34; badge=\u0026#34;COPY\u0026#34; tracking_id=\u0026#34;cta-kind-11\u0026#34; analytics_event=\u0026#34;cta_kind_copy\u0026#34; id=\u0026#34;cta-kind-copy\u0026#34; class=\u0026#34;u-track-cta\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/11-copy/","summary":"\u003cdiv id=\"cta-kind-copy\" class=\"cta cta--kind-copy cta--priority-utility cta--surface-inline cta--size-xs cta--tone-neutral cta--align-left cta--has-body cta--compact u-track-cta\" data-cta-kind=\"copy\" data-cta-intent=\"copy\" data-cta-priority=\"utility\" data-cta-surface=\"inline\" data-cta-size=\"xs\" data-cta-tone=\"neutral\" data-cta-align=\"left\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-kind-11\" data-analytics-event=\"cta_kind_copy\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"문서 주소를 클립보드로 복사\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eCOPY\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e복사\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e문서 주소를 복사합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/lab/hugo-content-lab/30-components/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;utility\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;inline\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;xs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;left\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;문서 주소를 복사합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;문서 주소를 클립보드로 복사\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;COPY\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-11\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-copy\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;u-track-cta\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"11-copy"},{"content":" BETA맞춤 제안 보기 현재는 준비 중입니다.\n맞춤 제안이 준비되면 이 자리에서 안내합니다. {{\u0026lt; cta kind=\u0026#34;custom_offer\u0026#34; label=\u0026#34;맞춤 제안 보기\u0026#34; href=\u0026#34;/offers/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;footer\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;danger\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;현재는 준비 중입니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BETA\u0026#34; tracking_id=\u0026#34;cta-kind-12\u0026#34; analytics_event=\u0026#34;cta_kind_custom_offer\u0026#34; id=\u0026#34;cta-kind-custom-offer\u0026#34; class=\u0026#34;is-offer\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;true\u0026#34; \u0026gt;}} 맞춤 제안이 준비되면 이 자리에서 안내합니다. {{\u0026lt; /cta \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/12-custom-offer/","summary":"\u003cdiv id=\"cta-kind-custom-offer\" class=\"cta cta--kind-custom_offer cta--priority-primary cta--surface-footer cta--size-md cta--tone-danger cta--align-center cta--has-body cta--disabled is-offer\" data-cta-kind=\"custom_offer\" data-cta-intent=\"generic\" data-cta-priority=\"primary\" data-cta-surface=\"footer\" data-cta-size=\"md\" data-cta-tone=\"danger\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"true\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-12\" data-analytics-event=\"cta_kind_custom_offer\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003cspan class=\"cta__static\" aria-disabled=\"true\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBETA\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e맞춤 제안 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/span\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e현재는 준비 중입니다.\u003c/p\u003e\u003cdiv class=\"cta__body\"\u003e맞춤 제안이 준비되면 이 자리에서 안내합니다.\u003c/div\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;custom_offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;맞춤 제안 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/offers/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;footer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;danger\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;현재는 준비 중입니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;BETA\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-12\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_custom_offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-custom-offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-offer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;true\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e맞춤 제안이 준비되면 이 자리에서 안내합니다.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; /cta \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"12-custom_offer"},{"content":" FALLBACK커스텀 폴백 확인 정의되지 않은 kind는 기본 preset으로 폴백합니다.\n{{\u0026lt; cta kind=\u0026#34;custom\u0026#34; label=\u0026#34;커스텀 폴백 확인\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;정의되지 않은 kind는 기본 preset으로 폴백합니다.\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;FALLBACK\u0026#34; tracking_id=\u0026#34;cta-kind-13\u0026#34; analytics_event=\u0026#34;cta_kind_custom\u0026#34; id=\u0026#34;cta-kind-custom\u0026#34; class=\u0026#34;is-custom\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/00-kind/13-custom/","summary":"\u003cdiv id=\"cta-kind-custom\" class=\"cta cta--kind-custom cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body is-custom\" data-cta-kind=\"custom\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"cta-kind-13\" data-analytics-event=\"cta_kind_custom\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eFALLBACK\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e커스텀 폴백 확인\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e정의되지 않은 kind는 기본 preset으로 폴백합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;커스텀 폴백 확인\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;정의되지 않은 kind는 기본 preset으로 폴백합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;FALLBACK\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-kind-13\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_kind_custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-kind-custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-custom\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"13-custom"},{"content":"accordion shortcode accordion는 themes/1/layouts/_shortcodes/readme/custom/accordion.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 질문 첫 번째 답변입니다.\n목록도 넣을 수 있습니다. 두 번째 질문 두 번째 답변입니다. 원형 {{\u0026lt; accordion group=\u0026#34;faq\u0026#34; class=\u0026#34;lab-accordion\u0026#34; \u0026gt;}} {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;첫 번째 질문\u0026#34; open=true icon=\u0026#34;chevron-down\u0026#34; \u0026gt;}} 첫 번째 답변입니다. - 목록도 넣을 수 있습니다. {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;두 번째 질문\u0026#34; \u0026gt;}} 두 번째 답변입니다. {{\u0026lt; /accordionItem \u0026gt;}} {{\u0026lt; /accordion \u0026gt;}} 확인 포인트 accordion과 accordionItem은 같은 group 값으로 묶어야 합니다. title은 따옴표로 감싸서 안전하게 전달합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/accordion/","summary":"\u003ch1 id=\"accordion-shortcode\"\u003eaccordion shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaccordion\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/accordion.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"accordion shortcode"},{"content":"accordionItem shortcode accordionItem는 themes/1/layouts/_shortcodes/readme/custom/accordionItem.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 질문 제목 여기는 답변 본문입니다.\nbody는 Markdown으로 렌더링됩니다. open=true면 처음부터 펼쳐집니다. 원형 {{\u0026lt; accordionItem group=\u0026#34;faq\u0026#34; title=\u0026#34;질문 제목\u0026#34; open=true icon=\u0026#34;chevron-down\u0026#34; id=\u0026#34;faq-item-1\u0026#34; class=\u0026#34;is-lab\u0026#34; \u0026gt;}} 여기는 답변 본문입니다. - body는 Markdown으로 렌더링됩니다. - `open=true`면 처음부터 펼쳐집니다. {{\u0026lt; /accordionItem \u0026gt;}} 확인 포인트 title은 필수에 가깝게 다루는 편이 안전합니다. group과 id는 accordion 컨테이너와 충돌하지 않게 맞춥니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/accordionitem/","summary":"\u003ch1 id=\"accordionitem-shortcode\"\u003eaccordionItem shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaccordionItem\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/accordionItem.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"accordionItem shortcode"},{"content":"alert shortcode alert는 themes/1/layouts/_shortcodes/readme/custom/alert.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 안내 숨기기 이 문장은 안내용 alert 본문입니다. 원형 {{\u0026lt; alert kind=\u0026#34;info\u0026#34; title=\u0026#34;안내\u0026#34; icon=\u0026#34;info\u0026#34; dismissible=true compact=false class=\u0026#34;lab-alert\u0026#34; \u0026gt;}} 이 문장은 안내용 alert 본문입니다. {{\u0026lt; /alert \u0026gt;}} 확인 포인트 kind는 허용값만 사용하는 편이 안전합니다. 본문이 있을 때와 없을 때의 레이아웃 차이를 함께 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/alert/","summary":"\u003ch1 id=\"alert-shortcode\"\u003ealert shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ealert\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/alert.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"alert shortcode"},{"content":"audio shortcode audio는 themes/1/layouts/_shortcodes/readme/custom/audio.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 샘플 오디오샘플 오디오오디오 캡션오디오 파일 다운로드\n원형 {{\u0026lt; audio src=\u0026#34;https://example.com/audio.mp3\u0026#34; type=\u0026#34;audio/mpeg\u0026#34; title=\u0026#34;샘플 오디오\u0026#34; caption=\u0026#34;오디오 캡션\u0026#34; preload=\u0026#34;metadata\u0026#34; autoplay=false loop=false download=true class=\u0026#34;lab-audio\u0026#34; \u0026gt;}} 오디오에 대한 추가 설명입니다. {{\u0026lt; /audio \u0026gt;}} 확인 포인트 src 또는 url 중 하나를 사용합니다. sources를 추가할 때는 url|type 형식의 문자열을 세미콜론으로 구분합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/audio/","summary":"\u003ch1 id=\"audio-shortcode\"\u003eaudio shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eaudio\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/audio.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"audio shortcode"},{"content":"badge shortcode badge는 themes/1/layouts/_shortcodes/readme/custom/badge.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 NEW 원형 {{\u0026lt; badge text=\u0026#34;NEW\u0026#34; tone=\u0026#34;accent\u0026#34; size=\u0026#34;sm\u0026#34; rounded=true href=\u0026#34;/blog/\u0026#34; class=\u0026#34;lab-badge\u0026#34; \u0026gt;}} 확인 포인트 text는 짧게 유지합니다. href와 ref는 같은 호출 안에서 혼용하지 않는 편이 안전합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/badge/","summary":"\u003ch1 id=\"badge-shortcode\"\u003ebadge shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebadge\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/badge.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"badge shortcode"},{"content":"bluesky shortcode bluesky는 themes/1/layouts/_shortcodes/readme/custom/bluesky.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 BlueskyBluesky Bluesky 예시\n원문 보기 원형 {{\u0026lt; bluesky url=\u0026#34;https://bsky.app/profile/example.com/post/3\u0026#34; caption=\u0026#34;Bluesky 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /bluesky \u0026gt;}} 확인 포인트 url가 우선이며 post_id는 보조 입력입니다. 임베드보다 링크 카드 fallback을 우선합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/bluesky/","summary":"\u003ch1 id=\"bluesky-shortcode\"\u003ebluesky shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebluesky\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/bluesky.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"bluesky shortcode"},{"content":"button shortcode button는 themes/1/layouts/_shortcodes/readme/custom/button.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 자세히 보기 원형 {{\u0026lt; button label=\u0026#34;자세히 보기\u0026#34; href=\u0026#34;https://example.com\u0026#34; kind=\u0026#34;primary\u0026#34; size=\u0026#34;md\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; download=false class=\u0026#34;lab-button\u0026#34; \u0026gt;}} 확인 포인트 label이 비어 있으면 body를 대체값으로 사용할 수 있습니다. target=\u0026quot;_blank\u0026quot;에서는 rel 기본값 정책을 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/button/","summary":"\u003ch1 id=\"button-shortcode\"\u003ebutton shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ebutton\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/button.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"button shortcode"},{"content":"card shortcode card는 themes/1/layouts/_shortcodes/readme/custom/card.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 LAB\n카드 제목카드 부제\n카드 본문 설명입니다. 원형 {{\u0026lt; card title=\u0026#34;카드 제목\u0026#34; subtitle=\u0026#34;카드 부제\u0026#34; image=\u0026#34;https://example.com/card.jpg\u0026#34; badge=\u0026#34;LAB\u0026#34; href=\u0026#34;https://example.com\u0026#34; overlay=false style=\u0026#34;surface\u0026#34; class=\u0026#34;lab-card\u0026#34; \u0026gt;}} 카드 본문 설명입니다. {{\u0026lt; /card \u0026gt;}} 확인 포인트 title과 href 조합이 핵심입니다. overlay와 style이 레이아웃에 미치는 영향을 함께 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/card/","summary":"\u003ch1 id=\"card-shortcode\"\u003ecard shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecard\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/card.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"card shortcode"},{"content":"collapse shortcode collapse는 themes/1/layouts/_shortcodes/readme/custom/collapse.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 자세히 보기여기는 접을 수 있는 본문입니다. 원형 {{\u0026lt; collapse summary=\u0026#34;자세히 보기\u0026#34; openByDefault=true class=\u0026#34;lab-collapse\u0026#34; \u0026gt;}} 여기는 접을 수 있는 본문입니다. {{\u0026lt; /collapse \u0026gt;}} 확인 포인트 summary/title/positional 인자 혼용을 피합니다. open과 openByDefault의 우선순위를 함께 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/collapse/","summary":"\u003ch1 id=\"collapse-shortcode\"\u003ecollapse shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecollapse\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/collapse.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"collapse shortcode"},{"content":"column shortcode column는 themes/1/layouts/_shortcodes/readme/custom/column.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 열 내부의 Markdown 본문입니다. 원형 {{\u0026lt; column class=\u0026#34;lab-column\u0026#34; \u0026gt;}} 열 내부의 Markdown 본문입니다. {{\u0026lt; /column \u0026gt;}} 확인 포인트 column은 columns 컨테이너 내부에서 쓰는 편이 안전합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/column/","summary":"\u003ch1 id=\"column-shortcode\"\u003ecolumn shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecolumn\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/column.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"column shortcode"},{"content":"columns shortcode columns는 themes/1/layouts/_shortcodes/readme/custom/columns.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 열입니다. 두 번째 열입니다. 원형 {{\u0026lt; columns count=\u0026#34;2\u0026#34; gap=\u0026#34;md\u0026#34; align=\u0026#34;stretch\u0026#34; stack_on=\u0026#34;md\u0026#34; class=\u0026#34;lab-columns\u0026#34; \u0026gt;}} {{\u0026lt; column \u0026gt;}} 첫 번째 열입니다. {{\u0026lt; /column \u0026gt;}} {{\u0026lt; column \u0026gt;}} 두 번째 열입니다. {{\u0026lt; /column \u0026gt;}} {{\u0026lt; /columns \u0026gt;}} 확인 포인트 count는 2~4 사이가 안전합니다. column과 함께 써서 구조를 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/columns/","summary":"\u003ch1 id=\"columns-shortcode\"\u003ecolumns shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecolumns\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/columns.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"columns shortcode"},{"content":"cta 테스트 목적 CTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.\n확인 항목 행동 문구가 짧고 분명한가 보조 설명이 있더라도 주 행동을 가리지 않는가 외부 링크와 내부 링크가 구분되는가 예시 구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n구조 검토 요청 평일 기준 1영업일 내 확인\n업그레이드 요약 보기 실패 기준 CTA가 본문보다 시선을 더 크게 빼앗는 경우 긴 노트가 레이아웃을 무너뜨리는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/cta/","summary":"\u003ch1 id=\"cta\"\u003ecta\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eCTA는 사용자가 다음 행동을 선택하는 지점입니다. 너무 약하면 눈에 띄지 않고, 너무 강하면 본문을 압도합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e행동 문구가 짧고 분명한가\u003c/li\u003e\n\u003cli\u003e보조 설명이 있더라도 주 행동을 가리지 않는가\u003c/li\u003e\n\u003cli\u003e외부 링크와 내부 링크가 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cp\u003e\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구조 검토 요청\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e평일 기준 1영업일 내 확인\u003c/p\u003e","title":"CTA"},{"content":"cta shortcode cta는 themes/1/layouts/_shortcodes/readme/custom/cta.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 BASE기본 CTA자세히 보기 기본 동작을 확인합니다.\n기본 CTA의 본문 보조 설명입니다. OFFICIAL외부 문서 열기공식 문서 새 창에서 외부 문서를 엽니다.\n새 창 열기와 rel 기본값을 함께 확인합니다. 폴백 CTA 알 수 없는 kind 가 들어와도 안전하게 기본 동작으로 내려갑니다. 원형 {{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;기본 CTA\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;기본 동작을 확인합니다.\u0026#34; subtitle=\u0026#34;자세히 보기\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;BASE\u0026#34; tracking_id=\u0026#34;cta-kind-01\u0026#34; analytics_event=\u0026#34;cta_kind_default\u0026#34; id=\u0026#34;cta-kind-default\u0026#34; class=\u0026#34;is-default\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 기본 CTA의 본문 보조 설명입니다. {{\u0026lt; /cta \u0026gt;}} {{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;새 창에서 외부 문서를 엽니다.\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 링크\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-kind-02\u0026#34; analytics_event=\u0026#34;cta_kind_external\u0026#34; id=\u0026#34;cta-kind-external\u0026#34; class=\u0026#34;is-external\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} 새 창 열기와 rel 기본값을 함께 확인합니다. {{\u0026lt; /cta \u0026gt;}} {{\u0026lt; cta kind=\u0026#34;unknown-kind\u0026#34; label=\u0026#34;폴백 CTA\u0026#34; href=\u0026#34;https://example.com/fallback\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;inline\u0026#34; size=\u0026#34;sm\u0026#34; tone=\u0026#34;muted\u0026#34; align=\u0026#34;left\u0026#34; compact=true disabled=false \u0026gt;}} 알 수 없는 kind 가 들어와도 안전하게 기본 동작으로 내려갑니다. {{\u0026lt; /cta \u0026gt;}} 확인 포인트 cta는 우선순위와 폴백이 많아서 가장 먼저, 가장 보수적으로 확인합니다. href/ref는 같은 호출에서 둘 다 넣어도 우선순위가 문서와 코드에서 일치해야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/cta/","summary":"\u003ch1 id=\"cta-shortcode\"\u003ecta shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ecta\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/cta.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"cta shortcode"},{"content":" {{\u0026lt; cta kind=\u0026#34;\u0026#34; label=\u0026#34;\u0026#34; href=\u0026#34;\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;\u0026#34; priority=\u0026#34;\u0026#34; surface=\u0026#34;\u0026#34; size=\u0026#34;\u0026#34; tone=\u0026#34;\u0026#34; align=\u0026#34;\u0026#34; target=\u0026#34;\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;\u0026#34; tracking_id=\u0026#34;\u0026#34; analytics_event=\u0026#34;\u0026#34; id=\u0026#34;\u0026#34; class=\u0026#34;\u0026#34; compact=\u0026#34;\u0026#34; disabled=\u0026#34;\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/01-empty-values/cta-all-empty/","summary":"\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"%3cnil%3e\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-all-empty"},{"content":" 자세히 보기 {{\u0026lt; cta kind=\u0026#34;default\u0026#34; label=\u0026#34;자세히 보기\u0026#34; href=\u0026#34;/contact/\u0026#34; ref=\u0026#34;\u0026#34; intent=\u0026#34;generic\u0026#34; priority=\u0026#34;secondary\u0026#34; surface=\u0026#34;after-content\u0026#34; size=\u0026#34;md\u0026#34; tone=\u0026#34;neutral\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_self\u0026#34; rel=\u0026#34;\u0026#34; note=\u0026#34;\u0026#34; subtitle=\u0026#34;\u0026#34; aria_label=\u0026#34;\u0026#34; badge=\u0026#34;\u0026#34; tracking_id=\u0026#34;\u0026#34; analytics_event=\u0026#34;\u0026#34; id=\u0026#34;\u0026#34; class=\u0026#34;\u0026#34; compact=\u0026#34;false\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/02-default-values/cta-default-only/","summary":"\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"generic\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/contact/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e자세히 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;/contact/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;generic\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;secondary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;false\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-default-only"},{"content":" OFFICIAL외부 문서 열기공식 문서 새 창에서 열립니다\n\u0026lt;!-- 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 --\u0026gt; {{\u0026lt; cta kind=\u0026#34;external\u0026#34; label=\u0026#34;외부 문서 열기\u0026#34; href=\u0026#34;https://example.com/docs\u0026#34; ref=\u0026#34;/blog/\u0026#34; intent=\u0026#34;external\u0026#34; priority=\u0026#34;primary\u0026#34; surface=\u0026#34;hero\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;brand\u0026#34; align=\u0026#34;center\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; note=\u0026#34;새 창에서 열립니다\u0026#34; subtitle=\u0026#34;공식 문서\u0026#34; aria_label=\u0026#34;외부 문서 열기\u0026#34; badge=\u0026#34;OFFICIAL\u0026#34; tracking_id=\u0026#34;cta-docs-hero\u0026#34; analytics_event=\u0026#34;cta_docs_open\u0026#34; id=\u0026#34;cta-docs-hero\u0026#34; class=\u0026#34;is-promo\u0026#34; compact=\u0026#34;true\u0026#34; disabled=\u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/03-enum-comments/cta-enum-commented/","summary":"\u003cdiv id=\"cta-docs-hero\" class=\"cta cta--kind-external cta--priority-primary cta--surface-hero cta--size-lg cta--tone-brand cta--align-center cta--has-body cta--compact is-promo\" data-cta-kind=\"external\" data-cta-intent=\"external\" data-cta-priority=\"primary\" data-cta-surface=\"hero\" data-cta-size=\"lg\" data-cta-tone=\"brand\" data-cta-align=\"center\" data-cta-target=\"_blank\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"true\" data-tracking-id=\"cta-docs-hero\" data-analytics-event=\"cta_docs_open\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/docs\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"외부 문서 열기\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eOFFICIAL\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e외부 문서 열기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e공식 문서\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e새 창에서 열립니다\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\u0026lt;!--\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eCTA shortcode keys (known preset / enum-like values)\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ekind (known presets used in this pack):\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003edefault | external | related | consult | download | newsletter | trial | price_check | utility | custom | copy | internal | custom_offer\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eunknown kind examples fall back to default behavior.\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003epriority:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eprimary | secondary | tertiary | utility\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esurface:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003einline | hero | in-content | after-content | footer | sidebar | header\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003esize:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003exs | sm | md | lg | xl\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003etone:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ebrand | accent | neutral | muted | success | warning | danger\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003ealign:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003eleft | center | right | stretch\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003etarget:\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e_self | _blank\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e--\u0026gt;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href=\u0026#34;https://example.com/docs\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e ref=\u0026#34;/blog/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e intent=\u0026#34;external\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority=\u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface=\u0026#34;hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size=\u0026#34;lg\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone=\u0026#34;brand\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align=\u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target=\u0026#34;_blank\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel=\u0026#34;noopener noreferrer\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note=\u0026#34;새 창에서 열립니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle=\u0026#34;공식 문서\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label=\u0026#34;외부 문서 열기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge=\u0026#34;OFFICIAL\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id=\u0026#34;cta-docs-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event=\u0026#34;cta_docs_open\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id=\u0026#34;cta-docs-hero\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class=\u0026#34;is-promo\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e compact=\u0026#34;true\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled=\u0026#34;false\u0026#34; \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e","title":"cta-enum-commented"},{"content":"design-probe shortcode design-probe는 themes/1/layouts/_shortcodes/readme/custom/design-probe.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 design-probe 이 shortcode는 중앙 디자인 토큰의 연결 상태를 점검하기 위한 진단용 출력이다. 기준 데이터는 themes/1/data/00-system/design/ 아래에 있다. 중앙 소스 themes/1/data/00-system/design/ 색상, 간격, 타이포, 상태값은 이 계층을 기준으로 읽어야 한다. 해석 기준 • 토큰은 하드코딩 대신 CSS custom property 경유로 확인한다. • layout은 진단용 메시지만 제공하고, 정책 계산은 여기서 하지 않는다. • 운영 UI로 쓰지 않고, 디자인/구조 검증 시에만 사용한다. 추가 메모 토큰 연결 상태를 확인하는 진단 메모입니다. 원형 {{\u0026lt; design-probe \u0026gt;}} 토큰 연결 상태를 확인하는 진단 메모입니다. {{\u0026lt; /design-probe \u0026gt;}} 확인 포인트 운영 콘텐츠가 아니라 점검용 문서로만 사용합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/design-probe/","summary":"\u003ch1 id=\"design-probe-shortcode\"\u003edesign-probe shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edesign-probe\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/design-probe.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"design-probe shortcode"},{"content":"details shortcode details는 HTML의 \u0026lt;details\u0026gt; / \u0026lt;summary\u0026gt; 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\n공식 문서 기준으로 summary, open, class, name, title 인자를 받을 수 있습니다. summary는 접혀 있을 때 보이는 제목이고, open은 처음부터 펼칠지 여부를 정합니다. class는 스타일링을 위한 훅이고, name과 title은 브라우저와 접근성 도구에서 추가 의미를 줄 때 유용합니다. citeturn123799view0\n렌더링 결과 세부 설명 보기 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다.\n복잡한 설정을 단계별로 설명할 때 좋습니다. 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. FAQ, 용어 설명, 실험 메모와 잘 어울립니다. 원형 {{\u0026lt; details summary=\u0026#34;세부 설명 보기\u0026#34; open=true class=\u0026#34;lab-details\u0026#34; name=\u0026#34;details-lab\u0026#34; title=\u0026#34;Hugo details shortcode 예시\u0026#34; \u0026gt;}} 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다. - 복잡한 설정을 단계별로 설명할 때 좋습니다. - 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. \u0026lt;!-- 이 주석은 예제 원형에만 들어가고, 실제 렌더링된 HTML에서는 보이지 않습니다. --\u0026gt; {{\u0026lt; /details \u0026gt;}} 해석 포인트 summary는 사실상 버튼 역할을 합니다. open=true를 주면 독자가 클릭하지 않아도 내용을 확인할 수 있습니다. class를 분리해 두면 테마 전역 스타일과 구분하기 쉽습니다. 내부 본문은 일반 Markdown으로 써도 되므로, 문단과 목록을 자연스럽게 섞을 수 있습니다. 추천 사용처 실험 결과를 접어 두고 싶을 때 API 옵션 설명을 부연하고 싶을 때 본문을 가볍게 유지하면서 추가 정보를 제공하고 싶을 때 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/details/","summary":"\u003ch1 id=\"details-shortcode\"\u003edetails shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edetails\u003c/code\u003e는 HTML의 \u003ccode\u003e\u0026lt;details\u0026gt;\u003c/code\u003e / \u003ccode\u003e\u0026lt;summary\u0026gt;\u003c/code\u003e 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\u003c/p\u003e","title":"details shortcode"},{"content":"details shortcode details는 HTML의 \u0026lt;details\u0026gt; / \u0026lt;summary\u0026gt; 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\n공식 문서 기준으로 summary, open, class, name, title 인자를 받을 수 있습니다. summary는 접혀 있을 때 보이는 제목이고, open은 처음부터 펼칠지 여부를 정합니다. class는 스타일링을 위한 훅이고, name과 title은 브라우저와 접근성 도구에서 추가 의미를 줄 때 유용합니다. citeturn123799view0\n렌더링 결과 세부 설명 보기 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다.\n복잡한 설정을 단계별로 설명할 때 좋습니다. 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. FAQ, 용어 설명, 실험 메모와 잘 어울립니다. 원형 {{\u0026lt; details summary=\u0026#34;세부 설명 보기\u0026#34; open=true class=\u0026#34;lab-details\u0026#34; name=\u0026#34;details-lab\u0026#34; title=\u0026#34;Hugo details shortcode 예시\u0026#34; \u0026gt;}} 이 안의 내용은 처음부터 펼쳐진 상태로 보입니다. - 복잡한 설정을 단계별로 설명할 때 좋습니다. - 긴 보조 설명을 본문 흐름에서 분리할 수 있습니다. \u0026lt;!-- 이 주석은 예제 원형에만 들어가고, 실제 렌더링된 HTML에서는 보이지 않습니다. --\u0026gt; {{\u0026lt; /details \u0026gt;}} 해석 포인트 summary는 사실상 버튼 역할을 합니다. open=true를 주면 독자가 클릭하지 않아도 내용을 확인할 수 있습니다. class를 분리해 두면 테마 전역 스타일과 구분하기 쉽습니다. 내부 본문은 일반 Markdown으로 써도 되므로, 문단과 목록을 자연스럽게 섞을 수 있습니다. 추천 사용처 실험 결과를 접어 두고 싶을 때 API 옵션 설명을 부연하고 싶을 때 본문을 가볍게 유지하면서 추가 정보를 제공하고 싶을 때 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/details/","summary":"\u003ch1 id=\"details-shortcode\"\u003edetails shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003edetails\u003c/code\u003e는 HTML의 \u003ccode\u003e\u0026lt;details\u0026gt;\u003c/code\u003e / \u003ccode\u003e\u0026lt;summary\u0026gt;\u003c/code\u003e 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다.\u003c/p\u003e","title":"details shortcode"},{"content":"facebook shortcode facebook는 themes/1/layouts/_shortcodes/readme/custom/facebook.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 FacebookFacebook Facebook 예시\n원문 보기 원형 {{\u0026lt; facebook url=\u0026#34;https://www.facebook.com/example/posts/1\u0026#34; caption=\u0026#34;Facebook 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /facebook \u0026gt;}} 확인 포인트 원문 링크가 최종 fallback입니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/facebook/","summary":"\u003ch1 id=\"facebook-shortcode\"\u003efacebook shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efacebook\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/facebook.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"facebook shortcode"},{"content":"figure shortcode figure는 \u0026lt;figure\u0026gt;, \u0026lt;img\u0026gt;, \u0026lt;figcaption\u0026gt; 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\n공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\n렌더링 결과 샘플 figurelocal page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive\n원형 {{\u0026lt; figure src=\u0026#34;figure-sample.svg\u0026#34; alt=\u0026#34;Hugo figure shortcode를 위한 샘플 SVG\u0026#34; link=\u0026#34;https://gohugo.io/shortcodes/figure/\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; title=\u0026#34;샘플 figure\u0026#34; caption=\u0026#34;local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다.\u0026#34; attr=\u0026#34;Hugo shortcode archive\u0026#34; attrlink=\u0026#34;https://gohugo.io/content-management/shortcodes/\u0026#34; class=\u0026#34;figure-lab\u0026#34; loading=\u0026#34;lazy\u0026#34; \u0026gt;}} 해석 포인트 src는 가능한 한 페이지 리소스나 전역 리소스로 두는 편이 관리가 쉽습니다. link를 주면 이미지를 클릭해서 관련 문서로 이동시킬 수 있습니다. title은 캡션 위쪽, caption은 아래쪽에 놓는 식으로 정보 위계를 나눌 수 있습니다. attr과 attrlink는 출처를 명시할 때 좋습니다. 이 페이지가 일부러 local resource를 쓰는 이유 이 예제는 외부 이미지 서비스에 기대지 않기 위해 같은 bundle 안의 figure-sample.svg를 사용합니다.\n그래서 저장소만 있으면 렌더링 결과를 재현하기 쉽습니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/figure/","summary":"\u003ch1 id=\"figure-shortcode\"\u003efigure shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efigure\u003c/code\u003e는 \u003ccode\u003e\u0026lt;figure\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;figcaption\u0026gt;\u003c/code\u003e 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\u003cbr\u003e\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\u003c/p\u003e\n\u003cp\u003e공식 문서 기준으로 \u003ccode\u003esrc\u003c/code\u003e, \u003ccode\u003ealt\u003c/code\u003e, \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003eloading\u003c/code\u003e, \u003ccode\u003eclass\u003c/code\u003e, \u003ccode\u003elink\u003c/code\u003e, \u003ccode\u003etarget\u003c/code\u003e, \u003ccode\u003erel\u003c/code\u003e, \u003ccode\u003etitle\u003c/code\u003e, \u003ccode\u003ecaption\u003c/code\u003e, \u003ccode\u003eattr\u003c/code\u003e, \u003ccode\u003eattrlink\u003c/code\u003e를 사용할 수 있습니다. \u003ccode\u003esrc\u003c/code\u003e는 이미지 경로, \u003ccode\u003ecaption\u003c/code\u003e은 설명, \u003ccode\u003eattr\u003c/code\u003e과 \u003ccode\u003eattrlink\u003c/code\u003e는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\u003c/p\u003e","title":"figure shortcode"},{"content":"figure shortcode figure는 \u0026lt;figure\u0026gt;, \u0026lt;img\u0026gt;, \u0026lt;figcaption\u0026gt; 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\n공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\n렌더링 결과 샘플 figurelocal page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive\n샘플 figurelocal page resource를 사용해 외부 의존성을 없앤 figure 예시입니다. Hugo shortcode archive\n원형 {{\u0026lt; figure src=\u0026#34;figure-sample.svg\u0026#34; alt=\u0026#34;Hugo figure shortcode를 위한 샘플 SVG\u0026#34; link=\u0026#34;https://gohugo.io/shortcodes/figure/\u0026#34; target=\u0026#34;_blank\u0026#34; rel=\u0026#34;noopener noreferrer\u0026#34; title=\u0026#34;샘플 figure\u0026#34; caption=\u0026#34;local page resource를 사용해 외부 의존성을 없앤 figure 예시입니다.\u0026#34; attr=\u0026#34;Hugo shortcode archive\u0026#34; attrlink=\u0026#34;https://gohugo.io/content-management/shortcodes/\u0026#34; class=\u0026#34;figure-lab\u0026#34; loading=\u0026#34;lazy\u0026#34; \u0026gt;}} 해석 포인트 src는 가능한 한 페이지 리소스나 전역 리소스로 두는 편이 관리가 쉽습니다. link를 주면 이미지를 클릭해서 관련 문서로 이동시킬 수 있습니다. title은 캡션 위쪽, caption은 아래쪽에 놓는 식으로 정보 위계를 나눌 수 있습니다. attr과 attrlink는 출처를 명시할 때 좋습니다. 이 페이지가 일부러 local resource를 쓰는 이유 이 예제는 외부 이미지 서비스에 기대지 않기 위해 같은 bundle 안의 figure-sample.svg를 사용합니다.\n그래서 저장소만 있으면 렌더링 결과를 재현하기 쉽습니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/figure/","summary":"\u003ch1 id=\"figure-shortcode\"\u003efigure shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003efigure\u003c/code\u003e는 \u003ccode\u003e\u0026lt;figure\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;img\u0026gt;\u003c/code\u003e, \u003ccode\u003e\u0026lt;figcaption\u0026gt;\u003c/code\u003e 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다.\u003cbr\u003e\n이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다.\u003c/p\u003e\n\u003cp\u003e공식 문서 기준으로 \u003ccode\u003esrc\u003c/code\u003e, \u003ccode\u003ealt\u003c/code\u003e, \u003ccode\u003ewidth\u003c/code\u003e, \u003ccode\u003eheight\u003c/code\u003e, \u003ccode\u003eloading\u003c/code\u003e, \u003ccode\u003eclass\u003c/code\u003e, \u003ccode\u003elink\u003c/code\u003e, \u003ccode\u003etarget\u003c/code\u003e, \u003ccode\u003erel\u003c/code\u003e, \u003ccode\u003etitle\u003c/code\u003e, \u003ccode\u003ecaption\u003c/code\u003e, \u003ccode\u003eattr\u003c/code\u003e, \u003ccode\u003eattrlink\u003c/code\u003e를 사용할 수 있습니다. \u003ccode\u003esrc\u003c/code\u003e는 이미지 경로, \u003ccode\u003ecaption\u003c/code\u003e은 설명, \u003ccode\u003eattr\u003c/code\u003e과 \u003ccode\u003eattrlink\u003c/code\u003e는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1\u003c/p\u003e","title":"figure shortcode"},{"content":"gallery shortcode gallery는 themes/1/layouts/_shortcodes/readme/custom/gallery.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫째 캡션둘째 캡션 원형 {{\u0026lt; gallery columns=\u0026#34;2\u0026#34; gap=\u0026#34;sm\u0026#34; lightbox=true caption_mode=\u0026#34;figcaption\u0026#34; ratio=\u0026#34;4/3\u0026#34; class=\u0026#34;lab-gallery\u0026#34; images=\u0026#34;https://example.com/a.jpg|첫째|첫째 캡션|4/3|https://example.com/a.jpg|첫째 제목;https://example.com/b.jpg|둘째|둘째 캡션|1/1|https://example.com/b.jpg|둘째 제목\u0026#34; \u0026gt;}} 확인 포인트 images 문자열은 src|alt|caption|ratio|href|title 조합을 세미콜론으로 구분합니다. body 입력도 가능하지만, 문자열 입력과 혼용하지 않는 편이 읽기 쉽습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/gallery/","summary":"\u003ch1 id=\"gallery-shortcode\"\u003egallery shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003egallery\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/gallery.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"gallery shortcode"},{"content":"gist shortcode gist는 themes/1/layouts/_shortcodes/readme/custom/gist.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 GitHub GistGist 예시example.go 코드 스니펫은 원문 링크를 통해 확인한다. 정책상 임베드가 막히는 환경에서는 이 링크가 기본 경로다.\n원문 열기 Raw 링크 원형 {{\u0026lt; gist user=\u0026#34;octocat\u0026#34; id=\u0026#34;123456\u0026#34; file=\u0026#34;example.go\u0026#34; title=\u0026#34;Gist 예시\u0026#34; hide_footer=false hide_line_numbers=false class=\u0026#34;lab-gist\u0026#34; \u0026gt;}} 확인 포인트 네트워크 의존이 있으면 fallback 카드가 더 안전할 수 있습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/gist/","summary":"\u003ch1 id=\"gist-shortcode\"\u003egist shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003egist\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/gist.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"gist shortcode"},{"content":"highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\n공식 문서 기준으로 highlight는 LANG, OPTIONS, CODE의 세 가지 요소를 사용합니다. OPTIONS는 문자열로 넘기는 옵션 묶음이며, 줄 번호, 테마, 강조 라인 같은 디테일을 세밀하게 조절할 수 있습니다. citeturn791175view0turn241043view5\n렌더링 결과: 블록형 1package main 2 3import \u0026#34;fmt\u0026#34; 4 5func main() { 6 for i := 0; i \u0026lt; 3; i++ { 7 fmt.Println(\u0026#34;Value of i:\u0026#34;, i) 8 } 9} 원형: 블록형 {{\u0026lt; highlight go \u0026#34;linenos=inline, hl_lines=3 6-8, style=emacs\u0026#34; \u0026gt;}} package main import \u0026#34;fmt\u0026#34; func main() { for i := 0; i \u0026lt; 3; i++ { fmt.Println(\u0026#34;Value of i:\u0026#34;, i) } } {{\u0026lt; /highlight \u0026gt;}} 렌더링 결과: 인라인형 이 문장은 인라인 하이라이트 예시입니다. fmt.Println(\u0026#34;inline\u0026#34;) 를 보면 코드 조각이 본문 안에서 따로 강조됩니다.\n원형: 인라인형 이 문장은 인라인 하이라이트 예시입니다. {{\u0026lt; highlight go \u0026#34;hl_inline=true\u0026#34; \u0026gt;}}fmt.Println(\u0026#34;inline\u0026#34;){{\u0026lt; /highlight \u0026gt;}} 를 보면 코드 조각이 본문 안에서 따로 강조됩니다. 옵션 해석 linenos=inline은 줄 번호를 코드 옆에 붙입니다. hl_lines=3 6-8은 특정 줄을 강조합니다. style=emacs는 하이라이트 테마를 정합니다. hl_inline=true는 블록이 아니라 본문 흐름 안에서 코드 조각만 강조합니다. 실무 팁 코드 블록은 대부분의 Markdown 렌더러에서 기본 지원되므로, highlight는 보조 수단으로 생각하는 편이 좋습니다. 인라인 코드가 자주 등장하는 문서라면 highlight 전용 짧은 래퍼 shortcode를 하나 더 만드는 것도 좋습니다. 긴 예제일수록 하이라이트 옵션을 코드 바로 위에 모아두면 읽기 쉽습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/highlight/","summary":"\u003ch1 id=\"highlight-shortcode\"\u003ehighlight shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ehighlight\u003c/code\u003e는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\u003cbr\u003e\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\u003c/p\u003e","title":"highlight shortcode"},{"content":"highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\n공식 문서 기준으로 highlight는 LANG, OPTIONS, CODE의 세 가지 요소를 사용합니다. OPTIONS는 문자열로 넘기는 옵션 묶음이며, 줄 번호, 테마, 강조 라인 같은 디테일을 세밀하게 조절할 수 있습니다. citeturn791175view0turn241043view5\n렌더링 결과: 블록형 1package main 2 3import \u0026#34;fmt\u0026#34; 4 5func main() { 6 for i := 0; i \u0026lt; 3; i++ { 7 fmt.Println(\u0026#34;Value of i:\u0026#34;, i) 8 } 9} 원형: 블록형 {{\u0026lt; highlight go \u0026#34;linenos=inline, hl_lines=3 6-8, style=emacs\u0026#34; \u0026gt;}} package main import \u0026#34;fmt\u0026#34; func main() { for i := 0; i \u0026lt; 3; i++ { fmt.Println(\u0026#34;Value of i:\u0026#34;, i) } } {{\u0026lt; /highlight \u0026gt;}} 렌더링 결과: 인라인형 이 문장은 인라인 하이라이트 예시입니다. fmt.Println(\u0026#34;inline\u0026#34;) 를 보면 코드 조각이 본문 안에서 따로 강조됩니다.\n원형: 인라인형 이 문장은 인라인 하이라이트 예시입니다. {{\u0026lt; highlight go \u0026#34;hl_inline=true\u0026#34; \u0026gt;}}fmt.Println(\u0026#34;inline\u0026#34;){{\u0026lt; /highlight \u0026gt;}} 를 보면 코드 조각이 본문 안에서 따로 강조됩니다. 옵션 해석 linenos=inline은 줄 번호를 코드 옆에 붙입니다. hl_lines=3 6-8은 특정 줄을 강조합니다. style=emacs는 하이라이트 테마를 정합니다. hl_inline=true는 블록이 아니라 본문 흐름 안에서 코드 조각만 강조합니다. 실무 팁 코드 블록은 대부분의 Markdown 렌더러에서 기본 지원되므로, highlight는 보조 수단으로 생각하는 편이 좋습니다. 인라인 코드가 자주 등장하는 문서라면 highlight 전용 짧은 래퍼 shortcode를 하나 더 만드는 것도 좋습니다. 긴 예제일수록 하이라이트 옵션을 코드 바로 위에 모아두면 읽기 쉽습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/highlight/","summary":"\u003ch1 id=\"highlight-shortcode\"\u003ehighlight shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ehighlight\u003c/code\u003e는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다.\u003cbr\u003e\nMarkdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다.\u003c/p\u003e","title":"highlight shortcode"},{"content":"icon shortcode icon는 themes/1/layouts/_shortcodes/readme/custom/icon.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원형 {{\u0026lt; icon name=\u0026#34;check\u0026#34; size=\u0026#34;sm\u0026#34; label=\u0026#34;체크 아이콘\u0026#34; decorative=true class=\u0026#34;lab-icon\u0026#34; \u0026gt;}} 확인 포인트 name과 src 중 하나를 선택합니다. 장식용일 때는 decorative=true를 함께 둡니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/icon/","summary":"\u003ch1 id=\"icon-shortcode\"\u003eicon shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eicon\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/icon.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"icon shortcode"},{"content":"instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\n공식 문서 예제 기준으로 게시물 ID 하나를 positional argument로 넘깁니다. 또한 privacy 설정에서 privacy.instagram.disable과 privacy.instagram.simple을 확인할 수 있습니다. citeturn534114view1\n렌더링 결과 View this post on Instagram 원형 {{\u0026lt; instagram CxOWiQNP2MO \u0026gt;}} 해석 포인트 입력은 보통 Instagram URL 전체가 아니라 게시물 ID입니다. 사이트의 privacy 설정에 따라 실제 임베드 방식이 달라질 수 있습니다. 외부 서비스가 막혀 있으면 iframe 대신 다른 형태로 보이거나, 로컬 빌드에서는 다르게 보일 수 있습니다. 실무 문서에서는 본문보다 보조 자료, 참고 링크, 사례 모음에 넣는 편이 깔끔합니다. 주의할 점 이 shortcode는 외부 서비스와 연결되므로, 회사 문서나 장기 보존 문서에서는 대체 이미지나 캡션형 설명도 함께 두는 것이 안전합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/instagram/","summary":"\u003ch1 id=\"instagram-shortcode\"\u003einstagram shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einstagram\u003c/code\u003e은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\u003cbr\u003e\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\u003c/p\u003e","title":"instagram shortcode"},{"content":"instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\n공식 문서 예제 기준으로 게시물 ID 하나를 positional argument로 넘깁니다. 또한 privacy 설정에서 privacy.instagram.disable과 privacy.instagram.simple을 확인할 수 있습니다. citeturn534114view1\n렌더링 결과 View this post on Instagram 원형 {{\u0026lt; instagram CxOWiQNP2MO \u0026gt;}} 해석 포인트 입력은 보통 Instagram URL 전체가 아니라 게시물 ID입니다. 사이트의 privacy 설정에 따라 실제 임베드 방식이 달라질 수 있습니다. 외부 서비스가 막혀 있으면 iframe 대신 다른 형태로 보이거나, 로컬 빌드에서는 다르게 보일 수 있습니다. 실무 문서에서는 본문보다 보조 자료, 참고 링크, 사례 모음에 넣는 편이 깔끔합니다. 주의할 점 이 shortcode는 외부 서비스와 연결되므로, 회사 문서나 장기 보존 문서에서는 대체 이미지나 캡션형 설명도 함께 두는 것이 안전합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/instagram/","summary":"\u003ch1 id=\"instagram-shortcode\"\u003einstagram shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einstagram\u003c/code\u003e은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다.\u003cbr\u003e\n정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다.\u003c/p\u003e","title":"instagram shortcode"},{"content":"inTextImg shortcode inTextImg는 themes/1/layouts/_shortcodes/readme/custom/inTextImg.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원형 {{\u0026lt; inTextImg url=\u0026#34;https://example.com/inline.svg\u0026#34; alt=\u0026#34;본문 속 이미지\u0026#34; height=\u0026#34;15\u0026#34; width=\u0026#34;15\u0026#34; loading=\u0026#34;lazy\u0026#34; decoding=\u0026#34;async\u0026#34; class=\u0026#34;lab-inline-img\u0026#34; \u0026gt;}} 확인 포인트 특수문자가 들어가는 URL은 반드시 따옴표로 감쌉니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/intextimg/","summary":"\u003ch1 id=\"intextimg-shortcode\"\u003einTextImg shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003einTextImg\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/inTextImg.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"inTextImg shortcode"},{"content":"katex shortcode katex는 themes/1/layouts/_shortcodes/readme/custom/katex.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 E = mc^2에너지 공식 원형 {{\u0026lt; katex display=true error_mode=\u0026#34;warn\u0026#34; label=\u0026#34;에너지 공식\u0026#34; class=\u0026#34;lab-katex\u0026#34; \u0026gt;}} E = mc^2 {{\u0026lt; /katex \u0026gt;}} 확인 포인트 본문 수식은 closing tag 안에 둡니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/katex/","summary":"\u003ch1 id=\"katex-shortcode\"\u003ekatex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ekatex\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/katex.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"katex shortcode"},{"content":"lead shortcode lead는 themes/1/layouts/_shortcodes/readme/custom/lead.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 짧고 강한 한 문장으로 리드를 시작합니다.\n원형 {{\u0026lt; lead text=\u0026#34;짧고 강한 한 문장으로 리드를 시작합니다.\u0026#34; align=\u0026#34;left\u0026#34; size=\u0026#34;lg\u0026#34; tone=\u0026#34;accent\u0026#34; max_width=\u0026#34;72ch\u0026#34; class=\u0026#34;lab-lead\u0026#34; \u0026gt;}} 확인 포인트 text는 한 문단 수준으로 간결하게 유지합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/lead/","summary":"\u003ch1 id=\"lead-shortcode\"\u003elead shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003elead\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/lead.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"lead shortcode"},{"content":"linkedin shortcode linkedin는 themes/1/layouts/_shortcodes/readme/custom/linkedin.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 LinkedInLinkedIn LinkedIn 예시\n원문 보기 원형 {{\u0026lt; linkedin url=\u0026#34;https://www.linkedin.com/feed/update/example\u0026#34; caption=\u0026#34;LinkedIn 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /linkedin \u0026gt;}} 확인 포인트 url이 우선이고 post_id는 보조 입력입니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/linkedin/","summary":"\u003ch1 id=\"linkedin-shortcode\"\u003elinkedin shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003elinkedin\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/linkedin.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"linkedin shortcode"},{"content":"ltr shortcode ltr는 themes/1/layouts/_shortcodes/readme/custom/ltr.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 왼쪽에서 오른쪽으로 읽는 문장입니다.\nMarkdown도 함께 확인합니다. 원형 {{\u0026lt; ltr md=true class=\u0026#34;lab-direction\u0026#34; \u0026gt;}} 왼쪽에서 오른쪽으로 읽는 문장입니다. - Markdown도 함께 확인합니다. {{\u0026lt; /ltr \u0026gt;}} 확인 포인트 md=true일 때 body markdownify 동작을 함께 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/ltr/","summary":"\u003ch1 id=\"ltr-shortcode\"\u003eltr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eltr\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/ltr.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"ltr shortcode"},{"content":"mastodon shortcode mastodon는 themes/1/layouts/_shortcodes/readme/custom/mastodon.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 MastodonMastodon Mastodon 예시\n원문 보기 원형 {{\u0026lt; mastodon url=\u0026#34;https://mastodon.social/@example/1\u0026#34; caption=\u0026#34;Mastodon 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /mastodon \u0026gt;}} 확인 포인트 server와 post_id 조합도 함께 검토합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/mastodon/","summary":"\u003ch1 id=\"mastodon-shortcode\"\u003emastodon shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003emastodon\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/mastodon.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"mastodon shortcode"},{"content":"mermaid shortcode mermaid는 themes/1/layouts/_shortcodes/readme/custom/mermaid.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 간단한 흐름도 — Mermaid 예시flowchart TD A[시작] --\u0026amp;gt; B{검토} B --\u0026amp;gt; C[완료] 원형 {{\u0026lt; mermaid theme=\u0026#34;neutral\u0026#34; title=\u0026#34;간단한 흐름도\u0026#34; caption=\u0026#34;Mermaid 예시\u0026#34; class=\u0026#34;lab-mermaid\u0026#34; \u0026gt;}} flowchart TD A[시작] --\u0026gt; B{검토} B --\u0026gt; C[완료] {{\u0026lt; /mermaid \u0026gt;}} 확인 포인트 다이어그램 body는 closing tag 안에 유지합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/mermaid/","summary":"\u003ch1 id=\"mermaid-shortcode\"\u003emermaid shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003emermaid\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/mermaid.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"mermaid shortcode"},{"content":"param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\n공식 문서에 따르면 param은 먼저 front matter를 찾고, 없으면 site parameter를 찾습니다. 값이 없으면 오류를 발생시킵니다. 중첩 값도 점(.)으로 연결해 접근할 수 있습니다. citeturn534114view2\n렌더링 결과 이 페이지의 제품 이름은 91-hugo-shortcode 입니다.\n이 페이지의 배지는 LAB 입니다.\n요약 문구는 front matter에서 끌어오는 값 입니다.\n원형 이 페이지의 제품 이름은 `{{% param product.name %}}` 입니다. 이 페이지의 배지는 `{{% param product.nested.badge %}}` 입니다. 요약 문구는 `{{% param seo.summary %}}` 입니다. 해석 포인트 front matter에서 값을 바꾸면 모든 참조가 같이 바뀝니다. nested param은 큰 설정 구조를 문서 안에서 재사용할 때 특히 좋습니다. 값이 없을 때 오류를 내므로, 키 이름을 실수로 바꾸면 바로 잡아낼 수 있습니다. 실무 팁 제품명, 버전, 배지, 분류명처럼 반복되는 문자열에 적합합니다. 문서 제목과 본문이 서로 어긋나지 않게 유지하려면 param이 유용합니다. 단순 치환만 할 수 있으므로, 복잡한 조건 분기는 shortcode보다 template 쪽이 낫습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/param/","summary":"\u003ch1 id=\"param-shortcode\"\u003eparam shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eparam\u003c/code\u003e은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\u003cbr\u003e\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\u003c/p\u003e","title":"param shortcode"},{"content":"param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\n공식 문서에 따르면 param은 먼저 front matter를 찾고, 없으면 site parameter를 찾습니다. 값이 없으면 오류를 발생시킵니다. 중첩 값도 점(.)으로 연결해 접근할 수 있습니다. citeturn534114view2\n렌더링 결과 이 페이지의 제품 이름은 91-hugo-shortcode 입니다.\n이 페이지의 배지는 LAB 입니다.\n요약 문구는 front matter에서 끌어오는 값 입니다.\n원형 이 페이지의 제품 이름은 `{{% param \u0026#34;product.name\u0026#34; %}}` 입니다. 이 페이지의 배지는 `{{% param \u0026#34;product.nested.badge\u0026#34; %}}` 입니다. 요약 문구는 `{{% param \u0026#34;seo.summary\u0026#34; %}}` 입니다. 해석 포인트 front matter에서 값을 바꾸면 모든 참조가 같이 바뀝니다. nested param은 큰 설정 구조를 문서 안에서 재사용할 때 특히 좋습니다. 값이 없을 때 오류를 내므로, 키 이름을 실수로 바꾸면 바로 잡아낼 수 있습니다. 실무 팁 제품명, 버전, 배지, 분류명처럼 반복되는 문자열에 적합합니다. 문서 제목과 본문이 서로 어긋나지 않게 유지하려면 param이 유용합니다. 단순 치환만 할 수 있으므로, 복잡한 조건 분기는 shortcode보다 template 쪽이 낫습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/param/","summary":"\u003ch1 id=\"param-shortcode\"\u003eparam shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eparam\u003c/code\u003e은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다.\u003cbr\u003e\n문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다.\u003c/p\u003e","title":"param shortcode"},{"content":"pinterest shortcode pinterest는 themes/1/layouts/_shortcodes/readme/custom/pinterest.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 PinterestPinterest 작성자 핀 제목 Pinterest 예시\n보조 설명\n높이: 240 원문 보기 원형 {{\u0026lt; pinterest url=\u0026#34;https://www.pinterest.com/pin/123456/\u0026#34; caption=\u0026#34;Pinterest 예시\u0026#34; theme=\u0026#34;light\u0026#34; title=\u0026#34;핀 제목\u0026#34; author=\u0026#34;작성자\u0026#34; image=\u0026#34;https://example.com/pin.jpg\u0026#34; description=\u0026#34;보조 설명\u0026#34; height=\u0026#34;240\u0026#34; lang=\u0026#34;ko\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /pinterest \u0026gt;}} 확인 포인트 image와 description은 안전한 fallback을 돕습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/pinterest/","summary":"\u003ch1 id=\"pinterest-shortcode\"\u003epinterest shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003epinterest\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/pinterest.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"pinterest shortcode"},{"content":"qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\n공식 문서 기준으로 text, level, scale, targetDir, alt 등의 인자를 사용할 수 있습니다.\ntext는 self-closing 방식 또는 본문 내 텍스트 둘 다 지원하고, level은 오류 정정 수준을 정합니다. citeturn241043view0\n렌더링 결과: self-closing 원형: self-closing {{\u0026lt; qr text=\u0026#34;https://gohugo.io\u0026#34; \u0026gt;}} 렌더링 결과: tag pair 원형: tag pair {{\u0026lt; qr \u0026gt;}} https://gohugo.io/shortcodes/ {{\u0026lt; /qr \u0026gt;}} 렌더링 결과: vCard 스타일 원형: vCard 스타일 {{\u0026lt; qr level=\u0026#34;low\u0026#34; scale=2 alt=\u0026#34;QR code of vCard for John Smith\u0026#34; \u0026gt;}} BEGIN:VCARD VERSION:2.1 N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD FN;CHARSET=UTF-8:Dr. John R. Smith, PhD. ORG;CHARSET=UTF-8:ABC Widgets TITLE;CHARSET=UTF-8:Vice President Engineering TEL;TYPE=WORK:+12065550101 EMAIL;TYPE=WORK:jsmith@example.org END:VCARD {{\u0026lt; /qr \u0026gt;}} 해석 포인트 text는 가장 기본적인 입력입니다. 본문 태그 사이에 넣는 방식은 긴 vCard 같은 구조화 텍스트에 편합니다. level은 정보량이 많을수록 중요합니다. scale은 결과 이미지의 픽셀 밀도를 결정하므로, 너무 작게 두면 스캔이 어려울 수 있습니다. 실무 팁 QR은 페이지 이동, 가입, 문의, 데모 신청 같은 행동 유도에 잘 맞습니다. alt 텍스트를 적절히 주면 접근성에도 도움이 됩니다. 생성된 이미지는 publishDir 아래에 저장되므로 정적 자산 관리 흐름을 함께 생각해야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/qr/","summary":"\u003ch1 id=\"qr-shortcode\"\u003eqr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eqr\u003c/code\u003e은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\u003cbr\u003e\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\u003c/p\u003e","title":"qr shortcode"},{"content":"qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\n공식 문서 기준으로 text, level, scale, targetDir, alt 등의 인자를 사용할 수 있습니다.\ntext는 self-closing 방식 또는 본문 내 텍스트 둘 다 지원하고, level은 오류 정정 수준을 정합니다. citeturn241043view0\n렌더링 결과: self-closing 원형: self-closing {{\u0026lt; qr text=\u0026#34;https://gohugo.io\u0026#34; \u0026gt;}} 렌더링 결과: tag pair 원형: tag pair {{\u0026lt; qr \u0026gt;}} https://gohugo.io/shortcodes/ {{\u0026lt; /qr \u0026gt;}} 렌더링 결과: vCard 스타일 원형: vCard 스타일 {{\u0026lt; qr level=\u0026#34;low\u0026#34; scale=2 alt=\u0026#34;QR code of vCard for John Smith\u0026#34; \u0026gt;}} BEGIN:VCARD VERSION:2.1 N;CHARSET=UTF-8:Smith;John;R.;Dr.;PhD FN;CHARSET=UTF-8:Dr. John R. Smith, PhD. ORG;CHARSET=UTF-8:ABC Widgets TITLE;CHARSET=UTF-8:Vice President Engineering TEL;TYPE=WORK:+12065550101 EMAIL;TYPE=WORK:jsmith@example.org END:VCARD {{\u0026lt; /qr \u0026gt;}} 해석 포인트 text는 가장 기본적인 입력입니다. 본문 태그 사이에 넣는 방식은 긴 vCard 같은 구조화 텍스트에 편합니다. level은 정보량이 많을수록 중요합니다. scale은 결과 이미지의 픽셀 밀도를 결정하므로, 너무 작게 두면 스캔이 어려울 수 있습니다. 실무 팁 QR은 페이지 이동, 가입, 문의, 데모 신청 같은 행동 유도에 잘 맞습니다. alt 텍스트를 적절히 주면 접근성에도 도움이 됩니다. 생성된 이미지는 publishDir 아래에 저장되므로 정적 자산 관리 흐름을 함께 생각해야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/qr/","summary":"\u003ch1 id=\"qr-shortcode\"\u003eqr shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eqr\u003c/code\u003e은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다.\u003cbr\u003e\n짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다.\u003c/p\u003e","title":"qr shortcode"},{"content":"rawhtml shortcode rawhtml는 themes/1/layouts/_shortcodes/readme/custom/rawhtml.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 원시 HTML 원형 {{\u0026lt; rawhtml \u0026gt;}}\u0026lt;span class=\u0026#34;lab-raw\u0026#34;\u0026gt;원시 HTML\u0026lt;/span\u0026gt;{{\u0026lt; /rawhtml \u0026gt;}} 확인 포인트 신뢰할 수 있는 HTML만 넣습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/rawhtml/","summary":"\u003ch1 id=\"rawhtml-shortcode\"\u003erawhtml shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erawhtml\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/rawhtml.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"rawhtml shortcode"},{"content":"reddit shortcode reddit는 themes/1/layouts/_shortcodes/readme/custom/reddit.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 RedditReddit Reddit 예시\n원문 보기 원형 {{\u0026lt; reddit url=\u0026#34;https://www.reddit.com/comments/123456/\u0026#34; caption=\u0026#34;Reddit 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /reddit \u0026gt;}} 확인 포인트 원문 링크를 항상 확인할 수 있어야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/reddit/","summary":"\u003ch1 id=\"reddit-shortcode\"\u003ereddit shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ereddit\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/reddit.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"reddit shortcode"},{"content":"ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\n공식 문서는 Markdown에서 이 shortcode가 이제는 obsolete라고 설명하면서도, 기존 shortcode 문법 자체와 경고 처리, 경로 해석 방식은 여전히 문서화합니다. 또한 path, lang, outputFormat을 사용할 수 있고, 경로는 현재 페이지 기준 또는 사이트 기준으로 해석됩니다. citeturn660511view0\n렌더링 결과 내부 문서로 가는 링크\n원형 [내부 문서로 가는 링크]({{% ref \u0026#34;/blog/lab/91-hugo-shortcode/ref-target\u0026#34; %}}) 해석 포인트 ref는 링크 텍스트를 감싸는 Markdown과 함께 사용하는 것이 기본입니다. 경로는 절대 경로처럼 쓰는 편이 읽기 쉽습니다. 참조 대상이 없으면 빌드 에러가 날 수 있으므로, 문서 구조를 바꾸기 전에 대상 경로를 함께 확인해야 합니다. 다양한 언어와 출력 형식을 다루는 사이트에서는 lang와 outputFormat이 중요해집니다. 실무 팁 오래된 문서나 다국어 사이트에서 특히 유용합니다. 새 Markdown 링크를 설계할 때는 render hook 전략과 함께 검토하는 것이 좋습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/ref/","summary":"\u003ch1 id=\"ref-shortcode\"\u003eref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eref\u003c/code\u003e는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\u003c/p\u003e","title":"ref shortcode"},{"content":"ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\n공식 문서는 Markdown에서 이 shortcode가 이제는 obsolete라고 설명하면서도, 기존 shortcode 문법 자체와 경고 처리, 경로 해석 방식은 여전히 문서화합니다. 또한 path, lang, outputFormat을 사용할 수 있고, 경로는 현재 페이지 기준 또는 사이트 기준으로 해석됩니다. citeturn660511view0\n렌더링 결과 내부 문서로 가는 링크\n원형 [내부 문서로 가는 링크]({{% ref \u0026#34;/blog/lab/91-hugo-shortcode/ref-target\u0026#34; %}}) 해석 포인트 ref는 링크 텍스트를 감싸는 Markdown과 함께 사용하는 것이 기본입니다. 경로는 절대 경로처럼 쓰는 편이 읽기 쉽습니다. 참조 대상이 없으면 빌드 에러가 날 수 있으므로, 문서 구조를 바꾸기 전에 대상 경로를 함께 확인해야 합니다. 다양한 언어와 출력 형식을 다루는 사이트에서는 lang와 outputFormat이 중요해집니다. 실무 팁 오래된 문서나 다국어 사이트에서 특히 유용합니다. 새 Markdown 링크를 설계할 때는 render hook 전략과 함께 검토하는 것이 좋습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/ref/","summary":"\u003ch1 id=\"ref-shortcode\"\u003eref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eref\u003c/code\u003e는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다.\u003c/p\u003e","title":"ref shortcode"},{"content":"ref target 이 페이지는 ref shortcode의 대상으로만 쓰는 가벼운 내부 페이지입니다.\n경로를 실제로 존재하게 만들어 예제가 빌드에서 깨지지 않게 합니다. 출력은 링크 목적지만 제공하면 충분합니다. 문서 본문에는 상세 설명을 넣지 않아도 됩니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/ref-target/","summary":"\u003ch1 id=\"ref-target\"\u003eref target\u003c/h1\u003e\n\u003cp\u003e이 페이지는 \u003ccode\u003eref\u003c/code\u003e shortcode의 대상으로만 쓰는 가벼운 내부 페이지입니다.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e경로를 실제로 존재하게 만들어 예제가 빌드에서 깨지지 않게 합니다.\u003c/li\u003e\n\u003cli\u003e출력은 링크 목적지만 제공하면 충분합니다.\u003c/li\u003e\n\u003cli\u003e문서 본문에는 상세 설명을 넣지 않아도 됩니다.\u003c/li\u003e\n\u003c/ul\u003e","title":"ref target"},{"content":"relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\nref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\n공식 문서는 Markdown에서 이 shortcode가 obsolete라고 설명하면서도, 경로 해석 방식과 에러 처리 옵션을 따로 안내합니다. path, lang, outputFormat을 사용할 수 있으며, 경로는 현재 페이지 기준에서 먼저 해석됩니다. citeturn660511view1\n렌더링 결과 상대 링크로 가는 문서\n원형 [상대 링크로 가는 문서]({{% relref \u0026#34;/blog/lab/91-hugo-shortcode/relref-target\u0026#34; %}}) 해석 포인트 relref는 결과가 상대 URL이어서 이동 가능한 문서 묶음에서 유리합니다. 동일한 도메인 안에서 경로가 덜 딱딱해집니다. ref보다 외형상 덜 장황할 수 있지만, 대규모 문서에서는 경로 기준을 일관되게 유지해야 합니다. 실무 팁 섹션 내부 이동이 많을수록 relref의 장점이 커집니다. 리팩터링 시 상대 경로가 깨질 수 있으므로 대상 페이지의 위치를 함께 관리해야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/relref/","summary":"\u003ch1 id=\"relref-shortcode\"\u003erelref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erelref\u003c/code\u003e는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n\u003ccode\u003eref\u003c/code\u003e와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\u003c/p\u003e","title":"relref shortcode"},{"content":"relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\nref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\n공식 문서는 Markdown에서 이 shortcode가 obsolete라고 설명하면서도, 경로 해석 방식과 에러 처리 옵션을 따로 안내합니다. path, lang, outputFormat을 사용할 수 있으며, 경로는 현재 페이지 기준에서 먼저 해석됩니다. citeturn660511view1\n렌더링 결과 상대 링크로 가는 문서\n원형 [상대 링크로 가는 문서]({{% relref \u0026#34;/blog/lab/91-hugo-shortcode/relref-target\u0026#34; %}}) 해석 포인트 relref는 결과가 상대 URL이어서 이동 가능한 문서 묶음에서 유리합니다. 동일한 도메인 안에서 경로가 덜 딱딱해집니다. ref보다 외형상 덜 장황할 수 있지만, 대규모 문서에서는 경로 기준을 일관되게 유지해야 합니다. 실무 팁 섹션 내부 이동이 많을수록 relref의 장점이 커집니다. 리팩터링 시 상대 경로가 깨질 수 있으므로 대상 페이지의 위치를 함께 관리해야 합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/relref/","summary":"\u003ch1 id=\"relref-shortcode\"\u003erelref shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003erelref\u003c/code\u003e는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다.\u003cbr\u003e\n\u003ccode\u003eref\u003c/code\u003e와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다.\u003c/p\u003e","title":"relref shortcode"},{"content":"relref target 이 페이지는 relref shortcode 예제의 안정적인 참조 대상입니다.\n상대 permalink를 확인하는 용도입니다. 문서 흐름을 방해하지 않도록 내용은 짧게 유지합니다. ref와 달리 상대 경로 형태를 확인하는 데 초점을 둡니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/relref-target/","summary":"\u003ch1 id=\"relref-target\"\u003erelref target\u003c/h1\u003e\n\u003cp\u003e이 페이지는 \u003ccode\u003erelref\u003c/code\u003e shortcode 예제의 안정적인 참조 대상입니다.\u003c/p\u003e\n\u003cul\u003e\n\u003cli\u003e상대 permalink를 확인하는 용도입니다.\u003c/li\u003e\n\u003cli\u003e문서 흐름을 방해하지 않도록 내용은 짧게 유지합니다.\u003c/li\u003e\n\u003cli\u003e\u003ccode\u003eref\u003c/code\u003e와 달리 상대 경로 형태를 확인하는 데 초점을 둡니다.\u003c/li\u003e\n\u003c/ul\u003e","title":"relref target"},{"content":"rtl shortcode rtl는 themes/1/layouts/_shortcodes/readme/custom/rtl.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 왼쪽에서 오른쪽이 아닌 방향으로 읽는 문장입니다.\nMarkdown도 함께 확인합니다. 원형 {{\u0026lt; rtl md=true class=\u0026#34;lab-direction\u0026#34; \u0026gt;}} 왼쪽에서 오른쪽이 아닌 방향으로 읽는 문장입니다. - Markdown도 함께 확인합니다. {{\u0026lt; /rtl \u0026gt;}} 확인 포인트 md와 class만 사용합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/rtl/","summary":"\u003ch1 id=\"rtl-shortcode\"\u003ertl shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ertl\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/rtl.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"rtl shortcode"},{"content":" priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; subtitle = \u0026#34;자세히 보기\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} priority primary BASECTA 버튼입니다자세히 보기 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;secondary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; subtitle = \u0026#34;자세히 보기\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/shortcode-cta-default/","summary":"\u003chr\u003e\n\u003ch1 id=\"priority\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary\"\u003eprimary\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003ch1 id=\"priority-1\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary-1\"\u003eprimary\u003c/h2\u003e\n\u003ch3 id=\"raw-code\"\u003eraw-code\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind = \u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority = \u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size = \u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone = \u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align = \u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge = \u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label = \u0026#34;CTA 버튼입니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e subtitle = \u0026#34;자세히 보기\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note = \u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target = \u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href = \u0026#34;https://example.com/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled = \u0026#34;false\u0026#34; \n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e\n\u003ch1 id=\"priority-2\"\u003epriority\u003c/h1\u003e\n\u003ch2 id=\"primary-2\"\u003eprimary\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e자세히 보기\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e","title":"shortcode CTA default"},{"content":" kind default BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind default raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind external BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind external raw-code {{\u0026lt; cta kind = \u0026#34;external\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind related BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind related raw-code {{\u0026lt; cta kind = \u0026#34;related\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} kind consult BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind consult raw-code {{\u0026lt; cta kind = \u0026#34;consult\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind download BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind download raw-code {{\u0026lt; cta kind = \u0026#34;download\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind newsletter BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind newsletter raw-code {{\u0026lt; cta kind = \u0026#34;newsletter\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind trial BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind trial raw-code {{\u0026lt; cta kind = \u0026#34;trial\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind price_check BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind price_check raw-code {{\u0026lt; cta kind = \u0026#34;price_check\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind utility BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind utility raw-code {{\u0026lt; cta kind = \u0026#34;utility\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind custom BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind custom raw-code {{\u0026lt; cta kind = \u0026#34;custom\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind internal BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind internal raw-code {{\u0026lt; cta kind = \u0026#34;internal\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind copy BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind copy raw-code {{\u0026lt; cta kind = \u0026#34;copy\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nkind custom_offer BASECTA 버튼입니다 기본 동작을 확인합니다.\nkind custom_offer raw-code {{\u0026lt; cta kind = \u0026#34;custom_offer\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority primary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority primary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority secondary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority secondary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;secondary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority tertiary BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority tertiary raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;tertiary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\npriority utility BASECTA 버튼입니다 기본 동작을 확인합니다.\npriority utility raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;utility\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize xs BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize xs raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;xs\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize sm BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize sm raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;sm\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize md BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize md raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize lg BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize lg raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;lg\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nsize xl BASECTA 버튼입니다 기본 동작을 확인합니다.\nsize xl raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;xl\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone brand BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone brand raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;brand\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone accent BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone accent raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;accent\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone neutral BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone neutral raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone muted BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone muted raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;muted\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone success BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone success raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;success\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone warning BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone warning raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;warning\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\ntone danger BASECTA 버튼입니다 기본 동작을 확인합니다.\ntone danger raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;danger\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign left BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign left raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;left\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign center BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign center raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;center\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign right BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign right raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;right\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\nalign stretch BASECTA 버튼입니다 기본 동작을 확인합니다.\nalign stretch raw-code {{\u0026lt; cta kind = \u0026#34;default\u0026#34; priority = \u0026#34;primary\u0026#34; size = \u0026#34;md\u0026#34; tone = \u0026#34;neutral\u0026#34; align = \u0026#34;stretch\u0026#34; badge = \u0026#34;BASE\u0026#34; label = \u0026#34;CTA 버튼입니다\u0026#34; surface = \u0026#34;after-content\u0026#34; note = \u0026#34;기본 동작을 확인합니다.\u0026#34; target = \u0026#34;_self\u0026#34; href = \u0026#34;https://example.com/\u0026#34; rel = \u0026#34;\u0026#34; aria_label = \u0026#34;\u0026#34; tracking_id = \u0026#34;\u0026#34; analytics_event = \u0026#34;\u0026#34; id = \u0026#34;\u0026#34; class = \u0026#34;\u0026#34; disabled = \u0026#34;false\u0026#34; \u0026gt;}} id = \u0026quot;\u0026quot; class = \u0026quot;\u0026quot;\ndisabled = \u0026ldquo;false\u0026rdquo; /\u0026gt;}}\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/90-shortcode-cta/04-coverage/shortcode-cta-test/","summary":"\u003chr\u003e\n\u003ch1 id=\"kind\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"default\"\u003edefault\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-default cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"default\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e\u003c/div\u003e\u003c/div\u003e\n\u003c/div\u003e\n\u003ch1 id=\"kind-1\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"default-1\"\u003edefault\u003c/h2\u003e\n\u003ch3 id=\"raw-code\"\u003eraw-code\u003c/h3\u003e\n\u003cdiv class=\"highlight\"\u003e\u003cpre tabindex=\"0\" style=\"color:#f8f8f2;background-color:#272822;-moz-tab-size:4;-o-tab-size:4;tab-size:4;\"\u003e\u003ccode class=\"language-text\" data-lang=\"text\"\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e{{\u0026lt; cta\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e kind = \u0026#34;default\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e priority = \u0026#34;primary\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e size = \u0026#34;md\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tone = \u0026#34;neutral\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e align = \u0026#34;center\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e badge = \u0026#34;BASE\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e label = \u0026#34;CTA 버튼입니다\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e surface = \u0026#34;after-content\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e note = \u0026#34;기본 동작을 확인합니다.\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e target = \u0026#34;_self\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e href = \u0026#34;https://example.com/\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e rel = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e aria_label = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e tracking_id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e analytics_event = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e id = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e class = \u0026#34;\u0026#34;\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e\n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e disabled = \u0026#34;false\u0026#34; \n\u003c/span\u003e\u003c/span\u003e\u003cspan style=\"display:flex;\"\u003e\u003cspan\u003e \u0026gt;}}\n\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e\u003c/div\u003e\u003chr\u003e\n\u003ch1 id=\"kind-2\"\u003ekind\u003c/h1\u003e\n\u003ch2 id=\"external\"\u003eexternal\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-external cta--priority-primary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"external\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"primary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"https://example.com/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003eBASE\u003c/span\u003e\u003cspan class=\"cta__label\"\u003eCTA 버튼입니다\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e기본 동작을 확인합니다.\u003c/p\u003e","title":"shortcode CTA TEST"},{"content":"tab shortcode tab는 themes/1/layouts/_shortcodes/readme/custom/tab.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 첫 번째 탭 첫 번째 탭 본문입니다. 원형 {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;첫 번째 탭\u0026#34; icon=\u0026#34;star\u0026#34; active=true class=\u0026#34;lab-tab\u0026#34; \u0026gt;}} 첫 번째 탭 본문입니다. {{\u0026lt; /tab \u0026gt;}} 확인 포인트 tabs 컨테이너와 같은 group 값을 써야 연결됩니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tab/","summary":"\u003ch1 id=\"tab-shortcode\"\u003etab shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etab\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tab.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tab shortcode"},{"content":"tabs shortcode tabs는 themes/1/layouts/_shortcodes/readme/custom/tabs.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 탭 A 탭 A 본문입니다. 탭 B 탭 B 본문입니다. 원형 {{\u0026lt; tabs group=\u0026#34;lab-tabs\u0026#34; class=\u0026#34;lab-tabs\u0026#34; \u0026gt;}} {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;탭 A\u0026#34; active=true \u0026gt;}} 탭 A 본문입니다. {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; tab group=\u0026#34;lab-tabs\u0026#34; title=\u0026#34;탭 B\u0026#34; \u0026gt;}} 탭 B 본문입니다. {{\u0026lt; /tab \u0026gt;}} {{\u0026lt; /tabs \u0026gt;}} 확인 포인트 tab과 함께 써야 의미가 생깁니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tabs/","summary":"\u003ch1 id=\"tabs-shortcode\"\u003etabs shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etabs\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tabs.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tabs shortcode"},{"content":"taxonomy term 테스트 목적 term 페이지는 하나의 분류 안에 묶인 글을 적절한 밀도로 나열해야 합니다. 분류명만 보이고 글 목록이 깨지면 의미가 없습니다.\n확인 항목 term 제목이 분명한가 관련 글 목록의 밀도가 적절한가 메타 정보가 지나치게 길지 않은가 기대 결과 사용자는 term 페이지에서 주제를 한 번 더 확인하고, 다음 글로 자연스럽게 이동할 수 있어야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/taxonomy-term/","summary":"\u003ch1 id=\"taxonomy-term\"\u003etaxonomy term\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eterm 페이지는 하나의 분류 안에 묶인 글을 적절한 밀도로 나열해야 합니다. 분류명만 보이고 글 목록이 깨지면 의미가 없습니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eterm 제목이 분명한가\u003c/li\u003e\n\u003cli\u003e관련 글 목록의 밀도가 적절한가\u003c/li\u003e\n\u003cli\u003e메타 정보가 지나치게 길지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e사용자는 term 페이지에서 주제를 한 번 더 확인하고, 다음 글로 자연스럽게 이동할 수 있어야 합니다.\u003c/p\u003e","title":"taxonomy term"},{"content":"taxonomy list 테스트 목적 카테고리와 태그의 목록 허브가 값이 없을 때도 화면을 깨지 않는지 확인합니다.\n확인 항목 term이 많아졌을 때 정렬이 유지되는가 빈 상태 메시지가 적절한가 다국어에서 taxonomies가 같은 문맥으로 보이는가 기대 결과 taxonomy list는 글을 모으는 허브이면서, 항목이 없을 때도 안내만 남기고 붕괴되지 않아야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/taxonomy-list/","summary":"\u003ch1 id=\"taxonomy-list\"\u003etaxonomy list\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카테고리와 태그의 목록 허브가 값이 없을 때도 화면을 깨지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eterm이 많아졌을 때 정렬이 유지되는가\u003c/li\u003e\n\u003cli\u003e빈 상태 메시지가 적절한가\u003c/li\u003e\n\u003cli\u003e다국어에서 taxonomies가 같은 문맥으로 보이는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003etaxonomy list는 글을 모으는 허브이면서, 항목이 없을 때도 안내만 남기고 붕괴되지 않아야 합니다.\u003c/p\u003e","title":"taxonomy 목록"},{"content":"threads shortcode threads는 themes/1/layouts/_shortcodes/readme/custom/threads.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 ThreadsThreads Threads 예시\n원문 보기 원형 {{\u0026lt; threads url=\u0026#34;https://www.threads.net/@example/post/1\u0026#34; caption=\u0026#34;Threads 예시\u0026#34; theme=\u0026#34;auto\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /threads \u0026gt;}} 확인 포인트 author와 post_id를 사용할 수도 있습니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/threads/","summary":"\u003ch1 id=\"threads-shortcode\"\u003ethreads shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ethreads\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/threads.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"threads shortcode"},{"content":"tiktok shortcode tiktok는 themes/1/layouts/_shortcodes/readme/custom/tiktok.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 TikTokTikTok @example 영상 제목 TikTok 예시\nTikTok 예시\n원문 보기 원형 {{\u0026lt; tiktok url=\u0026#34;https://www.tiktok.com/@example/video/1\u0026#34; caption=\u0026#34;TikTok 예시\u0026#34; theme=\u0026#34;neutral\u0026#34; title=\u0026#34;영상 제목\u0026#34; author=\u0026#34;@example\u0026#34; video_id=\u0026#34;1\u0026#34; class=\u0026#34;lab-social\u0026#34; \u0026gt;}} 본문 보조 설명입니다. {{\u0026lt; /tiktok \u0026gt;}} 확인 포인트 url가 우선이고 author/video_id는 보조 입력입니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/tiktok/","summary":"\u003ch1 id=\"tiktok-shortcode\"\u003etiktok shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003etiktok\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/tiktok.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"tiktok shortcode"},{"content":"video shortcode video는 themes/1/layouts/_shortcodes/readme/custom/video.html와 1:1로 대응하는 테스트 문서입니다.\n렌더링 결과 샘플 비디오샘플 비디오비디오 캡션원본 영상 열기\n원형 {{\u0026lt; video src=\u0026#34;https://example.com/video.mp4\u0026#34; title=\u0026#34;샘플 비디오\u0026#34; caption=\u0026#34;비디오 캡션\u0026#34; poster=\u0026#34;https://example.com/poster.jpg\u0026#34; ratio=\u0026#34;16/9\u0026#34; preload=\u0026#34;metadata\u0026#34; start=\u0026#34;0\u0026#34; end=\u0026#34;30\u0026#34; controls=true autoplay=false muted=false loop=false playsinline=true sources=\u0026#34;https://example.com/video.webm|video/webm;https://example.com/video.mp4|video/mp4\u0026#34; class=\u0026#34;lab-video\u0026#34; \u0026gt;}} 비디오에 대한 추가 설명입니다. {{\u0026lt; /video \u0026gt;}} 확인 포인트 autoplay=true를 사용할 때는 muted=true와 함께 확인합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/custom/video/","summary":"\u003ch1 id=\"video-shortcode\"\u003evideo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evideo\u003c/code\u003e는 \u003ccode\u003ethemes/1/layouts/_shortcodes/readme/custom/video.html\u003c/code\u003e와 1:1로 대응하는 테스트 문서입니다.\u003c/p\u003e","title":"video shortcode"},{"content":"vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\n공식 문서에는 id, allowFullScreen, class, loading, title이 안내되어 있고, privacy.vimeo 설정으로 동작을 조정할 수 있다고 설명합니다. simple=true를 주면 썸네일 기반의 간단한 형태를 쓸 수 있습니다. citeturn791175view2turn241043view2\n렌더링 결과 원형 {{\u0026lt; vimeo id=19899678 allowFullScreen=false loading=lazy title=\u0026#34;Vimeo shortcode sample\u0026#34; \u0026gt;}} 해석 포인트 id는 영상 식별자입니다. allowFullScreen=false는 전체화면 전환을 제한합니다. loading=lazy는 iframe 로드를 늦춰 초기 로딩 부담을 줄입니다. title은 접근성과 iframe 의미 전달에 도움이 됩니다. 주의할 점 외부 iframe 기반 임베드는 사이트의 privacy 설정과 네트워크 상태에 영향을 받습니다.\n오프라인 문서나 엄격한 보안 환경에서는 대체 이미지와 설명 텍스트를 함께 두는 편이 좋습니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/vimeo/","summary":"\u003ch1 id=\"vimeo-shortcode\"\u003evimeo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evimeo\u003c/code\u003e는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\u003c/p\u003e","title":"vimeo shortcode"},{"content":"vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\n공식 문서에는 id, allowFullScreen, class, loading, title이 안내되어 있고, privacy.vimeo 설정으로 동작을 조정할 수 있다고 설명합니다. simple=true를 주면 썸네일 기반의 간단한 형태를 쓸 수 있습니다. citeturn791175view2turn241043view2\n렌더링 결과 원형 {{\u0026lt; vimeo id=19899678 allowFullScreen=false loading=lazy title=\u0026#34;Vimeo shortcode sample\u0026#34; \u0026gt;}} 해석 포인트 id는 영상 식별자입니다. allowFullScreen=false는 전체화면 전환을 제한합니다. loading=lazy는 iframe 로드를 늦춰 초기 로딩 부담을 줄입니다. title은 접근성과 iframe 의미 전달에 도움이 됩니다. 주의할 점 외부 iframe 기반 임베드는 사이트의 privacy 설정과 네트워크 상태에 영향을 받습니다.\n오프라인 문서나 엄격한 보안 환경에서는 대체 이미지와 설명 텍스트를 함께 두는 편이 좋습니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/vimeo/","summary":"\u003ch1 id=\"vimeo-shortcode\"\u003evimeo shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003evimeo\u003c/code\u003e는 Vimeo 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다.\u003c/p\u003e","title":"vimeo shortcode"},{"content":"x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다.\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\n공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\n렌더링 결과 Owl bet you\u0026#39;ll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC\n\u0026mdash; San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 원형 {{\u0026lt; x user=\u0026#34;SanDiegoZoo\u0026#34; id=\u0026#34;1453110110599868418\u0026#34; \u0026gt;}} 해석 포인트 user와 id는 함께 쓰는 경우가 가장 명확합니다. simple=true를 쓰면 JavaScript 없는 정적 버전으로 빌드할 수 있습니다. enableDNT=true는 추적 억제 의도를 드러낼 때 유용합니다. disableInlineCSS는 서비스 스타일을 직접 제어하고 싶을 때 확인해야 합니다. 주의할 점 소셜 임베드는 서비스 정책 변경의 영향을 자주 받습니다.\n문서의 핵심 메시지가 포스트 자체라면, 포스트의 요약 문장도 함께 적어 두는 편이 안정적입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/x/","summary":"\u003ch1 id=\"x-shortcode\"\u003ex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ex\u003c/code\u003e는 X 포스트를 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\u003c/p\u003e\n\u003cp\u003e공식 문서에는 \u003ccode\u003euser\u003c/code\u003e, \u003ccode\u003eid\u003c/code\u003e 조합의 예시와 함께 \u003ccode\u003eprivacy.x.disable\u003c/code\u003e, \u003ccode\u003eprivacy.x.enableDNT\u003c/code\u003e, \u003ccode\u003eprivacy.x.simple\u003c/code\u003e, 그리고 \u003ccode\u003eservices.x.disableInlineCSS\u003c/code\u003e 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\u003c/p\u003e","title":"x shortcode"},{"content":"x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다.\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\n공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\n렌더링 결과 Owl bet you\u0026#39;ll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC\n\u0026mdash; San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 원형 {{\u0026lt; x user=\u0026#34;SanDiegoZoo\u0026#34; id=\u0026#34;1453110110599868418\u0026#34; \u0026gt;}} 해석 포인트 user와 id는 함께 쓰는 경우가 가장 명확합니다. simple=true를 쓰면 JavaScript 없는 정적 버전으로 빌드할 수 있습니다. enableDNT=true는 추적 억제 의도를 드러낼 때 유용합니다. disableInlineCSS는 서비스 스타일을 직접 제어하고 싶을 때 확인해야 합니다. 주의할 점 소셜 임베드는 서비스 정책 변경의 영향을 자주 받습니다.\n문서의 핵심 메시지가 포스트 자체라면, 포스트의 요약 문장도 함께 적어 두는 편이 안정적입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/x/","summary":"\u003ch1 id=\"x-shortcode\"\u003ex shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003ex\u003c/code\u003e는 X 포스트를 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다.\u003c/p\u003e\n\u003cp\u003e공식 문서에는 \u003ccode\u003euser\u003c/code\u003e, \u003ccode\u003eid\u003c/code\u003e 조합의 예시와 함께 \u003ccode\u003eprivacy.x.disable\u003c/code\u003e, \u003ccode\u003eprivacy.x.enableDNT\u003c/code\u003e, \u003ccode\u003eprivacy.x.simple\u003c/code\u003e, 그리고 \u003ccode\u003eservices.x.disableInlineCSS\u003c/code\u003e 설정이 안내되어 있습니다. citeturn791175view3turn241043view4\u003c/p\u003e","title":"x shortcode"},{"content":"youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\n공식 문서는 id, allowFullScreen, autoplay, class, controls, end, loading, loop, mute, start, title을 설명합니다. autoplay가 켜지면 mute도 강제로 true가 됩니다. citeturn791175view4turn241043view3\n렌더링 결과 원형 {{\u0026lt; youtube 0RKpf3rK57I \u0026gt;}} 해석 포인트 id만 넣어도 가장 흔한 사용 방식은 충분합니다. start와 end를 같이 쓰면 특정 구간만 보여 줄 수 있습니다. loop=true는 반복 재생이 필요할 때 유용합니다. controls=false는 영상을 보여 주되 조작부를 감추고 싶을 때 사용합니다. 실무 팁 문서 상단의 대표 영상보다는, 맥락 설명 뒤의 보조 영상으로 두면 읽기 흐름이 좋습니다. 영상 제목, 캡션, 한 줄 요약을 같이 넣으면 임베드만 있을 때보다 훨씬 친절합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/91-hugo-shortcode/01-embedded/youtube/","summary":"\u003ch1 id=\"youtube-shortcode\"\u003eyoutube shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eyoutube\u003c/code\u003e는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\u003c/p\u003e","title":"youtube shortcode"},{"content":"youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\n공식 문서는 id, allowFullScreen, autoplay, class, controls, end, loading, loop, mute, start, title을 설명합니다. autoplay가 켜지면 mute도 강제로 true가 됩니다. citeturn791175view4turn241043view3\n렌더링 결과 원형 {{\u0026lt; youtube 0RKpf3rK57I \u0026gt;}} 해석 포인트 id만 넣어도 가장 흔한 사용 방식은 충분합니다. start와 end를 같이 쓰면 특정 구간만 보여 줄 수 있습니다. loop=true는 반복 재생이 필요할 때 유용합니다. controls=false는 영상을 보여 주되 조작부를 감추고 싶을 때 사용합니다. 실무 팁 문서 상단의 대표 영상보다는, 맥락 설명 뒤의 보조 영상으로 두면 읽기 흐름이 좋습니다. 영상 제목, 캡션, 한 줄 요약을 같이 넣으면 임베드만 있을 때보다 훨씬 친절합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/92-hugo-shortcode/built-in/youtube/","summary":"\u003ch1 id=\"youtube-shortcode\"\u003eyoutube shortcode\u003c/h1\u003e\n\u003cp\u003e\u003ccode\u003eyoutube\u003c/code\u003e는 YouTube 영상을 본문에 임베드하는 shortcode입니다.\u003cbr\u003e\n가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다.\u003c/p\u003e","title":"youtube shortcode"},{"content":"spacing layout 테스트 목적 spacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.\n확인 항목 제목과 본문 사이 간격이 일관적인가 카드 목록의 밀도가 적절한가 모바일에서 여백이 너무 좁거나 넓지 않은가 판정 간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/spacing-layout/","summary":"\u003ch1 id=\"spacing-layout\"\u003espacing layout\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003espacing은 요소 간 거리뿐 아니라 페이지의 호흡을 결정합니다. 같은 페이지 안에서도 섹션과 카드와 본문이 서로 다른 리듬을 가져야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목과 본문 사이 간격이 일관적인가\u003c/li\u003e\n\u003cli\u003e카드 목록의 밀도가 적절한가\u003c/li\u003e\n\u003cli\u003e모바일에서 여백이 너무 좁거나 넓지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"판정\"\u003e판정\u003c/h2\u003e\n\u003cp\u003e간격이 일정하면 정보 계층이 보이고, 간격이 무너지면 아무리 좋은 콘텐츠도 조립품처럼 보입니다.\u003c/p\u003e","title":"간격과 레이아웃"},{"content":"search 테스트 목적 검색은 기능이 보이지 않을 때도 많지만, 막상 사용하면 UI 품질이 바로 드러나는 페이지입니다. 입력 상태, 결과 없음, 결과 목록을 모두 확인합니다.\n확인 항목 검색 입력이 명확하게 보이는가 결과 없음 상태가 무너짐 없이 표시되는가 결과가 많아져도 정렬과 탐색이 가능한가 언어별 검색이 예상한 대로 동작하는가 기대 결과 검색은 조용하지만 신뢰가 높아야 합니다. 아무 결과가 없어도 사용자가 다음 행동을 선택할 수 있어야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/search/","summary":"\u003ch1 id=\"search\"\u003esearch\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e검색은 기능이 보이지 않을 때도 많지만, 막상 사용하면 UI 품질이 바로 드러나는 페이지입니다. 입력 상태, 결과 없음, 결과 목록을 모두 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e검색 입력이 명확하게 보이는가\u003c/li\u003e\n\u003cli\u003e결과 없음 상태가 무너짐 없이 표시되는가\u003c/li\u003e\n\u003cli\u003e결과가 많아져도 정렬과 탐색이 가능한가\u003c/li\u003e\n\u003cli\u003e언어별 검색이 예상한 대로 동작하는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e검색은 조용하지만 신뢰가 높아야 합니다. 아무 결과가 없어도 사용자가 다음 행동을 선택할 수 있어야 합니다.\u003c/p\u003e","title":"검색"},{"content":"verification log 목적 이 문서는 랩 검증 중에 남기는 결과 기록입니다. 언제 무엇을 확인했고, 무엇이 통과 또는 실패였는지를 간단하지만 재현 가능하게 적습니다.\n기록 항목 항목 내용 날짜 검증한 시점 범위 확인한 섹션과 페이지 결과 통과 / 주의 / 실패 메모 재현 가능한 참고 사항 예시 메모 20-page-types: home과 section list가 정상 30-components: buttons와 cards는 통과 40-markup-rendering: raw HTML은 주의 필요 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/80-operations/verification-log/","summary":"\u003ch1 id=\"verification-log\"\u003everification log\u003c/h1\u003e\n\u003ch2 id=\"목적\"\u003e목적\u003c/h2\u003e\n\u003cp\u003e이 문서는 랩 검증 중에 남기는 결과 기록입니다. 언제 무엇을 확인했고, 무엇이 통과 또는 실패였는지를 간단하지만 재현 가능하게 적습니다.\u003c/p\u003e\n\u003ch2 id=\"기록-항목\"\u003e기록 항목\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e내용\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e날짜\u003c/td\u003e\n \u003ctd\u003e검증한 시점\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e범위\u003c/td\u003e\n \u003ctd\u003e확인한 섹션과 페이지\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e결과\u003c/td\u003e\n \u003ctd\u003e통과 / 주의 / 실패\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e메모\u003c/td\u003e\n \u003ctd\u003e재현 가능한 참고 사항\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"예시-메모\"\u003e예시 메모\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e20-page-types: home과 section list가 정상\u003c/li\u003e\n\u003cli\u003e30-components: buttons와 cards는 통과\u003c/li\u003e\n\u003cli\u003e40-markup-rendering: raw HTML은 주의 필요\u003c/li\u003e\n\u003c/ul\u003e","title":"검증 로그"},{"content":"related posts 테스트 목적 관련 글은 추천 알고리즘이 아니라 문맥 연결입니다. 비슷한 주제의 글이 너무 멀어지지 않게 배치되어야 합니다.\n확인 항목 현재 글과 의미적으로 가까운가 제목과 설명이 중복되지 않는가 항목 수가 과하지 않은가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/related-posts/","summary":"\u003ch1 id=\"related-posts\"\u003erelated posts\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e관련 글은 추천 알고리즘이 아니라 문맥 연결입니다. 비슷한 주제의 글이 너무 멀어지지 않게 배치되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 글과 의미적으로 가까운가\u003c/li\u003e\n\u003cli\u003e제목과 설명이 중복되지 않는가\u003c/li\u003e\n\u003cli\u003e항목 수가 과하지 않은가\u003c/li\u003e\n\u003c/ul\u003e","title":"관련 글"},{"content":"figures 테스트 목적 figure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.\n예시 구조 다이어그램이미지와 캡션이 본문 의미를 보강해야 합니다.\n확인 항목 alt가 적절한가 캡션이 본문과 중복되지 않는가 링크가 있는 figure도 자연스럽게 보이는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/figures/","summary":"\u003ch1 id=\"figures\"\u003efigures\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003efigure는 이미지를 설명하고 본문에 다시 연결하는 역할을 합니다. 그림이 있더라도 본문이 끊기지 않아야 합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg src=\"/images/theme-upgrade-lab/diagram.svg\"\n alt=\"다이어그램\"\u003e\u003cfigcaption\u003e\n \u003ch4\u003e구조 다이어그램\u003c/h4\u003e\u003cp\u003e이미지와 캡션이 본문 의미를 보강해야 합니다.\u003c/p\u003e","title":"그림"},{"content":"built-in shortcodes 테스트 목적 Hugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.\n예시 figure 예시이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다.\n확장 메모기본 shortcode는 샘플이 아니라 실제 문서에서 쓸 수 있어야 합니다. 확인 항목 figure가 캡션과 함께 자연스럽게 렌더링되는가 details/collapse가 본문 흐름을 끊지 않는가 부모 문단과 shortcode 경계가 애매하지 않은가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/built-in-shortcodes/","summary":"\u003ch1 id=\"built-in-shortcodes\"\u003ebuilt-in shortcodes\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eHugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg src=\"/images/theme-upgrade-lab/cover.svg\"\n alt=\"기본 shortcode용 그림\"\u003e\u003cfigcaption\u003e\n \u003ch4\u003efigure 예시\u003c/h4\u003e\u003cp\u003e이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다.\u003c/p\u003e","title":"기본 shortcode"},{"content":"markdown basic 테스트 목적 제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.\n확인 항목 heading 계층이 자연스러운가 list와 blockquote가 본문 리듬을 해치지 않는가 inline code와 code block이 명확히 구분되는가 예시 이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.\ntitle = \u0026#34;markdown basic\u0026#34; ShowToc = true ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-basic/","summary":"\u003ch1 id=\"markdown-basic\"\u003emarkdown basic\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eheading 계층이 자연스러운가\u003c/li\u003e\n\u003cli\u003elist와 blockquote가 본문 리듬을 해치지 않는가\u003c/li\u003e\n\u003cli\u003einline code와 code block이 명확히 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cblockquote\u003e\n\u003cp\u003e이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.\u003c/p\u003e","title":"기본 마크다운"},{"content":"long post 서론 긴 글은 문서의 체력을 보여 줍니다. 목차, 섹션 구조, 인용, 코드, 이미지, shortcode가 함께 붙을 때도 읽기 리듬이 유지되어야 합니다.\n배경 이 글은 단순한 예제가 아니라 실제 운영 글처럼 보이도록 설계했습니다. 긴 글은 중간에 한 번 더 호흡을 정리해 주는 소제목이 필요합니다.\n실험 요소 긴 글 샘플이미지와 본문이 경쟁하지 않고 역할을 나눠야 합니다.\ngit status hugo server 추가 메모긴 글에서는 보조 정보가 본문을 압도하지 않는지 특히 봐야 합니다. 결론 긴 글은 길다는 이유로 복잡해지는 것이 아니라, 길기 때문에 오히려 구조가 더 분명해야 합니다. 그래서 이 페이지는 단순히 문량을 늘리는 대신, 정보 계층을 끝까지 유지하는지 확인하는 데 목적이 있습니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/70-real-world-posts/long-post/","summary":"\u003ch1 id=\"long-post\"\u003elong post\u003c/h1\u003e\n\u003ch2 id=\"서론\"\u003e서론\u003c/h2\u003e\n\u003cp\u003e긴 글은 문서의 체력을 보여 줍니다. 목차, 섹션 구조, 인용, 코드, 이미지, shortcode가 함께 붙을 때도 읽기 리듬이 유지되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"배경\"\u003e배경\u003c/h2\u003e\n\u003cp\u003e이 글은 단순한 예제가 아니라 실제 운영 글처럼 보이도록 설계했습니다. 긴 글은 중간에 한 번 더 호흡을 정리해 주는 소제목이 필요합니다.\u003c/p\u003e","title":"긴 글"},{"content":"single page 테스트 목적 본문형 페이지는 제목, 설명, 메타, 목차, 본문 사이의 균형이 중요합니다. 정보가 너무 많으면 산만하고, 너무 적으면 구조가 사라집니다.\n확인 항목 제목과 설명이 같은 계층에서 충돌하지 않는가 목차가 필요한 문서에만 적절히 나타나는가 본문 너비와 줄길이가 읽기 좋은가 기대 결과 독자는 이 페이지를 읽으며 구조를 바로 파악하고, 다음 페이지로 이동할 수 있어야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/single-page/","summary":"\u003ch1 id=\"single-page\"\u003esingle page\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e본문형 페이지는 제목, 설명, 메타, 목차, 본문 사이의 균형이 중요합니다. 정보가 너무 많으면 산만하고, 너무 적으면 구조가 사라집니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목과 설명이 같은 계층에서 충돌하지 않는가\u003c/li\u003e\n\u003cli\u003e목차가 필요한 문서에만 적절히 나타나는가\u003c/li\u003e\n\u003cli\u003e본문 너비와 줄길이가 읽기 좋은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e독자는 이 페이지를 읽으며 구조를 바로 파악하고, 다음 페이지로 이동할 수 있어야 합니다.\u003c/p\u003e","title":"단일 페이지"},{"content":"design tokens 테스트 목적 토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.\n확인 항목 기초 값과 의미 값이 구분되는가 컴포넌트가 직접 숫자를 들고 있지 않은가 토큰 변경이 여러 UI에 예측 가능하게 반영되는가 기대 결과 페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.\n진단 도구 design-probe shortcode를 사용해 중앙 토큰의 역할을 다시 확인합니다.\n실패 기준 카드와 본문이 서로 다른 시스템처럼 보이는 경우 배경, border, shadow의 레이어 감각이 어긋나는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/design-tokens/","summary":"\u003ch1 id=\"design-tokens\"\u003edesign tokens\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e토큰이 CSS, 템플릿, shortcode에서 같은 의미로 읽히는지 확인합니다. 숫자를 직접 박아 넣는 대신 토큰이 흐르는지 보는 테스트입니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e기초 값과 의미 값이 구분되는가\u003c/li\u003e\n\u003cli\u003e컴포넌트가 직접 숫자를 들고 있지 않은가\u003c/li\u003e\n\u003cli\u003e토큰 변경이 여러 UI에 예측 가능하게 반영되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e페이지 상단의 핵심 카드, 표, 본문 간격이 같은 시각 언어를 유지해야 합니다.\u003c/p\u003e","title":"디자인 토큰"},{"content":"release checklist 점검 항목 content/ko의 경로가 모두 의도한 위치에 있는가 docs와 lab의 역할이 섞이지 않았는가 blog에 검증 전용 글이 들어가지 않았는가 기본 taxonomy와 menu가 연결되는가 TOML front matter가 모두 유효한가 모바일 화면에서 주요 페이지가 깨지지 않는가 릴리스 기준 모든 필수 항목이 통과해야 릴리스 가능합니다. 하나라도 불명확하면 그 항목은 다시 문서화해야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/80-operations/release-checklist/","summary":"\u003ch1 id=\"release-checklist\"\u003erelease checklist\u003c/h1\u003e\n\u003ch2 id=\"점검-항목\"\u003e점검 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003econtent/ko의 경로가 모두 의도한 위치에 있는가\u003c/li\u003e\n\u003cli\u003edocs와 lab의 역할이 섞이지 않았는가\u003c/li\u003e\n\u003cli\u003eblog에 검증 전용 글이 들어가지 않았는가\u003c/li\u003e\n\u003cli\u003e기본 taxonomy와 menu가 연결되는가\u003c/li\u003e\n\u003cli\u003eTOML front matter가 모두 유효한가\u003c/li\u003e\n\u003cli\u003e모바일 화면에서 주요 페이지가 깨지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"릴리스-기준\"\u003e릴리스 기준\u003c/h2\u003e\n\u003cp\u003e모든 필수 항목이 통과해야 릴리스 가능합니다. 하나라도 불명확하면 그 항목은 다시 문서화해야 합니다.\u003c/p\u003e","title":"릴리스 체크리스트"},{"content":"menus 테스트 목적 메뉴는 content가 아니라 구성 파일에서 관리해야 합니다. 이 페이지는 메뉴 구조를 이해하고, 바뀌어도 어디를 먼저 수정해야 하는지 확인하는 기준입니다.\n확인 항목 메뉴 역할 비고 main 핵심 탐색 docs, lab, blog를 우선 노출 taxonomies 분류 탐색 categories와 tags를 연결 utility 보조 행동 contact, search 등과 연결 가능 운영 원칙 메뉴 변경은 content와 config의 책임을 나눕니다. 새 허브가 생기면 먼저 docs에 정의를 남깁니다. 언어별 메뉴는 같은 순서를 유지합니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/menus/","summary":"\u003ch1 id=\"menus\"\u003emenus\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e메뉴는 content가 아니라 구성 파일에서 관리해야 합니다. 이 페이지는 메뉴 구조를 이해하고, 바뀌어도 어디를 먼저 수정해야 하는지 확인하는 기준입니다.\u003c/p\u003e","title":"메뉴"},{"content":"motion shape 테스트 목적 모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.\n확인 항목 hover와 focus 상태가 구분되는가 radius가 카드와 버튼에 같은 문법으로 적용되는가 transition이 빠르되 거슬리지 않는가 기대 결과 레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/motion-shape/","summary":"\u003ch1 id=\"motion-shape\"\u003emotion shape\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e모션과 형태는 거의 보이지 않지만 인상을 크게 바꿉니다. 과한 motion은 장식이 되고, 너무 적은 shape는 페이지를 딱딱하게 만듭니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003ehover와 focus 상태가 구분되는가\u003c/li\u003e\n\u003cli\u003eradius가 카드와 버튼에 같은 문법으로 적용되는가\u003c/li\u003e\n\u003cli\u003etransition이 빠르되 거슬리지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e레이어는 분명해야 하지만 과장되면 안 됩니다. 부드러우면서도 단정한 느낌이 목표입니다.\u003c/p\u003e","title":"모션과 형태"},{"content":"badges 테스트 목적 배지는 메인 정보가 아니라 보조 신호입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.\n확인 항목 짧은 라벨이 적절한 밀도로 보이는가 배지가 줄바꿈될 때 디자인이 깨지지 않는가 색이 정보의 주인공이 되지 않는가 기대 결과 배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/badges/","summary":"\u003ch1 id=\"badges\"\u003ebadges\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e배지는 메인 정보가 아니라 \u003cstrong\u003e보조 신호\u003c/strong\u003e입니다. 상태, 분류, 짧은 메타가 본문을 가리지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e짧은 라벨이 적절한 밀도로 보이는가\u003c/li\u003e\n\u003cli\u003e배지가 줄바꿈될 때 디자인이 깨지지 않는가\u003c/li\u003e\n\u003cli\u003e색이 정보의 주인공이 되지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e배지는 시선을 빼앗지 않으면서도 맥락을 보강해야 합니다.\u003c/p\u003e","title":"배지"},{"content":"buttons 테스트 목적 버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.\n확인 항목 primary 버튼이 가장 먼저 읽히는가 secondary 버튼이 보조 행동으로 인식되는가 external 행동이 내부 이동과 헷갈리지 않는가 긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가 shortcode 예시 구조 확인 시작 외부 문서 열기 실패 기준 행동 우선순위가 보이지 않는 경우 라벨이 길 때 버튼 높이가 제멋대로 바뀌는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/buttons/","summary":"\u003ch1 id=\"buttons\"\u003ebuttons\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e버튼은 사용자의 행동을 유도하는 가장 중요한 상호작용 요소입니다. primary, secondary, external, utility가 같은 시스템 안에서 분리되어 보여야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003eprimary 버튼이 가장 먼저 읽히는가\u003c/li\u003e\n\u003cli\u003esecondary 버튼이 보조 행동으로 인식되는가\u003c/li\u003e\n\u003cli\u003eexternal 행동이 내부 이동과 헷갈리지 않는가\u003c/li\u003e\n\u003cli\u003e긴 라벨이 줄바꿈되어도 버튼 구조가 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"shortcode-예시\"\u003eshortcode 예시\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-trial cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"trial\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/docs/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e구조 확인 시작\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"버튼"},{"content":"breadcrumbs 테스트 목적 breadcrumb는 사용자가 지금 어디에 있는지, 어디에서 왔는지 설명합니다. 깊은 구조일수록 중요합니다.\n확인 항목 상위 계층이 올바르게 나열되는가 현재 페이지가 마지막에 분명히 표시되는가 모바일에서 길이가 과도하지 않은가 기대 결과 breadcrumb는 현재 문맥을 잃지 않게 해 주는 작은 나침반입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/breadcrumbs/","summary":"\u003ch1 id=\"breadcrumbs\"\u003ebreadcrumbs\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003ebreadcrumb는 사용자가 지금 어디에 있는지, 어디에서 왔는지 설명합니다. 깊은 구조일수록 중요합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상위 계층이 올바르게 나열되는가\u003c/li\u003e\n\u003cli\u003e현재 페이지가 마지막에 분명히 표시되는가\u003c/li\u003e\n\u003cli\u003e모바일에서 길이가 과도하지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003ebreadcrumb는 현재 문맥을 잃지 않게 해 주는 작은 나침반입니다.\u003c/p\u003e","title":"브레드크럼"},{"content":"color surface 테스트 목적 배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.\n확인 항목 페이지 배경과 카드가 섞이지 않는가 강조 영역이 너무 많지 않은가 라이트와 다크에서 바탕 인상이 유지되는가 시각 샘플 표면 레이어static 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다.\n실패 기준 표면이 모두 같은 덩어리처럼 보이는 경우 카드가 배경 위에서 떠 보이지 않는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/color-surface/","summary":"\u003ch1 id=\"color-surface\"\u003ecolor surface\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e배경과 카드, 보조 표면의 위계가 분리되어야 합니다. 같은 색을 쓰더라도 역할이 다르면 시각적 레이어가 달라 보여야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e페이지 배경과 카드가 섞이지 않는가\u003c/li\u003e\n\u003cli\u003e강조 영역이 너무 많지 않은가\u003c/li\u003e\n\u003cli\u003e라이트와 다크에서 바탕 인상이 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"시각-샘플\"\u003e시각 샘플\u003c/h2\u003e\n\u003cfigure\u003e\u003cimg src=\"/images/theme-upgrade-lab/cover.svg\"\n alt=\"색상 표면 예시\"\u003e\u003cfigcaption\u003e\n \u003ch4\u003e표면 레이어\u003c/h4\u003e\u003cp\u003estatic 이미지를 사용해 figure 렌더링과 비주얼 계층을 함께 점검합니다.\u003c/p\u003e","title":"색상과 표면"},{"content":"section list 테스트 목적 섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다.\n확인 항목 목록 정렬이 예측 가능한가 빈 섹션 상태에서도 UI가 무너지지 않는가 하위 페이지의 요약이 과도하게 길지 않은가 기대 결과 목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/section-list/","summary":"\u003ch1 id=\"section-list\"\u003esection list\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e섹션 목록은 하위 페이지의 질서를 보여 줍니다. 제목, 요약, 카드, 메타가 과도하지 않으면서도 충분히 읽혀야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e목록 정렬이 예측 가능한가\u003c/li\u003e\n\u003cli\u003e빈 섹션 상태에서도 UI가 무너지지 않는가\u003c/li\u003e\n\u003cli\u003e하위 페이지의 요약이 과도하게 길지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e목록 페이지는 많은 정보를 한 화면에 넣는 대신, 사용자가 다음 단계를 고를 수 있게 도와야 합니다.\u003c/p\u003e","title":"섹션 목록"},{"content":"section pages 테스트 목적 섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다.\n확인 항목 섹션 소개와 하위 목록이 충돌하지 않는가 하위 페이지가 많아져도 읽기 쉽나 섹션 허브와 실제 본문이 혼동되지 않는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/60-content-architecture/section-pages/","summary":"\u003ch1 id=\"section-pages\"\u003esection pages\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e섹션 페이지는 하위 콘텐츠를 모으는 허브입니다. 요약, 목록, 읽는 순서가 분명해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e섹션 소개와 하위 목록이 충돌하지 않는가\u003c/li\u003e\n\u003cli\u003e하위 페이지가 많아져도 읽기 쉽나\u003c/li\u003e\n\u003cli\u003e섹션 허브와 실제 본문이 혼동되지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"섹션 페이지"},{"content":"alerts 테스트 목적 알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.\n확인 항목 알림이 본문 문단과 혼동되지 않는가 경고와 정보의 계층이 분리되는가 긴 메시지가 들어가도 박스가 무너지지 않는가 raw HTML 예시 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다. 실패 기준 알림이 본문처럼 보여 버리는 경우 색만 바뀌고 의미 구조가 없는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/alerts/","summary":"\u003ch1 id=\"alerts\"\u003ealerts\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e알림은 주의, 경고, 정보, 성공 상태를 전달합니다. 내용이 짧아도 눈에 띄어야 하지만, 페이지 전체를 지배하면 안 됩니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e알림이 본문 문단과 혼동되지 않는가\u003c/li\u003e\n\u003cli\u003e경고와 정보의 계층이 분리되는가\u003c/li\u003e\n\u003cli\u003e긴 메시지가 들어가도 박스가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"raw-html-예시\"\u003eraw HTML 예시\u003c/h2\u003e\n\n\u003cdiv role=\"alert\" style=\"padding:1rem;border:1px solid currentColor;border-radius:0.75rem;\"\u003e\n 검증 알림: 상태 메시지는 본문보다 앞서 읽혀야 합니다.\n\u003c/div\u003e\n\n\u003ch2 id=\"실패-기준\"\u003e실패 기준\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e알림이 본문처럼 보여 버리는 경우\u003c/li\u003e\n\u003cli\u003e색만 바뀌고 의미 구조가 없는 경우\u003c/li\u003e\n\u003c/ul\u003e","title":"알림"},{"content":"language switcher 테스트 목적 언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, 현재 문서의 대응 번역으로 이동해야 합니다.\n확인 항목 현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가 번역이 없을 때 안전한 대체 경로가 있는가 표기와 순서가 언어별로 일관적인가 운영 원칙 secondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/language-switcher/","summary":"\u003ch1 id=\"language-switcher\"\u003elanguage switcher\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e언어 전환은 단순히 다른 언어 홈으로 보내는 링크가 아니라, \u003cstrong\u003e현재 문서의 대응 번역\u003c/strong\u003e으로 이동해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 페이지가 가능한 경우 같은 문서의 다른 언어로 이동하는가\u003c/li\u003e\n\u003cli\u003e번역이 없을 때 안전한 대체 경로가 있는가\u003c/li\u003e\n\u003cli\u003e표기와 순서가 언어별로 일관적인가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"운영-원칙\"\u003e운영 원칙\u003c/h2\u003e\n\u003cp\u003esecondary 언어를 준비하지 않았다면 구조만 맞추고 본문은 비워 두는 편이 낫습니다. 잘못된 번역 연결보다 비어 있는 구조가 더 안전합니다.\u003c/p\u003e","title":"언어 전환기"},{"content":"upgrade summary 이번에 정리한 것 content/ko를 기준 트리로 재정리 docs/content-structure와 docs/design-system을 기준 문서로 정비 lab/hugo-content-lab을 페이지 타입, 컴포넌트, 마크업, 네비게이션, 구조, 운영으로 분리 blog를 실제 발행 글 형식으로 정리 front matter를 TOML 기준으로 통일 영향 범위 폴더 영향 content/ko/docs 기준 문서가 읽기 쉬워짐 content/ko/lab 검증 포인트가 더 세분화됨 content/ko/blog 운영 글과 검증 글이 분리됨 content/ko/categories, tags taxonomy 진입점이 명확해짐 결론 이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/80-operations/upgrade-summary/","summary":"\u003ch1 id=\"upgrade-summary\"\u003eupgrade summary\u003c/h1\u003e\n\u003ch2 id=\"이번에-정리한-것\"\u003e이번에 정리한 것\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003econtent/ko를 기준 트리로 재정리\u003c/li\u003e\n\u003cli\u003edocs/content-structure와 docs/design-system을 기준 문서로 정비\u003c/li\u003e\n\u003cli\u003elab/hugo-content-lab을 페이지 타입, 컴포넌트, 마크업, 네비게이션, 구조, 운영으로 분리\u003c/li\u003e\n\u003cli\u003eblog를 실제 발행 글 형식으로 정리\u003c/li\u003e\n\u003cli\u003efront matter를 TOML 기준으로 통일\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"영향-범위\"\u003e영향 범위\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e폴더\u003c/th\u003e\n \u003cth\u003e영향\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/docs\u003c/td\u003e\n \u003ctd\u003e기준 문서가 읽기 쉬워짐\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/lab\u003c/td\u003e\n \u003ctd\u003e검증 포인트가 더 세분화됨\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/blog\u003c/td\u003e\n \u003ctd\u003e운영 글과 검증 글이 분리됨\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003econtent/ko/categories, tags\u003c/td\u003e\n \u003ctd\u003etaxonomy 진입점이 명확해짐\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"결론\"\u003e결론\u003c/h2\u003e\n\u003cp\u003e이번 작업의 핵심은 파일 수를 늘린 것이 아니라, 각 파일의 책임을 분명히 해서 앞으로의 확장이 예측 가능해진 것입니다.\u003c/p\u003e","title":"업그레이드 요약"},{"content":"update log 변경 기록 형식 항목 설명 날짜 2026-06-23 대상 content/ko 전반 요약 docs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리 영향 탐색, taxonomy, page-hub, shortcode 검증 흐름 개선 메모 모든 콘텐츠는 KO 기준으로 먼저 완성 TOML front matter로 통일 검증용 콘텐츠는 lab에만 배치 운영 글은 blog에서만 유지 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/80-operations/update-log/","summary":"\u003ch1 id=\"update-log\"\u003eupdate log\u003c/h1\u003e\n\u003ch2 id=\"변경-기록-형식\"\u003e변경 기록 형식\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e날짜\u003c/td\u003e\n \u003ctd\u003e2026-06-23\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e대상\u003c/td\u003e\n \u003ctd\u003econtent/ko 전반\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e요약\u003c/td\u003e\n \u003ctd\u003edocs와 lab을 중심으로 콘텐츠 구조와 front matter를 정리\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e영향\u003c/td\u003e\n \u003ctd\u003e탐색, taxonomy, page-hub, shortcode 검증 흐름 개선\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"메모\"\u003e메모\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e모든 콘텐츠는 KO 기준으로 먼저 완성\u003c/li\u003e\n\u003cli\u003eTOML front matter로 통일\u003c/li\u003e\n\u003cli\u003e검증용 콘텐츠는 lab에만 배치\u003c/li\u003e\n\u003cli\u003e운영 글은 blog에서만 유지\u003c/li\u003e\n\u003c/ul\u003e","title":"업데이트 로그"},{"content":"edge cases 테스트 목적 UI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.\n확인 항목 아주 긴 URL이 줄바꿈을 망치지 않는가 한 줄짜리 강한 강조가 과도하지 않은가 영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가 예시 This page keeps long URLs and English phrases readable even when the surrounding content is in Korean. 이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다. ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/edge-cases/","summary":"\u003ch1 id=\"edge-cases\"\u003eedge cases\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003eUI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e아주 긴 URL이 줄바꿈을 망치지 않는가\u003c/li\u003e\n\u003cli\u003e한 줄짜리 강한 강조가 과도하지 않은가\u003c/li\u003e\n\u003cli\u003e영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cdiv dir=\"ltr\"\u003eThis page keeps long URLs and English phrases readable even when the surrounding content is in Korean.\u003c/div\u003e\n\n\u003cdiv dir=\"rtl\"\u003e이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다.\u003c/div\u003e","title":"엣지 케이스"},{"content":"embeds 테스트 목적 외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.\n확인 항목 임베드가 페이지 너비를 넘지 않는가 주변 본문과 간격이 충분한가 로딩 실패 시도 페이지가 무너지지 않는가 메모 실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/embeds/","summary":"\u003ch1 id=\"embeds\"\u003eembeds\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e외부 임베드나 iframe은 레이아웃을 크게 흔들 수 있습니다. 폭, 높이, 반응형 처리, 주변 여백을 함께 봅니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e임베드가 페이지 너비를 넘지 않는가\u003c/li\u003e\n\u003cli\u003e주변 본문과 간격이 충분한가\u003c/li\u003e\n\u003cli\u003e로딩 실패 시도 페이지가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"메모\"\u003e메모\u003c/h2\u003e\n\u003cp\u003e실제 외부 서비스가 없어도, 이 페이지는 임베드가 들어오는 자리의 여백과 비율을 검증하는 기준이 됩니다.\u003c/p\u003e","title":"임베드"},{"content":"medium post 중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다.\n섹션 1 이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다.\n섹션 2 인용문은 문맥을 보강하지만, 본문을 대체하면 안 됩니다.\n항목 의미 구조 문서가 어디에 있어야 하는지 표현 화면에서 어떻게 보여야 하는지 마무리 읽는 사람은 적당한 정보량을 받아야 하고, 시스템은 그 정보를 안정적으로 표현해야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/70-real-world-posts/medium-post/","summary":"\u003ch1 id=\"medium-post\"\u003emedium post\u003c/h1\u003e\n\u003cp\u003e중간 길이 글은 가장 현실적인 테스트입니다. 너무 짧지도, 너무 길지도 않기 때문에 본문 리듬과 구성 감각이 드러납니다.\u003c/p\u003e\n\u003ch2 id=\"섹션-1\"\u003e섹션 1\u003c/h2\u003e\n\u003cp\u003e이 문단은 흐름을 확인하기 위한 문장입니다. 한글 설명 사이에 English term이 들어가도 리듬이 유지되어야 합니다.\u003c/p\u003e","title":"중간 글"},{"content":"short post 이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다.\n확인 포인트 첫 문단만 읽어도 주제가 보이는가 불필요하게 장황하지 않은가 짧아도 결론이 있는가 중간 길이 글 보기 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/70-real-world-posts/short-post/","summary":"\u003ch1 id=\"short-post\"\u003eshort post\u003c/h1\u003e\n\u003cp\u003e이 글은 짧지만 구조가 보이도록 작성했습니다. 실제 서비스에서는 짧은 공지나 소개 글이 이런 형식을 자주 씁니다.\u003c/p\u003e\n\u003ch2 id=\"확인-포인트\"\u003e확인 포인트\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e첫 문단만 읽어도 주제가 보이는가\u003c/li\u003e\n\u003cli\u003e불필요하게 장황하지 않은가\u003c/li\u003e\n\u003cli\u003e짧아도 결론이 있는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"related\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/70-real-world-posts/medium-post/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e중간 길이 글 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"짧은 글"},{"content":"cards 테스트 목적 카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.\n확인 항목 제목 길이가 달라도 높이감이 유지되는가 설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가 링크가 있는 카드와 없는 카드가 시각적으로 구분되는가 기대 결과 카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/cards/","summary":"\u003ch1 id=\"cards\"\u003ecards\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카드는 내용 묶음의 가장 흔한 표현입니다. 제목, 설명, 메타, 링크가 같은 규칙으로 보이는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목 길이가 달라도 높이감이 유지되는가\u003c/li\u003e\n\u003cli\u003e설명 유무에 따라 카드가 부자연스럽게 바뀌지 않는가\u003c/li\u003e\n\u003cli\u003e링크가 있는 카드와 없는 카드가 시각적으로 구분되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e카드는 여러 개가 나열되어도 서로 싸우지 않고, 정보 묶음으로 읽혀야 합니다.\u003c/p\u003e","title":"카드"},{"content":"categories 테스트 목적 카테고리는 넓은 분류입니다. term이 늘어나도 목록의 질서가 유지되는지 확인합니다.\n확인 항목 목록 페이지가 비어도 깨지지 않는가 term 페이지로 이동이 자연스러운가 blog 글과 taxonomy 연결이 정상인가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/60-content-architecture/categories/","summary":"\u003ch1 id=\"categories\"\u003ecategories\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e카테고리는 넓은 분류입니다. term이 늘어나도 목록의 질서가 유지되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e목록 페이지가 비어도 깨지지 않는가\u003c/li\u003e\n\u003cli\u003eterm 페이지로 이동이 자연스러운가\u003c/li\u003e\n\u003cli\u003eblog 글과 taxonomy 연결이 정상인가\u003c/li\u003e\n\u003c/ul\u003e","title":"카테고리"},{"content":"typography language 테스트 목적 한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.\n확인 항목 제목의 줄바꿈이 과도하지 않은가 영문 약어가 본문보다 튀지 않는가 숫자와 단위가 문단 흐름을 깨지 않는가 코드와 본문이 같은 톤으로 섞이지 않는가 예시 Hugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.\n실패 기준 영문이 과하게 굵거나 크거나 어색하게 떠 보이는 경우 긴 제목이 불필요하게 여러 줄로 찢어지는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/10-foundation/typography-language/","summary":"\u003ch1 id=\"typography-language\"\u003etypography language\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e한글 본문, 영어 약어, 숫자, 코드가 한 문단 안에 섞일 때도 읽기 리듬이 유지되는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e제목의 줄바꿈이 과도하지 않은가\u003c/li\u003e\n\u003cli\u003e영문 약어가 본문보다 튀지 않는가\u003c/li\u003e\n\u003cli\u003e숫자와 단위가 문단 흐름을 깨지 않는가\u003c/li\u003e\n\u003cli\u003e코드와 본문이 같은 톤으로 섞이지 않는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cp\u003eHugo, frontend, UI, CSS, 2026 같은 조합이 자연스럽게 읽혀야 합니다. 같은 문장에서 한글과 영문이 섞여도 줄간격과 시각적 무게가 안정적이어야 합니다.\u003c/p\u003e","title":"타이포그래피와 언어"},{"content":"tags 테스트 목적 태그는 세밀한 연결입니다. 너무 많아지면 정보가 흐려지므로, term 페이지와 목록의 균형을 확인해야 합니다.\n확인 항목 짧은 태그가 읽기 좋게 배치되는가 태그 목록이 과밀해도 정렬이 유지되는가 연결된 글 수가 늘어나도 UI가 무너지지 않는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/60-content-architecture/tags/","summary":"\u003ch1 id=\"tags\"\u003etags\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e태그는 세밀한 연결입니다. 너무 많아지면 정보가 흐려지므로, term 페이지와 목록의 균형을 확인해야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e짧은 태그가 읽기 좋게 배치되는가\u003c/li\u003e\n\u003cli\u003e태그 목록이 과밀해도 정렬이 유지되는가\u003c/li\u003e\n\u003cli\u003e연결된 글 수가 늘어나도 UI가 무너지지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"태그"},{"content":"theme shortcodes 테스트 목적 테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.\n예시 다음 검증 페이지 보기 확인 항목 shortcode가 하드코딩 값에 의존하지 않는가 중앙 설정을 바꾸면 결과가 일관되게 바뀌는가 본문과 shortcode 간 간격이 너무 넓거나 좁지 않은가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/theme-shortcodes/","summary":"\u003ch1 id=\"theme-shortcodes\"\u003etheme shortcodes\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003cdiv id=\"-nil-\" class=\"cta cta--kind-related cta--priority-secondary cta--surface-after-content cta--size-md cta--tone-neutral cta--align-center cta--has-body \u0026amp;lt;nil\u0026amp;gt;\" data-cta-kind=\"related\" data-cta-intent=\"\u0026lt;nil\u0026gt;\" data-cta-priority=\"secondary\" data-cta-surface=\"after-content\" data-cta-size=\"md\" data-cta-tone=\"neutral\" data-cta-align=\"center\" data-cta-target=\"_self\" data-cta-has-body=\"true\" data-cta-disabled=\"false\" data-cta-compact=\"false\" data-tracking-id=\"\u0026amp;lt;nil\u0026amp;gt;\" data-analytics-event=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cdiv class=\"cta__frame\"\u003e\u003ca class=\"cta__link\" href=\"/lab/hugo-content-lab/30-components/\" target=\"_self\" rel=\"\u0026amp;lt;nil\u0026amp;gt;\" aria-label=\"\u0026amp;lt;nil\u0026amp;gt;\"\u003e\n \u003cspan class=\"cta__link-inner\"\u003e\u003cspan class=\"cta__badge\"\u003e\u003c/span\u003e\u003cspan class=\"cta__label\"\u003e다음 검증 페이지 보기\u003c/span\u003e\u003cspan class=\"cta__subtitle\"\u003e\u003c/span\u003e\u003c/span\u003e\n \u003c/a\u003e\u003cdiv class=\"cta__support\"\u003e\u003cp class=\"cta__note\"\u003e\u003c/p\u003e","title":"테마 shortcode"},{"content":"pagination 테스트 목적 목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다.\n확인 항목 현재 페이지가 충분히 강조되는가 이전/다음 이동이 직관적인가 숫자 범위가 너무 넓거나 좁지 않은가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/pagination/","summary":"\u003ch1 id=\"pagination\"\u003epagination\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e목록이 길어질수록 페이징의 품질이 중요해집니다. 현재 위치, 이전/다음 관계, 버튼 크기가 안정적이어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e현재 페이지가 충분히 강조되는가\u003c/li\u003e\n\u003cli\u003e이전/다음 이동이 직관적인가\u003c/li\u003e\n\u003cli\u003e숫자 범위가 너무 넓거나 좁지 않은가\u003c/li\u003e\n\u003c/ul\u003e","title":"페이지네이션"},{"content":"flat pages 테스트 목적 평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다.\n확인 항목 상위 섹션 없이도 페이지가 독립적으로 보이는가 breadcrumb가 과하지 않은가 본문과 메타가 균형을 이루는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/60-content-architecture/flat-pages/","summary":"\u003ch1 id=\"flat-pages\"\u003eflat pages\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e평면 페이지는 구조가 얕아서 단순해 보이지만, 실제로는 경로와 메타데이터를 가장 깔끔하게 보여 줍니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상위 섹션 없이도 페이지가 독립적으로 보이는가\u003c/li\u003e\n\u003cli\u003ebreadcrumb가 과하지 않은가\u003c/li\u003e\n\u003cli\u003e본문과 메타가 균형을 이루는가\u003c/li\u003e\n\u003c/ul\u003e","title":"평면 페이지"},{"content":"forms 테스트 목적 폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.\nraw HTML 예시 이름 입력 도움말은 너무 길지 않게 유지합니다. 확인 항목 라벨이 입력과 제대로 연결되는가 도움말이 입력보다 앞서거나 뒤섞이지 않는가 오류 상태가 색상만으로 표현되지 않는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/forms/","summary":"\u003ch1 id=\"forms\"\u003eforms\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e폼은 상태가 많은 UI입니다. 라벨, 힌트, 오류, 도움말이 한 덩어리로 읽혀야 하고, 시각적으로도 분리되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"raw-html-예시\"\u003eraw HTML 예시\u003c/h2\u003e\n\n\u003cform style=\"display:grid;gap:0.75rem;max-width:32rem;\"\u003e\n \u003clabel\u003e이름\n \u003cinput type=\"text\" style=\"display:block;width:100%;padding:0.6rem;border:1px solid currentColor;border-radius:0.5rem;\" /\u003e\n \u003c/label\u003e\n \u003csmall\u003e입력 도움말은 너무 길지 않게 유지합니다.\u003c/small\u003e\n\u003c/form\u003e\n\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e라벨이 입력과 제대로 연결되는가\u003c/li\u003e\n\u003cli\u003e도움말이 입력보다 앞서거나 뒤섞이지 않는가\u003c/li\u003e\n\u003cli\u003e오류 상태가 색상만으로 표현되지 않는가\u003c/li\u003e\n\u003c/ul\u003e","title":"폼"},{"content":"tables 테스트 목적 표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 가독성과 줄바꿈을 함께 확인합니다.\n예시 항목 설명 확인 row 1 짧은 값 문제가 없는가 row 2 긴 설명이 들어가는 값 줄바꿈이 자연스러운가 row 3 taxonomy / navigation 폭이 과하지 않은가 확인 항목 헤더가 분명한가 셀 간 간격이 충분한가 모바일에서 가로 스크롤이 필요하면 안내가 있는가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/30-components/tables/","summary":"\u003ch1 id=\"tables\"\u003etables\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e표는 정보 비교에 강하지만, 화면이 좁아지면 가장 쉽게 깨집니다. 표 자체보다 \u003cstrong\u003e가독성과 줄바꿈\u003c/strong\u003e을 함께 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003cth\u003e확인\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 1\u003c/td\u003e\n \u003ctd\u003e짧은 값\u003c/td\u003e\n \u003ctd\u003e문제가 없는가\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 2\u003c/td\u003e\n \u003ctd\u003e긴 설명이 들어가는 값\u003c/td\u003e\n \u003ctd\u003e줄바꿈이 자연스러운가\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003erow 3\u003c/td\u003e\n \u003ctd\u003etaxonomy / navigation\u003c/td\u003e\n \u003ctd\u003e폭이 과하지 않은가\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e헤더가 분명한가\u003c/li\u003e\n\u003cli\u003e셀 간 간격이 충분한가\u003c/li\u003e\n\u003cli\u003e모바일에서 가로 스크롤이 필요하면 안내가 있는가\u003c/li\u003e\n\u003c/ul\u003e","title":"표"},{"content":"footer 테스트 목적 푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다.\n확인 항목 정책 링크와 보조 링크가 분리되는가 복잡한 정보가 한 화면에 과밀하지 않은가 언어별 푸터 문맥이 일관적인가 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/footer/","summary":"\u003ch1 id=\"footer\"\u003efooter\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e푸터는 사이트 끝이 아니라 보조 탐색의 출발점입니다. 링크가 너무 많아도 안 되고, 너무 적어도 정보가 사라집니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e정책 링크와 보조 링크가 분리되는가\u003c/li\u003e\n\u003cli\u003e복잡한 정보가 한 화면에 과밀하지 않은가\u003c/li\u003e\n\u003cli\u003e언어별 푸터 문맥이 일관적인가\u003c/li\u003e\n\u003c/ul\u003e","title":"푸터"},{"content":"header 테스트 목적 헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다.\n확인 항목 메뉴가 너무 많아 첫 화면을 침범하지 않는가 모바일에서 메뉴가 자연스럽게 접히는가 현재 섹션이 적절히 강조되는가 기대 결과 헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/50-layout-navigation/header/","summary":"\u003ch1 id=\"header\"\u003eheader\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e헤더는 사이트의 첫 인상입니다. 브랜드, 주요 메뉴, 언어 전환, 검색 진입점이 서로 싸우지 않아야 합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e메뉴가 너무 많아 첫 화면을 침범하지 않는가\u003c/li\u003e\n\u003cli\u003e모바일에서 메뉴가 자연스럽게 접히는가\u003c/li\u003e\n\u003cli\u003e현재 섹션이 적절히 강조되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e헤더는 존재감은 분명하되, 콘텐츠보다 앞서 나가지 않아야 합니다.\u003c/p\u003e","title":"헤더"},{"content":"mixed composition 테스트 목적 실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.\n예시 먼저 개요를 읽습니다. 표로 비교합니다. shortcode로 보조 정보를 확인합니다. 이미지로 레이아웃을 검증합니다. 혼합 구성여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다.\n실패 기준 shortcode가 문단을 강제로 끊는 경우 표 뒤에 나오는 본문이 너무 붙거나 너무 멀어지는 경우 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/mixed-composition/","summary":"\u003ch1 id=\"mixed-composition\"\u003emixed composition\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.\u003c/p\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003col\u003e\n\u003cli\u003e먼저 개요를 읽습니다.\u003c/li\u003e\n\u003cli\u003e표로 비교합니다.\u003c/li\u003e\n\u003cli\u003eshortcode로 보조 정보를 확인합니다.\u003c/li\u003e\n\u003cli\u003e이미지로 레이아웃을 검증합니다.\u003c/li\u003e\n\u003c/ol\u003e\n\u003cfigure\u003e\u003cimg src=\"/images/theme-upgrade-lab/pattern.svg\"\n alt=\"혼합 구성 패턴\"\u003e\u003cfigcaption\u003e\n \u003ch4\u003e혼합 구성\u003c/h4\u003e\u003cp\u003e여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다.\u003c/p\u003e","title":"혼합 구성"},{"content":"home 테스트 목적 홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다.\n확인 항목 상단 네비게이션이 먼저 보이는가 핵심 섹션으로 바로 이동할 수 있는가 요약 정보가 첫 화면을 과하게 차지하지 않는가 카드 수가 많아져도 질서가 유지되는가 기대 결과 홈은 목록 페이지가 아니라 항해 지도처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다.\n실패 기준 홈이 단순 목록처럼 보이거나, 반대로 랜딩 페이지처럼 과도하게 장식되면 균형이 깨진 것입니다.\n","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/20-page-types/home/","summary":"\u003ch1 id=\"home\"\u003ehome\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e홈은 가장 먼저 보이는 페이지이자, 가장 적게 설명해야 하는 페이지입니다. 진입점은 분명해야 하지만 첫 화면이 너무 무거우면 안 됩니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e상단 네비게이션이 먼저 보이는가\u003c/li\u003e\n\u003cli\u003e핵심 섹션으로 바로 이동할 수 있는가\u003c/li\u003e\n\u003cli\u003e요약 정보가 첫 화면을 과하게 차지하지 않는가\u003c/li\u003e\n\u003cli\u003e카드 수가 많아져도 질서가 유지되는가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"기대-결과\"\u003e기대 결과\u003c/h2\u003e\n\u003cp\u003e홈은 목록 페이지가 아니라 \u003cstrong\u003e항해 지도\u003c/strong\u003e처럼 보여야 합니다. 가장 중요한 영역을 먼저, 나머지는 자연스럽게 아래에 배치합니다.\u003c/p\u003e","title":"홈"},{"content":"markdown extended 테스트 목적 확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.\n확인 항목 표가 좁은 화면에서 무너지지 않는가 긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가 강조와 취소선이 과도하지 않은가 예시 항목 설명 강조 중요한 문장에만 사용 취소선 변경 전후를 보여줄 때만 사용 긴 링크 본문 폭을 확인하는 엣지 케이스 ","permalink":"https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-extended/","summary":"\u003ch1 id=\"markdown-extended\"\u003emarkdown extended\u003c/h1\u003e\n\u003ch2 id=\"테스트-목적\"\u003e테스트 목적\u003c/h2\u003e\n\u003cp\u003e확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.\u003c/p\u003e\n\u003ch2 id=\"확인-항목\"\u003e확인 항목\u003c/h2\u003e\n\u003cul\u003e\n\u003cli\u003e표가 좁은 화면에서 무너지지 않는가\u003c/li\u003e\n\u003cli\u003e긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가\u003c/li\u003e\n\u003cli\u003e강조와 취소선이 과도하지 않은가\u003c/li\u003e\n\u003c/ul\u003e\n\u003ch2 id=\"예시\"\u003e예시\u003c/h2\u003e\n\u003ctable\u003e\n \u003cthead\u003e\n \u003ctr\u003e\n \u003cth\u003e항목\u003c/th\u003e\n \u003cth\u003e설명\u003c/th\u003e\n \u003c/tr\u003e\n \u003c/thead\u003e\n \u003ctbody\u003e\n \u003ctr\u003e\n \u003ctd\u003e강조\u003c/td\u003e\n \u003ctd\u003e중요한 문장에만 사용\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e취소선\u003c/td\u003e\n \u003ctd\u003e변경 전후를 보여줄 때만 사용\u003c/td\u003e\n \u003c/tr\u003e\n \u003ctr\u003e\n \u003ctd\u003e긴 링크\u003c/td\u003e\n \u003ctd\u003e본문 폭을 확인하는 엣지 케이스\u003c/td\u003e\n \u003c/tr\u003e\n \u003c/tbody\u003e\n\u003c/table\u003e","title":"확장 마크다운"}]