Reference

youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다. 가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다. ...

youtube shortcode youtube는 YouTube 영상을 본문에 임베드하는 shortcode입니다. 가장 익숙한 외부 영상 임베드 중 하나이며, 튜토리얼, 발표 자료, 쇼케이스 페이지에서 자주 쓰입니다. ...

x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다. 과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다. 공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4 ...

x shortcode x는 X 포스트를 본문에 임베드하는 shortcode입니다. 과거 Twitter 임베드와 비슷한 역할을 하지만, 현재는 X 서비스 설정을 함께 고려해야 합니다. 공식 문서에는 user, id 조합의 예시와 함께 privacy.x.disable, privacy.x.enableDNT, privacy.x.simple, 그리고 services.x.disableInlineCSS 설정이 안내되어 있습니다. citeturn791175view3turn241043view4 ...

vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다. 튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다. ...

vimeo shortcode vimeo는 Vimeo 영상을 본문에 임베드하는 shortcode입니다. 튜토리얼, 강의, 데모 영상처럼 영상 자료를 본문에서 바로 보여 주고 싶을 때 사용합니다. ...

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

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

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

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

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

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

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

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

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

relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다. ref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다. ...

relref shortcode relref는 대상 페이지까지의 상대 permalink를 만들어 주는 shortcode입니다. ref와 문법은 거의 비슷하지만, 결과가 상대 경로라는 점이 다릅니다. ...

ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다. 문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다. ...

ref shortcode ref는 특정 페이지를 가리키는 permalink를 만들어 주는 shortcode입니다. 문서 내부 링크를 직접 하드코딩하지 않고, 페이지 참조를 기준으로 링크를 만들고 싶을 때 유용합니다. ...

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

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

qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다. 짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다. ...

qr shortcode qr은 본문 안의 텍스트를 QR 코드 이미지로 바꿔 주는 shortcode입니다. 짧은 링크, 전화번호, 연락처, 등록 URL 같은 정보를 빠르게 전달하고 싶을 때 적합합니다. ...

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

param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다. 문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다. ...

param shortcode param은 front matter나 site configuration에 저장된 값을 본문 안으로 꺼내오는 shortcode입니다. 문구를 여러 페이지에 반복하지 않으려면, 이 방식이 생각보다 강력합니다. ...

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

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

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

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

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

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

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

instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다. 정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다. ...

instagram shortcode instagram은 Instagram 게시물을 본문 안에 임베드하는 shortcode입니다. 정적 사이트에서는 소셜 임베드가 외부 서비스 의존성을 만들기 쉬우므로, 어떤 설정이 렌더링에 영향을 주는지 함께 보는 것이 중요합니다. ...

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

Hugo 기본 shortcode 아카이브 이 폴더는 Hugo가 기본으로 제공하는 embedded shortcode를 실무 관점에서 다시 정리한 실습 묶음입니다. Hugo의 공식 문서에는 embedded shortcode로 details, figure, highlight, instagram, param, qr, ref, relref, vimeo, x, youtube가 안내되어 있습니다. 이 아카이브는 그 11개를 모두 다루며, 각 shortcode마다 다음을 함께 봅니다. ...

highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다. Markdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다. ...

highlight shortcode highlight는 코드를 syntax highlight가 적용된 HTML로 바꿔 주는 shortcode입니다. Markdown에서는 기본 fenced code block만으로도 충분한 경우가 많지만, 인라인 코드 조각을 강조하거나 하이라이트 옵션을 세밀하게 통제하고 싶을 때 유용합니다. ...

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

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

figure shortcode figure는 <figure>, <img>, <figcaption> 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다. 이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다. 공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1 ...

figure shortcode figure는 <figure>, <img>, <figcaption> 구조를 한 번에 만들고 싶을 때 쓰는 shortcode입니다. 이미지 본문, 캡션, 출처, 링크를 하나의 단위로 묶기 좋습니다. 공식 문서 기준으로 src, alt, width, height, loading, class, link, target, rel, title, caption, attr, attrlink를 사용할 수 있습니다. src는 이미지 경로, caption은 설명, attr과 attrlink는 출처 표기에 특히 유용합니다. 문서에는 내부 리소스, 전역 리소스, 원격 주소를 모두 지원한다고 설명되어 있습니다. citeturn791175view5turn241043view1 ...

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

embedded shortcode 이 섹션은 Hugo 공식 문서의 embedded shortcode를 실습용으로 다시 구성한 페이지 묶음입니다. 분류 기준 구조형: details, figure 서식형: highlight 데이터형: param 유틸리티형: qr 참조형: ref, relref 외부 임베드형: instagram, vimeo, x, youtube 공통 원칙 모든 페이지에서 다음 형식을 지킵니다. ...

details shortcode details는 HTML의 <details> / <summary> 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다. ...

details shortcode details는 HTML의 <details> / <summary> 요소를 본문 안에 안전하게 넣을 수 있게 해 주는 shortcode입니다. 긴 설명, 보조 문서, 선택형 안내, FAQ 같은 콘텐츠에 잘 맞습니다. ...

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

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

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

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

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

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

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

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

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

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

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

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

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

92 Hugo shortcode lab 이 섹션은 themes/1/layouts/_shortcodes/readme/의 구조를 따라 만든 테스트 포스트 모음입니다. built-in/ custom/

92 Hugo shortcode custom 이 섹션은 themes/1/layouts/_shortcodes/readme/custom/의 계약을 기준으로 만든 테스트 포스트 모음입니다. ...

92 Hugo shortcode built-in 이 섹션은 themes/1/layouts/_shortcodes/readme/built-in/의 계약을 기준으로 만든 테스트 포스트 모음입니다. ...