원 안 아이콘 + 기능 세 줄

Circled icons + three features

동그라미 안 아이콘 위에 짧은 제목과 한 줄 설명을 세 칸으로 늘어놓지 않아요. 아이콘은 글자 옆의 작은 보조로만 써요.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-feat"><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">믿을 수 있어요</div><div class="dont-feat-s">정확한 정보를 전해요</div></div><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">쉽게 읽혀요</div><div class="dont-feat-s">누구나 편하게 봐요</div></div><div class="dont-feat-i"><div class="dont-feat-c"></div><div class="dont-feat-t">늘 새로워요</div><div class="dont-feat-s">꾸준히 갱신해요</div></div></div><div class="dont-note">동그라미 안의 도형 = 아이콘 자리예요. 원 안 아이콘 + 짧은 제목 + 한 줄, 가운데 정렬. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS TopicIndex index — 줄 + 작은 화살표</p><div class="dont-real"><section class="ti ti--index" aria-labelledby="topics-title" data-astro-cid-pgwj27j2> <div class="container" data-astro-cid-pgwj27j2> <h2 id="topics-title" class="ti__heading" data-astro-cid-pgwj27j2>주제별로 보기</h2> <ul class="ti__index" data-astro-cid-pgwj27j2> <li data-astro-cid-pgwj27j2> <a href="/category/stages/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>단계별 이유식</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 5편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>언제 시작하고, 단계마다 몇 번·얼마나·어떤 질감으로 먹이는지 순서대로 정리했어요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/ingredients/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>재료·영양</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 3편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>재료를 들이는 순서와 시기, 철분 챙기기, 돌 전에 피할 음식을 다뤄요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/safety/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>알레르기·위생</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 4편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>알레르기 반응을 알아보고 대처하는 법, 이유식을 안전하게 만들고 보관하는 법을 모았어요.</p> </li><li data-astro-cid-pgwj27j2> <a href="/category/habits/" data-astro-cid-pgwj27j2> <span class="ti__name" data-astro-cid-pgwj27j2>먹는 습관</span> <span class="ti__count num" data-astro-cid-pgwj27j2>글 4편</span> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g transform="rotate(-90 12 12)"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.47243 8.39766C4.80494 8.10671 5.31035 8.1404 5.60129 8.47291L11.9992 15.7848L18.3972 8.47291C18.6881 8.1404 19.1935 8.10671 19.526 8.39766C19.8585 8.6886 19.8922 9.19401 19.6013 9.52652L11.9992 18.2146L4.39717 9.52652C4.10622 9.19401 4.13992 8.6886 4.47243 8.39766Z" fill="currentColor"></path></g></svg> </a> <p class="ti__desc" data-astro-cid-pgwj27j2>이유식을 거부할 때, 손으로 집어 먹기와 자기주도 이유식을 시작할 때 참고하세요.</p> </li> </ul> </div> </section></div></section></main>
css
.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-feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;text-align:center}
.dont-feat-i{background:#fff;color:#1f2937;border-radius:10px;padding:14px 8px}
.dont-feat-c{width:40px;height:40px;margin:0 auto 8px;border-radius:50%;background:#e0e7ff;position:relative}
.dont-feat-c::after{content:"";position:absolute;inset:12px;border-radius:3px;background:#6366f1}
.dont-feat-t{font-weight:700;font-size:14px}
.dont-feat-s{margin-top:4px;font-size:12px;line-height:1.5;color:#4b5563}

색 동그라미 안에 아이콘, 그 아래 두 단어 제목, 그 아래 한 문장. 이 묶음을 세 개 나란히 놓는 것은 「우리 서비스의 특징」을 채울 때 쓰는 흔한 틀이라, 다 똑같은 AI 사이트처럼 보이게 하는 원인 중 하나예요. 게다가 아이콘이 뜻을 대신하면 읽는 사람은 글을 보기도 전에 지나가요.

일부는 기계가 막아요. check-ai-tells 는 선택자에 icon, ico, svg 가 들어간 규칙이 모서리를 동그랗게(50%, 알약 모양) 만들면 「원 안 아이콘」으로 세고, 0 이 아니면 실패해요. 하지만 「세 줄 나열」이라는 구성 자체는 기계가 알아보지 못해서, 이쪽은 갤러리에서 사람이 봐요.

대신 내용이 실제로 가진 구조를 보여 줘요. 위 오른쪽 index 는 주제 이름, 글 수, 한 줄 설명을 줄로 세우고 오른쪽 끝에 작은 화살표 하나만 둬요. 아이콘이 없어도 읽을 수 있고, 있어도 보조예요.

언제 쓰나

홈이나 소개 페이지에 「특징 세 가지」를 넣고 싶을 때 떠올려요. 특징이 정말 필요한 정보인지 먼저 묻고, 맞으면 줄이나 표로 써요.

페이지로 열기 ↗

항목 추가 요청

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