매체 표식 칩 12종(글자와 색 점)

표나 도식 안에서 매체를 구분할 때 로고 그림 대신 쓰는 작은 칩. 색 점과 매체 이름으로만 구성. 한 장에 3~8개, 크기는 한 장 안에서 한 가지로. 문장 속에는 쓰지 않고 표의 칸, 도식의 꼬리표 자리에만. 값 바꾸는 법: 칩 하나: <span class="mc m-키"><i></i>매체 이름</span>. 키: naver kakao google meta insta youtube tiktok x linkedin coupang daangn toss. 작은 크기는 class 에 sm 추가. 새 매체는 .dk-icm .m-키 i{background:색} 한 줄을 더함. 덱에 넣을 때는 .mc 관련 CSS 만 가져가고 견본 격자는 뺌.

매체 운영 보고서와 미디어 믹스 표에서 매체를 색 점과 이름으로 구분하는 범례 표기. 로고 그림은 쓰지 않고 각 플랫폼의 대표색만 점으로 사용(이 조각에 한해 색을 직접 적음). 직접 제작.

<div class="dk dk-icm">
  <div class="set">
    <div class="row"><p>검색·포털</p><div><span class="mc m-naver"><i></i>네이버</span><span class="mc m-kakao"><i></i>카카오</span><span class="mc m-google"><i></i>구글</span></div></div>
    <div class="row"><p>소셜·영상</p><div><span class="mc m-meta"><i></i>메타</span><span class="mc m-insta"><i></i>인스타그램</span><span class="mc m-youtube"><i></i>유튜브</span><span class="mc m-tiktok"><i></i>틱톡</span><span class="mc m-x"><i></i>X</span><span class="mc m-linkedin"><i></i>링크드인</span></div></div>
    <div class="row"><p>커머스·지역·금융</p><div><span class="mc m-coupang"><i></i>쿠팡</span><span class="mc m-daangn"><i></i>당근</span><span class="mc m-toss"><i></i>토스</span></div></div>
    <div class="row"><p>작은 크기</p><div><span class="mc m-naver sm"><i></i>네이버</span><span class="mc m-kakao sm"><i></i>카카오</span><span class="mc m-google sm"><i></i>구글</span><span class="mc m-meta sm"><i></i>메타</span><span class="mc m-youtube sm"><i></i>유튜브</span></div></div>
  </div>
  <div class="dk-card ex">
    <p class="dk-lb mu">표 안에서 쓰는 예</p>
    <table>
      <tr><td><span class="mc m-naver"><i></i>네이버</span></td><td>브랜드 검색 첫 화면 정리</td><td class="num">40%</td></tr>
      <tr><td><span class="mc m-meta"><i></i>메타</span></td><td>관심사 기반 신규 유입</td><td class="num">25%</td></tr>
      <tr><td><span class="mc m-youtube"><i></i>유튜브</span></td><td>15초 소재로 인지 확보</td><td class="num">20%</td></tr>
      <tr><td><span class="mc m-daangn"><i></i>당근</span></td><td>매장 반경 지역 노출</td><td class="num">15%</td></tr>
    </table>
  </div>
</div>

.dk-icm{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:48px;align-items:center}
.dk-icm .mc{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px 0 10px;border:1px solid var(--line2);border-radius:999px;background:var(--card);font-size:var(--f-sm);font-weight:600;color:var(--ink);white-space:nowrap}
.dk-icm .mc i{width:9px;height:9px;border-radius:50%;background:var(--g3);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.dk-icm .mc.sm{height:24px;padding:0 10px 0 8px;gap:6px;font-size:var(--f-cap)}
.dk-icm .mc.sm i{width:7px;height:7px}
.dk-icm .m-naver i{background:#03C75A}
.dk-icm .m-kakao i{background:#FEE500}
.dk-icm .m-google i{background:#4285F4}
.dk-icm .m-meta i{background:#0866FF}
.dk-icm .m-insta i{background:#E1306C}
.dk-icm .m-youtube i{background:#FF0000}
.dk-icm .m-tiktok i{background:#111111}
.dk-icm .m-daangn i{background:#FF6F0F}
.dk-icm .m-coupang i{background:#E52528}
.dk-icm .m-x i{background:#111111}
.dk-icm .m-linkedin i{background:#0A66C2}
.dk-icm .m-toss i{background:#0064FF}
.dk-icm .row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;min-height:74px;padding:14px 0;border-bottom:1px solid var(--line)}
.dk-icm .row:first-child{border-top:1px solid var(--line2)}
.dk-icm .row:last-child{border-bottom-color:var(--line2)}
.dk-icm .row p{margin:0;font-size:var(--f-sm);font-weight:600;color:var(--mu)}
.dk-icm .row>div{display:flex;flex-wrap:wrap;gap:8px}
.dk-icm .ex{padding:24px 28px}
.dk-icm table{width:100%;margin-top:6px;border-collapse:collapse}
.dk-icm td{padding:13px 0;border-bottom:1px solid var(--line);font-size:var(--f-sm);color:var(--ink2)}
.dk-icm tr:last-child td{border-bottom:0}
.dk-icm td:first-child{width:128px}
.dk-icm td:last-child{text-align:right;font-size:var(--f-body);font-weight:700;color:var(--ink)}