내용은 같고 모양만 다르다

Same content, different shape

팩을 바꿔도 글 제목·설명·날짜는 그대로예요. 바뀌는 건 모양뿐이라, 팩은 언제든 갈아 끼울 수 있어요.

···
html
<div class="fx" style="--rw:390px;--h:560px"><figure class="fx-cell"><figcaption>KRDS</figcaption><div class="fx-view"><iframe title="KRDS PostCard list" srcdoc="<!doctype html><html class=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;krds&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/krds/pack.css&quot;>
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-bxkhhtcj> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-bxkhhtcj=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-bxkhhtcj> <article class=&quot;pc pc--list&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>알레르기·위생</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-dat744fk>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class=&quot;pc pc--list&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>재료·영양</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-dat744fk>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>단계별 이유식</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-dat744fk>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 6분</span> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>기관 자료 6곳</span> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>Primer</figcaption><div class="fx-view"><iframe title="Primer PostCard list" srcdoc="<!doctype html><html class=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;primer&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/primer/pack.css&quot;>
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-nmb674xz> <div class=&quot;pl__box&quot; data-astro-cid-nmb674xz> <div class=&quot;pl__head&quot; data-astro-cid-nmb674xz> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-nmb674xz=&quot;true&quot;>함께 읽으면 좋은 글</h2> <span class=&quot;pl__counter num&quot; data-astro-cid-nmb674xz>2</span> </div> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-nmb674xz> <article class=&quot;pc pc--list&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-gluaejof>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>알레르기·위생</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z&quot;></path><path d=&quot;M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z&quot;></path></g></svg>약 4분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article> <article class=&quot;pc pc--list&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-gluaejof>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>재료·영양</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z&quot;></path><path d=&quot;M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z&quot;></path></g></svg>약 4분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article>  </div> </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-gluaejof>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>단계별 이유식</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z&quot;></path><path d=&quot;M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z&quot;></path></g></svg>약 6분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof>기관 자료 6곳</span> </p> </div>  </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>Carbon</figcaption><div class="fx-view"><iframe title="Carbon PostCard list" srcdoc="<!doctype html><html class=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;carbon&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/carbon/pack.css&quot;>
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-kq2jqgu2> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-kq2jqgu2=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-kq2jqgu2> <article class=&quot;pc pc--list&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>알레르기·위생</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-xcemhkav>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span>   </p>  </div> </article> <article class=&quot;pc pc--list&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>재료·영양</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-xcemhkav>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span>   </p>  </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead pc--tile&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>단계별 이유식</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-xcemhkav>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 6분</span> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>기관 자료 6곳</span> </p> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 32 32&quot; fill=&quot;none&quot; class=&quot;pc__arrow&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;M18 6 16.57 7.393 24.15 15 4 15 4 17 24.15 17 16.57 24.573 18 26 28 16 18 6z&quot;></path></g></svg> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>shadcn/ui</figcaption><div class="fx-view"><iframe title="shadcn/ui PostCard list" srcdoc="<!doctype html><html class=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;shadcn&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/shadcn/pack.css&quot;>
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
  font:13px/1.5 -apple-system,BlinkMacSystemFont,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pls&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-bqekhtub> <h2 class=&quot;pls__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-bqekhtub=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pls__list pls__list--list&quot; data-astro-cid-bqekhtub> <article class=&quot;pk pk--list&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>알레르기·위생</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-dfgbqoqn>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span>  </p>  </div> </article> <article class=&quot;pk pk--list&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>재료·영양</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-dfgbqoqn>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span>  </p>  </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pk pk--list pk--card pk--lead&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>단계별 이유식</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-dfgbqoqn>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 6분</span> <span data-astro-cid-dfgbqoqn>기관 자료 6곳</span> </p> <p class=&quot;pk__go&quot; aria-hidden=&quot;true&quot; data-astro-cid-dfgbqoqn>
읽어 보기
<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14&quot; ></path> <path d=&quot;m12 5 7 7-7 7&quot; ></path></g></svg> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure></div><p class="legend">점선 안(제목과 설명)은 네 팩이 똑같은 글자예요. 달라지는 건 분류 이름의 자리, 구분 선, 간격, 글자 굵기 같은 모양이에요.</p>
css
body{display:block;place-items:stretch;overflow:auto;padding:12px}
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.fx-cell{margin:0;min-width:0}
.fx-cell figcaption{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin:0 0 6px}
.fx-view{position:relative;height:var(--h);overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.fx-view iframe{position:absolute;top:0;left:0;width:var(--rw);height:calc(var(--h) / var(--s, 1));border:0;transform-origin:0 0;transform:scale(var(--s,1))}body{place-items:stretch}.legend{margin:12px 0 0;font:12px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--muted)}
js
const fit=()=>document.querySelectorAll('.fx-view').forEach(v=>{v.style.setProperty('--s',Math.min(1,v.clientWidth/390))});fit();new ResizeObserver(fit).observe(document.body);

팩 네 개는 같은 컴포넌트 20개를 각자 다르게 그려요. 그런데 페이지는 어느 팩으로 빌드되는지 몰라요. 글 목록, 날짜, 링크를 계산하는 일은 페이지가 끝내고, 팩 구현에는 완성된 값만 넘겨요. 팩은 받은 값을 어떻게 보여 줄지만 정해요.

그래서 지켜지는 규칙이 몇 가지 있어요. 컴포넌트마다 받는 값의 모양은 원본 contracts.ts 한 곳에 있고, 팩 구현 파일은 그 모양을 그대로 쓴다고 registry.test.ts 가 확인해요. 빌드 한 번에는 고른 팩의 구현만 들어가서 다른 팩의 스타일이 섞이지 않아요. 위 데모가 그 결과예요. 같은 글 카드를 네 팩이 그렸는데 점선 안의 글자는 똑같아요.

이 약속 덕분에 팩을 고르는 일이 부담 없어요. 마음에 안 들면 팩 설정 하나만 바꿔 다시 빌드하면 되고, 글을 새로 쓰거나 옮길 필요가 없어요. 반대로 한 팩에서만 보이는 내용(예: 특정 팩에만 있는 문구)을 만들면 이 약속이 깨져요.

언제 쓰나

팩을 비교하다가 「이 팩에서만 이 문구가 있네」 싶을 때, 또는 새 컴포넌트를 더하면서 한 팩에만 정보를 더 넣고 싶어질 때 떠올려요. 정보를 더하려면 네 팩 모두에 같이 더해요.

페이지로 열기 ↗

항목 추가 요청

빠진 컴포넌트·변형이나 팩에서 고칠 점을 알려 주세요. 하나씩 보고 원본 팩에 반영합니다.