키워드·채널 목록 표(유형 칩)

키워드나 채널 목록에 유형 칩, 검색 규모, 경쟁 강도, 운영 방향을 붙인 표. 공략 유형 칩 하나만 강조색. 행 5~7개, 칩 유형 3~4종. 값 바꾸는 법: 유형 칩 문구 교체, 공략 유형에만 class="chip hot". 경쟁 강도는 span.lv의 class l1·l2·l3(낮음·보통·높음). 검색 지수는 최댓값 100 기준 상대값.

Medium "Data Table Design Patterns" https://medium.com/design-bootcamp/data-table-design-patterns-4e38188a0981 (표 안 막대, 칩, 정렬 규칙). 검색 도구 화면의 키워드 표(유형 꼬리표, 경쟁 강도 3칸 눈금) 구성 참고. 구성 방식만 참고, 코드와 그림은 직접 제작.

<div class="dk dk-kw"><div class="dk-card"><table>
<colgroup><col style="width:250px"><col style="width:120px"><col style="width:130px"><col style="width:150px"><col></colgroup>
<thead><tr><th>키워드</th><th>유형</th><th class="n">월 검색 지수</th><th>경쟁 강도</th><th>운영 방향</th></tr></thead>
<tbody>
<tr><td class="k">무릎 통증 병원 고르는 법</td><td><span class="chip hot">롱테일</span></td><td class="n v">38</td><td><span class="lv l1"><i></i><i></i><i></i></span><small>낮음</small></td><td class="m">블로그 상위 노출 후 검색 광고 보조</td></tr>
<tr><td class="k">관절 주사 효과 기간</td><td><span class="chip hot">롱테일</span></td><td class="n v">31</td><td><span class="lv l1"><i></i><i></i><i></i></span><small>낮음</small></td><td class="m">질문 답변형 글 2건 발행</td></tr>
<tr><td class="k">정형외과 추천</td><td><span class="chip">일반</span></td><td class="n v">100</td><td><span class="lv l3"><i></i><i></i><i></i></span><small>높음</small></td><td class="m">검색 광고 중심, 시간대별 입찰</td></tr>
<tr><td class="k">도수 치료 비용</td><td><span class="chip">일반</span></td><td class="n v">74</td><td><span class="lv l2"><i></i><i></i><i></i></span><small>보통</small></td><td class="m">비용 안내 화면 연결</td></tr>
<tr><td class="k">브랜드명</td><td><span class="chip">브랜드</span></td><td class="n v">22</td><td><span class="lv l1"><i></i><i></i><i></i></span><small>낮음</small></td><td class="m">최저 입찰로 방어</td></tr>
<tr><td class="k">경쟁 병원명 후기</td><td><span class="chip">경쟁</span></td><td class="n v">17</td><td><span class="lv l2"><i></i><i></i><i></i></span><small>보통</small></td><td class="m">비교 콘텐츠로 간접 대응</td></tr>
</tbody></table></div></div>

.dk-kw table{width:100%;border-collapse:collapse;table-layout:auto}
.dk-kw th{font-size:var(--f-cap);font-weight:600;color:var(--mu);text-align:left;padding:0 14px 10px;border-bottom:1px solid var(--line2);white-space:nowrap}
.dk-kw td{font-size:var(--f-body);color:var(--ink2);padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.4}
.dk-kw tbody tr:last-child td{border-bottom:0}
.dk-kw .n{text-align:right;font-variant-numeric:tabular-nums}
.dk-kw .c{text-align:center}
.dk-kw td.k{font-weight:600;color:var(--ink)}
.dk-kw .dk-card{padding:20px 24px 12px}
.dk-kw .chip{display:inline-block;font-size:var(--f-cap);font-weight:600;line-height:1.5;padding:2px 10px;border-radius:999px;border:1px solid var(--line2);color:var(--ink2);white-space:nowrap}
.dk-kw .chip.hot{background:var(--ac);border-color:var(--ac);color:var(--card)}
.dk-kw td.v{font-weight:700;color:var(--ink)}
.dk-kw td.m{font-size:var(--f-sm)}
.dk-kw .lv{display:inline-flex;gap:3px;vertical-align:middle;margin-right:8px}
.dk-kw .lv i{display:block;width:14px;height:8px;border-radius:2px;background:var(--g1)}
.dk-kw .lv.l1 i:nth-child(-n+1),.dk-kw .lv.l2 i:nth-child(-n+2),.dk-kw .lv.l3 i{background:var(--g4)}
.dk-kw td small{font-size:var(--f-cap);color:var(--mu)}