체크 목록 3열 × 12행(열 머리에 통과 수)

점검 항목을 3영역 × 12개로 나열하고 항목마다 통과·미통과를 표시, 열 머리에 영역별 통과 수를 큰 숫자로 놓는 표. 사이트 점검 36항목, 계정 진단 체크리스트, 인수 기준 목록에 사용. 3열 고정, 열마다 10~12행, 항목 문구 한 줄(약 14자). 가장 낮은 영역의 숫자만 강조. 값 바꾸는 법: 항목 문구 교체, 통과한 항목의 li 에 class="ok". 열 머리 숫자(strong)는 통과 수를 직접 세어 기입. 강조할 영역 하나에 div.col 에 class="hot"(숫자만 강조색). 항목은 열마다 10~12개, 문구는 한 줄. 예시의 통과 여부는 가정값.

추정 점수 대신 통과 항목 수를 세어 보이는 방식은 Google Lighthouse 감사 목록과 기술 실사 체크리스트 표기 참고. 열 머리 큰 숫자와 3열 배치, 체크 표시(CSS)는 직접 제작.

<div class="dk dk-chk36">
<div class="col"><div class="h"><div><b>SEO</b><span>검색이 읽는 것</span></div><p class="num"><strong>7</strong>/12</p></div><ul>
<li class="ok"><i></i>robots.txt 설정</li><li class="ok"><i></i>검색엔진 등록</li><li class="ok"><i></i>정본 주소 정합</li><li class="ok"><i></i>홈 주소 단일화</li><li><i></i>페이지마다 다른 제목</li><li class="ok"><i></i>소제목 h1·h2·h3</li><li><i></i>검색이 읽을 본문 분량</li><li><i></i>이미지 설명문</li><li class="ok"><i></i>사이트맵 정합</li><li><i></i>색인 가능 페이지 확장</li><li><i></i>지점·상품별 독립 페이지</li><li class="ok"><i></i>글 사이 연결 링크</li>
</ul></div>
<div class="col"><div class="h"><div><b>GEO</b><span>기계가 읽는 표기</span></div><p class="num"><strong>3</strong>/12</p></div><ul>
<li class="ok"><i></i>Organization 표기</li><li><i></i>ImageObject 표기</li><li><i></i>LocalBusiness 표기</li><li><i></i>업종 스키마 표기</li><li><i></i>Product 표기</li><li><i></i>FAQPage 표기</li><li><i></i>Article 표기</li><li><i></i>BreadcrumbList 경로</li><li><i></i>영업시간 기계 판독</li><li class="ok"><i></i>지점 주소 표기</li><li><i></i>이름·주소·전화 일치</li><li class="ok"><i></i>지도 서비스 연동</li>
</ul></div>
<div class="col hot"><div class="h"><div><b>AEO</b><span>AI가 인용할 근거</span></div><p class="num"><strong>2</strong>/12</p></div><ul>
<li><i></i>AI 안내 파일 llms.txt</li><li><i></i>첫머리 한 문장 요약</li><li><i></i>질문형 소제목</li><li><i></i>저자 표기</li><li class="ok"><i></i>게시일·수정일 표기</li><li><i></i>인용한 출처 표기</li><li class="ok"><i></i>자주 묻는 질문 페이지</li><li><i></i>남이 못 쓰는 원본 글</li><li><i></i>정기 발행 체계</li><li><i></i>언론 기사 1차 출처</li><li><i></i>AI 답변 인용 확보</li><li><i></i>지역 검색 노출</li>
</ul></div>
</div>

.dk-chk36{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.dk-chk36 .col{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 22px 12px}
.dk-chk36 .h{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:10px;border-bottom:1px solid var(--line2)}
.dk-chk36 .h b{display:block;font-size:var(--f-lg);font-weight:700;line-height:1.2}
.dk-chk36 .h span{font-size:var(--f-cap);color:var(--mu)}
.dk-chk36 .h p{margin:0;font-size:var(--f-body);color:var(--mu);line-height:1}
.dk-chk36 .h strong{font-size:var(--f-num);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-right:2px}
.dk-chk36 .hot .h strong{color:var(--ac)}
.dk-chk36 ul{list-style:none;margin:6px 0 0;padding:0}
.dk-chk36 li{display:flex;align-items:center;gap:10px;font-size:var(--f-sm);line-height:25px;color:var(--mu);border-bottom:1px solid var(--line)}
.dk-chk36 li:last-child{border-bottom:0}
.dk-chk36 li i{flex:none;position:relative;width:15px;height:15px;border-radius:3px;border:1.5px solid var(--g2)}
.dk-chk36 li.ok{color:var(--ink);font-weight:500}
.dk-chk36 li.ok i{background:var(--g4);border-color:var(--g4)}
.dk-chk36 li.ok i::after{content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;border-right:1.5px solid var(--card);border-bottom:1.5px solid var(--card);transform:rotate(45deg)}