「NEW」「HOT」「추천」을 한 카드에 줄줄이 붙이지 않아요. 배지는 상태나 분류를 실제로 가를 때 카드당 하나예요.
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-card"><div class="dont-bd"><span class="dont-bd-a">NEW</span><span class="dont-bd-b">HOT</span><span class="dont-bd-c">추천</span><span class="dont-bd-d">인기</span><span class="dont-bd-e">필독</span></div><div class="dont-bd-t">이유식 알레르기 반응, 증상과 대처법</div></div><div class="dont-note">한 카드에 배지 다섯 개. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: Primer PostCard list — 분류 라벨 하나</p><div class="dont-real"><div class="container gx-measure"> <section class="pl" aria-labelledby="c-PostCard-list" data-astro-cid-nmb674xz> <div class="pl__box" data-astro-cid-nmb674xz> <div class="pl__head" data-astro-cid-nmb674xz> <h2 class="pl__title" id="c-PostCard-list" data-astro-cid-nmb674xz="true">함께 읽으면 좋은 글</h2> <span class="pl__counter num" data-astro-cid-nmb674xz>2</span> </div> <div class="pl__list pl__list--list" data-astro-cid-nmb674xz> <article class="pc pc--list" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-allergy/" data-astro-cid-gluaejof>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>알레르기·위생</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="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"></path><path d="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"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> </p> </div> </article> <article class="pc pc--list" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-gluaejof>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>재료·영양</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="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"></path><path d="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"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> </p> </div> </article> </div> </div> </section> <div class="gx-lead"><article class="pc pc--list pc--lead" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-stages-guide/" data-astro-cid-gluaejof>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>단계별 이유식</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="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"></path><path d="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"></path></g></svg>약 6분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> <span class="pc__item" data-astro-cid-gluaejof>기관 자료 6곳</span> </p> </div> </article> </div> </div></div></section></main>.dont-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
.dont-col{min-width:0}
.dont-col+.dont-col{border-left:1px dashed #a8a29e}
@media (max-width:599px){.dont-wrap{grid-template-columns:minmax(0,1fr)}.dont-col+.dont-col{border-left:0;border-top:1px dashed #a8a29e}}
@media (max-width:340px){.dont-wrap .dsx-label{display:flex}}
.dont-bad{padding:8px 16px 22px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--c-text,#1c1917)}
.dont-bad *{box-sizing:border-box}
.dont-real{padding-bottom:12px}
.dont-note{margin-top:12px;font:12px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c}
:root.dark .dont-note{color:#a59c91}
.dont-card{background:#fff;color:#1f2937;border-radius:8px;padding:14px 16px;margin-bottom:12px;font:15px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif}
.dont-card b{display:block;margin-bottom:4px}
.dont-bd{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.dont-bd span{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:700;color:#fff}
.dont-bd-a{background:#dc2626}.dont-bd-b{background:#ea580c}.dont-bd-c{background:#16a34a}.dont-bd-d{background:#2563eb}.dont-bd-e{background:#9333ea}
.dont-bd-t{font-size:17px;font-weight:700}모든 글에 NEW 와 HOT 이 붙어 있으면 어느 글도 새롭지도 인기 있지도 않아요. 배지가 많을수록 눈은 거기서 의미를 찾지 못하고 글 제목만 가려져요.
이 항목은 기계가 세지 못해요. design:audit 에도 seo:audit 에도 배지를 세는 검사가 없어서, 팩 구현을 만들 때 규칙을 지키고 갤러리에서 사람이 봐요. 그래서 팩 구현의 기준은 「카드당 많아야 하나」예요. 위 오른쪽 Primer 의 글 카드는 분류 이름이 작은 라벨 하나로만 붙어요. 라벨은 그 글이 어느 주제인지를 실제로 가르는 정보예요.
새로 배지가 필요해 보이면 먼저 이 배지가 무엇을 구분하는지 말해 봐요. 구분하는 것이 없으면 글자로 풀어요(예: 「확인일 2026.10.13」). 확인일 같은 실제 데이터가 배지보다 더 믿을 만한 신호예요.
글 카드나 상품에 「눈에 띄게 하는 표시」를 더하고 싶을 때 떠올려요. 표시가 무엇을 구분하는지 한 문장으로 못 쓰면 더하지 않아요.