https://hugo-theme-test-a-1.pages.dev/ko/categories/markup-rendering/ Recent content in Markup-Rendering on SITE — SITE https://hugo-theme-test-a-1.pages.dev/social.png https://hugo-theme-test-a-1.pages.dev/social.png Hugo -- 0.147.7 ko-KR https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/built-in-shortcodes/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/built-in-shortcodes/ <h1 id="built-in-shortcodes">built-in shortcodes</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>Hugo 기본 shortcode는 문서 구조와 별개로 동작해야 합니다. figure, details, raw HTML, embed 계열이 본문 안에서 안전하게 렌더링되는지 봅니다.</p> <h2 id="예시">예시</h2> <figure><img src="https://hugo-theme-test-a-1.pages.dev/images/theme-upgrade-lab/cover.svg" alt="기본 shortcode용 그림"><figcaption> <h4>figure 예시</h4><p>이미지 shortcode가 본문 레이아웃을 깨지 않아야 합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-basic/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-basic/ <h1 id="markdown-basic">markdown basic</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>제목, 문단, 목록, 인용, 코드 블록 같은 기본 마크다운 요소가 깨지지 않고 렌더링되는지 확인합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>heading 계층이 자연스러운가</li> <li>list와 blockquote가 본문 리듬을 해치지 않는가</li> <li>inline code와 code block이 명확히 구분되는가</li> </ul> <h2 id="예시">예시</h2> <blockquote> <p>이 인용은 본문과 같은 폭 안에서 읽혀야 합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/edge-cases/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/edge-cases/ <h1 id="edge-cases">edge cases</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>UI는 정상 입력에서만이 아니라 엣지 케이스에서 얼마나 버티는지로 품질이 드러납니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>아주 긴 URL이 줄바꿈을 망치지 않는가</li> <li>한 줄짜리 강한 강조가 과도하지 않은가</li> <li>영문과 한글이 뒤섞인 긴 단어가 넘치지 않는가</li> </ul> <h2 id="예시">예시</h2> <div dir="ltr">This page keeps long URLs and English phrases readable even when the surrounding content is in Korean.</div> <div dir="rtl">이 짧은 예시는 오른쪽 방향 컨테이너도 레이아웃을 깨지 않는지 확인하기 위한 메모입니다.</div> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/theme-shortcodes/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/theme-shortcodes/ <h1 id="theme-shortcodes">theme shortcodes</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>테마 shortcode는 디자인 시스템과 연결되어야 합니다. 토큰, spacing, 색상, 레이아웃 가정을 별도로 유지하지 않는지 확인합니다.</p> <h2 id="예시">예시</h2> <div 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 &amp;lt;nil&amp;gt;" data-cta-kind="related" data-cta-intent="&lt;nil&gt;" 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="&amp;lt;nil&amp;gt;" data-analytics-event="&amp;lt;nil&amp;gt;"> <div class="cta__frame"><a class="cta__link" href="https://hugo-theme-test-a-1.pages.dev/lab/hugo-content-lab/30-components/" target="_self" rel="&amp;lt;nil&amp;gt;" aria-label="&amp;lt;nil&amp;gt;"> <span class="cta__link-inner"><span class="cta__badge"></span><span class="cta__label">다음 검증 페이지 보기</span><span class="cta__subtitle"></span></span> </a><div class="cta__support"><p class="cta__note"></p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/mixed-composition/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/mixed-composition/ <h1 id="mixed-composition">mixed composition</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>실제 글은 한 가지 마크업만 쓰지 않습니다. 문단과 표와 이미지와 shortcode가 섞여도 의미 계층이 유지되어야 합니다.</p> <h2 id="예시">예시</h2> <ol> <li>먼저 개요를 읽습니다.</li> <li>표로 비교합니다.</li> <li>shortcode로 보조 정보를 확인합니다.</li> <li>이미지로 레이아웃을 검증합니다.</li> </ol> <figure><img src="https://hugo-theme-test-a-1.pages.dev/images/theme-upgrade-lab/pattern.svg" alt="혼합 구성 패턴"><figcaption> <h4>혼합 구성</h4><p>여러 마크업이 섞여도 본문 흐름이 유지되어야 합니다.</p> https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-extended/ Mon, 01 Jan 0001 00:00:00 +0000 https://hugo-theme-test-a-1.pages.dev/ko/blog/lab/40-markup-rendering/markdown-extended/ <h1 id="markdown-extended">markdown extended</h1> <h2 id="테스트-목적">테스트 목적</h2> <p>확장 마크다운 요소가 글의 의미를 해치지 않고 잘 붙는지 확인합니다.</p> <h2 id="확인-항목">확인 항목</h2> <ul> <li>표가 좁은 화면에서 무너지지 않는가</li> <li>긴 링크와 긴 단어가 줄바꿈 정책을 깨지 않는가</li> <li>강조와 취소선이 과도하지 않은가</li> </ul> <h2 id="예시">예시</h2> <table> <thead> <tr> <th>항목</th> <th>설명</th> </tr> </thead> <tbody> <tr> <td>강조</td> <td>중요한 문장에만 사용</td> </tr> <tr> <td>취소선</td> <td>변경 전후를 보여줄 때만 사용</td> </tr> <tr> <td>긴 링크</td> <td>본문 폭을 확인하는 엣지 케이스</td> </tr> </tbody> </table>