Reading rules

읽기 규칙

Body text is 17px on phones and 18px on wide screens with 1.8 line spacing. Tap targets are at least 44px, and lines never break in the middle of a word.

···
html
<main class="dsx"><section class="dsx-v"><p class="dsx-label"><b>본문</b>실제 렌더: KRDS Prose ruled — 시기 목록의 글자</p><div class="container"><div class="prose kp kp--ruled" data-care="stack" data-astro-cid-vp7bgmys> <h2>소고기는 이렇게 넣어요</h2><figure class="figure" data-figure-kind="timeline"><picture><source type="image/svg+xml" srcset="/packs/krds/figures/baby-food-iron-beef-2-timeline-1088688a.svg"><img src="/packs/krds/figures/baby-food-iron-beef-2-timeline-1088688a.png" alt="단계별 고기 형태. 초기(6개월부터) 완전히 익혀 곱게 갈아요, 중기(7~8개월) 0.3cm 크기로 잘게, 덩어리가 씹히지 않게, 후기(9~11개월) 0.5cm 크기로 다져요, 완료기(12개월 이후) 0.7~1cm 크기로 썰어요" width="480" height="576" loading="lazy" decoding="async"></picture><figcaption>단계별 고기 형태</figcaption></figure><h2>질감은 이렇게 단단해져요</h2><ul class="timeline">
<li><strong>6개월 무렵</strong>데쳐서 거르거나 으깬 반고형식. 숟가락에서 흘러내리지 않을 만큼 걸쭉한 게 좋아요.</li>
<li><strong>8개월 무렵</strong>손으로 음식을 집어 먹기 시작해요.</li>
<li><strong>12개월 무렵</strong>가족이 먹는 음식을 함께 먹을 수 있어요.</li>
</ul><h2>지켜보며 상담할 신호, 바로 119인 신호</h2><div class="table-scroll" role="region" tabindex="0" aria-label="표 — 옆으로 밀어서 더 볼 수 있어요">
































<table><thead><tr><th>음식을 멈추고 상담해요</th><th>바로 119에 연락해요</th></tr></thead><tbody><tr><td>두드러기, 붉고 가려운 발진</td><td>숨쉬기 힘들어하거나 숨소리가 거칠어요</td></tr><tr><td>입술이나 얼굴이 부어요</td><td>목이나 혀가 부어 보여요</td></tr><tr><td>구토, 배앓이, 설사</td><td>갑자기 축 처지거나 의식이 흐려져요</td></tr><tr><td>가벼운 기침, 재채기, 콧물·코막힘</td><td>위 증상이 몇 분 사이에 빠르게 번져요</td></tr><tr><td>눈이 붉고 가렵고 눈물이 나요</td><td></td></tr><tr><td>아토피(습진)가 심해져요</td><td></td></tr></tbody></table></div><h2>이럴 땐 병원에 가요</h2><div class="care"><section class="care-card care-card--urgent" aria-labelledby="care-1"><p class="care-card__title" id="care-1"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.63292 3.05897C5.22016 2.49982 6.00262 2.19157 6.81402 2.20038C7.63284 2.20927 8.41519 2.54035 8.99168 3.12191C9.0078 3.13818 9.01924 3.15108 9.02223 3.15445C9.02843 3.16144 9.03371 3.16762 9.03652 3.17094L9.05028 3.18755L9.07021 3.21244C9.08355 3.22926 9.10114 3.25168 9.12164 3.27791C9.16295 3.33079 9.21999 3.40424 9.287 3.49072C9.42121 3.66394 9.59761 3.89234 9.77293 4.11959C9.94833 4.34694 10.1229 4.57352 10.2537 4.74324L10.4477 4.99516C10.983 5.57396 11.2805 6.33405 11.2796 7.12354C11.2787 7.91898 10.9749 8.68386 10.4306 9.26299L9.56561 10.2902C9.99533 11.1912 10.5757 12.0136 11.2827 12.7215C11.9893 13.4289 12.8104 14.01 13.7102 14.4407L14.7368 13.5729C15.3158 13.0273 16.0812 12.7225 16.8775 12.7212C17.6676 12.7199 18.4284 13.0176 19.0075 13.5534L19.2598 13.7476C19.4297 13.8785 19.6566 14.0532 19.8843 14.2288C20.1118 14.4043 20.3405 14.5808 20.5139 14.715C20.6004 14.7821 20.6739 14.8391 20.7268 14.8803L20.7921 14.9316L20.8168 14.9514L20.8333 14.965C20.8366 14.9678 20.8424 14.9727 20.8494 14.9789C20.852 14.9813 20.8674 14.9948 20.8866 15.014C21.4704 15.6003 21.7981 16.3945 21.7984 17.2214C21.7988 18.0389 21.4793 18.8238 20.9088 19.4083L20.24 20.1784C20.2238 20.1971 20.2067 20.215 20.1888 20.2321C18.3656 21.9752 15.9338 22.1099 13.5907 21.3873C11.2544 20.6667 8.87918 19.0684 6.92205 17.1155C4.96478 15.1625 3.35982 12.7893 2.62728 10.4542C1.8932 8.11429 2.0076 5.68091 3.72662 3.85309C3.74487 3.83369 3.76407 3.81522 3.78416 3.79773L4.63292 3.05897ZM18.0009 14.7977C17.9787 14.7806 17.9573 14.7623 17.937 14.743C17.6521 14.4716 17.2735 14.3205 16.8801 14.3212C16.4866 14.3218 16.1086 14.4741 15.8245 14.7464C15.8125 14.7579 15.8001 14.7691 15.7874 14.7799L14.3599 15.9865C14.1315 16.1797 13.8144 16.2292 13.5379 16.115C12.2707 15.5913 11.1196 14.8223 10.1506 13.8521C9.18167 12.882 8.41405 11.7299 7.89191 10.462C7.77835 10.1862 7.8276 9.87021 8.01969 9.64208L9.22178 8.21449C9.23264 8.2016 9.2439 8.18905 9.25555 8.17686C9.52726 7.89274 9.67912 7.51485 9.67958 7.12167C9.68004 6.7285 9.52906 6.35026 9.25802 6.0655C9.23877 6.04527 9.22059 6.02406 9.20356 6.00194L8.98618 5.71968C8.85557 5.55013 8.6812 5.32388 8.50611 5.09693C8.33095 4.86989 8.15537 4.64254 8.02221 4.47067C7.95553 4.38461 7.90004 4.31318 7.86074 4.26286L7.82874 4.22211C7.55123 3.95563 7.18224 3.80447 6.79664 3.80028C6.39856 3.79596 6.01479 3.94862 5.72842 4.22522C5.71848 4.23482 5.70829 4.24417 5.69786 4.25324L4.86608 4.97721C3.708 6.23133 3.52538 7.97177 4.15392 9.97531C4.78868 11.9987 6.22279 14.1575 8.05219 15.9829C9.88173 17.8085 12.0408 19.2349 14.0622 19.8583C16.063 20.4754 17.8022 20.2802 19.0574 19.1001L19.7172 18.3403C19.7289 18.3268 19.7411 18.3137 19.7538 18.3009C20.0388 18.0143 20.1986 17.6264 20.1984 17.2221C20.1983 16.831 20.0483 16.455 19.7808 16.1718L19.7423 16.1416C19.6919 16.1023 19.6204 16.0468 19.5343 15.9801C19.3622 15.8469 19.1346 15.6712 18.9072 15.4958C18.68 15.3206 18.4534 15.146 18.2836 15.0153L18.0009 14.7977ZM7.85577 4.24871C7.85564 4.24858 7.8559 4.24884 7.85577 4.24871V4.24871ZM7.86687 4.25969C7.86297 4.25591 7.85925 4.25223 7.85577 4.24871L7.86687 4.25969Z" fill="currentColor"></path></svg>바로 119 · 응급실</p><ul><li><strong>바로 119</strong>: 숨쉬기 힘들어함, 목이나 혀의 부기, 축 처짐, 의식이 흐려짐</li></ul></section><section class="care-card" aria-labelledby="care-2"><p class="care-card__title" id="care-2">진료를 받아 보세요</p><ul><li><strong>빨리 진료</strong>: 두드러기가 넓게 퍼지거나 구토가 계속돼요</li><li><strong>상담 예약</strong>: 같은 음식을 먹은 뒤 증상이 반복되거나, 피부가 계속 나빠져요</li></ul></section></div><h2>언제 시작하나요</h2><ul class="contains-task-list">
<li class="task-list-item"><span class="task-check" aria-hidden="true" data-checked="false"></span>도움을 받아 앉고, 고개를 안정적으로 가눠요</li>
<li class="task-list-item"><span class="task-check" aria-hidden="true" data-checked="false"></span>음식을 입에 넣어도 뱉지 않고 삼켜요</li>
<li class="task-list-item"><span class="task-check" aria-hidden="true" data-checked="false"></span>어른이 먹을 때 입을 오물거리거나 음식을 잡아 입으로 가져가려 해요</li>
</ul><h2>단계별로 쓸 수 있는 재료</h2><blockquote>
<p>이 표는 한국건강증진개발원의 2016년 자료를 바탕으로 해요. 달걀은 노른자만, 견과류는 완료기 이후로 두고 있지만, 2026년에 갱신된 질병관리청 자료는 <strong>특별한 이유가 없으면 알레르기 유발 식품을 일부러 늦출 필요가 없다</strong>고 안내해요. 질병관리청은 쇠고기 같은 철분 식품도 <strong>초기부터</strong> 넣으라고 해요. 자세한 내용은 <a href="/baby-food-ingredient-order/">이유식 재료 순서와 시기</a>를 보세요.</p>
</blockquote> </div> </div></section><section class="dsx-v"><p class="dsx-label"><b>누르는 칸</b>실제 렌더: KRDS ProductList rows</p><div class="container gx-measure"><section class="pr pr--rows" aria-labelledby="products" data-astro-cid-qhlpuo23> <h2 id="products" class="pr__title" data-astro-cid-qhlpuo23>추천 준비물</h2> <p class="disclosure pr__disclosure" data-affiliate-disclosure data-astro-cid-qhlpuo23> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g> <path fill-rule="evenodd" clip-rule="evenodd" d="M3.6 12C3.6 7.36081 7.36081 3.6 12 3.6C16.6392 3.6 20.4 7.36081 20.4 12C20.4 16.6392 16.6392 20.4 12 20.4C7.36081 20.4 3.6 16.6392 3.6 12ZM12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM13 7.59375V13.5938H11V7.59375H13ZM13 17.0938V15.0938H11V17.0938H13Z" fill="currentColor"></path> </g></svg> <span data-astro-cid-qhlpuo23>이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.</span> </p> <ul class="pr__list" data-product-block data-astro-cid-qhlpuo23> <li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>아기 식탁 의자(하이체어)</p> <p class="pr__why" data-astro-cid-qhlpuo23>아기가 똑바로 앉아야 음식을 제대로 삼킬 수 있어요. 안전벨트가 단단히 고정되는지 확인하세요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOheHXj2" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li><li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>실리콘 이유식 스푼</p> <p class="pr__why" data-astro-cid-qhlpuo23>끝이 부드러운 이유식 전용 숟가락은 아기 잇몸에 부담이 적어요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOkvnyb6" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li><li class="pr__item" data-astro-cid-qhlpuo23>  <div class="pr__body" data-astro-cid-qhlpuo23> <p class="pr__name" data-astro-cid-qhlpuo23>이유식 냉동 큐브 용기</p> <p class="pr__why" data-astro-cid-qhlpuo23>한 번 먹을 양씩 나눠 얼리고 날짜를 적어 두면 보관 기준을 지키기 쉬워요.</p>  </div> <a class="button button--quiet pr__button" href="https://link.coupang.com/a/hNfOtEoGPc" target="_blank" rel="sponsored nofollow noopener" data-astro-cid-qhlpuo23>
쿠팡에서 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.29922 5.5002C4.29922 4.83745 4.83648 4.3002 5.49922 4.3002H11.9992V2.7002H5.49922C3.95282 2.7002 2.69922 3.9538 2.69922 5.5002V18.5002C2.69922 20.0466 3.95282 21.3002 5.49922 21.3002H18.4992C20.0456 21.3002 21.2992 20.0466 21.2992 18.5002V12.0002H19.6992V18.5002C19.6992 19.1629 19.162 19.7002 18.4992 19.7002H5.49922C4.83648 19.7002 4.29922 19.1629 4.29922 18.5002V5.5002ZM14.1992 3.5002C14.1992 3.94202 14.5574 4.3002 14.9992 4.3002H18.5678L10.4335 12.4345C10.1211 12.7469 10.1211 13.2535 10.4335 13.5659C10.746 13.8783 11.2525 13.8783 11.5649 13.5659L19.6992 5.43157V9.0002C19.6992 9.44202 20.0574 9.8002 20.4992 9.8002C20.941 9.8002 21.2992 9.44202 21.2992 9.0002V2.7002H14.9992C14.5574 2.7002 14.1992 3.05837 14.1992 3.5002Z" fill="currentColor"></path></svg> <span class="sr-only" data-astro-cid-qhlpuo23>(새 창, 광고 링크)</span> </a> </li> </ul> <p class="pr__note" data-astro-cid-qhlpuo23>상품은 이 글을 읽는 분께 실제로 필요한 것만 골랐고, 링크가 없는 항목은 준비할 때 참고하는 체크리스트예요.</p> </section> </div></section></main>
css
.dsx--one,.dsx{padding-top:34px}.timeline{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.timeline::after{content:'본문 17px(폰) / 18px · 줄 간격 1.8 · 단어 단위 줄바꿈';position:absolute;top:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.pr__button{outline:2px dashed #c2410c;outline-offset:3px;position:relative}.pr__button::before{content:'누르는 칸 44px 이상';position:absolute;bottom:calc(100% + 6px);left:0;z-index:9;font:600 11px/1.3 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;letter-spacing:0;text-transform:none;color:#fff;background:#c2410c;padding:2px 6px;white-space:nowrap;text-decoration:none}.dsx-v{padding-bottom:36px}.timeline{margin-bottom:40px}

The packs’ own body text is around 14–17px with about 1.5 line spacing. That suits English docs, but it feels cramped for long Korean health articles. So these values are fixed above the pack, and a pack cannot shrink body text to be denser.

Four things are fixed: body size (17px on phones, 18px from 768px up), line spacing 1.8, word-level line breaks (keep-all), and tap targets of 44px or more. Measuring the list text in the demo gives 17px with 30.6px lines, and the product-list button is 48px tall. Sizes of titles and of UI parts such as descriptions and button labels come from the pack; the reading rule applies only to body text.

No automated check measures this directly. It holds because the values are fixed above the pack, so a pack cannot set body size.

When to use

Think of it when building a new pack, or when one pack feels too dense. Do not shrink the text to tune density; use spacing and rules instead.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.