전부 가운데 정렬

Everything centered

제목, 본문, 홈 머리, 404 모두 왼쪽 정렬이에요. 가운데에 큰 숫자 404 만 놓인 화면도 만들지 않아요.

···
html
<main class="dont-wrap"><section class="dont-col"><p class="dsx-label"><b>하지 않는 것</b>설명용으로 그린 예</p><div class="dont-bad"><div class="dont-404"><div class="dont-404-n">404</div><div class="dont-404-t">길을 잃으셨나요?</div><span class="dont-404-b">홈으로</span></div><div class="dont-note">가운데에 큰 숫자 하나. 하지 않아요.</div></div></section><section class="dont-col"><p class="dsx-label"><b>대신</b>실제 렌더: KRDS NotFound simple — 왼쪽 정렬</p><div class="dont-real"><section class="nf nf--simple" data-astro-cid-ejhamjt5> <div class="container nf__inner" data-astro-cid-ejhamjt5> <p class="nf__code num" data-astro-cid-ejhamjt5>404 · 페이지 없음</p> <h1 class="nf__title" data-astro-cid-ejhamjt5>페이지를 찾을 수 없어요</h1> <p class="nf__desc" data-astro-cid-ejhamjt5>주소가 바뀌었거나 없어진 글이에요. 홈에서 주제별로 다시 찾아볼 수 있어요.</p> <a class="button nf__home" href="/" data-astro-cid-ejhamjt5>
홈으로 가기
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><path fill-rule="evenodd" clip-rule="evenodd" d="M15.5238 16.0225C15.2048 16.3282 15.1941 16.8346 15.4998 17.1536C15.8055 17.4726 16.3119 17.4834 16.6309 17.1777L22.0336 12.0001L16.6309 6.82251C16.3119 6.51681 15.8055 6.52758 15.4998 6.84657C15.1941 7.16557 15.2048 7.67199 15.5238 7.97769L18.8857 11.1995L2.8 11.1995C2.35817 11.1995 2 11.5577 2 11.9995C2 12.4413 2.35817 12.7995 2.8 12.7995L18.8869 12.7995L15.5238 16.0225Z" fill="currentColor"></path></svg> </a> <div class="nf__latest" data-astro-cid-ejhamjt5> <section class="pl" aria-labelledby="nf-latest" data-astro-cid-bxkhhtcj> <h2 class="pl__title" id="nf-latest" data-astro-cid-bxkhhtcj="true">새로 올라온 글</h2> <div class="pl__list pl__list--number" data-astro-cid-bxkhhtcj> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>01</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-allergy/" data-astro-cid-dat744fk>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>알레르기·위생</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>02</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-dat744fk>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>재료·영양</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class="pc pc--number" data-astro-cid-dat744fk> <span class="pc__no num" aria-hidden="true" data-astro-cid-dat744fk>03</span>  <div class="pc__body" data-astro-cid-dat744fk>  <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-iron-beef/" data-astro-cid-dat744fk>이유식 소고기 언제부터? 철분 챙기는 법 총정리</a> </h3>  <p class="pc__meta num" data-astro-cid-dat744fk> <span class="pc__cat-inline" data-astro-cid-dat744fk>재료·영양</span> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 5분</span>   </p> </div> </article>  </div> </section>  </div> </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-404{text-align:center;padding:26px 8px}
.dont-404-n{font-size:84px;font-weight:800;line-height:1;color:#c7c2ba}
.dont-404-t{margin-top:10px;font-size:20px;font-weight:700}
.dont-404-b{display:inline-block;margin-top:16px;padding:9px 22px;border-radius:999px;background:#4f46e5;color:#fff;font-weight:700}

가운데 정렬은 짧은 문구에는 단정해 보이지만, 여러 줄이 되면 줄마다 시작점이 달라져 읽기 힘들어요. 전부 가운데에 놓인 화면은 AI 가 만든 랜딩 페이지와 404 의 흔한 모습이기도 해요. 읽는 글이 중심인 이 사이트들에서는 왼쪽 정렬이 기본이에요.

기계가 막아요. check-ai-tells 가 빌드 결과의 스타일에서 가운데 정렬(text-align: center)을 가진 규칙을 세고, 0 이 아니면 실패해요. 본문, 제목, 홈 머리, 404 어디서든 팩이 가운데 정렬을 쓸 수 없어요.

404 는 규칙이 더 분명해요. 큰 숫자만 있는 화면 대신, 작은 「404 · 페이지 없음」, 「페이지를 찾을 수 없어요」 제목, 한 줄 설명, 홈으로 가는 버튼, 새로 올라온 글을 왼쪽에서부터 차례로 보여 줘요. 길을 잃은 사람이 다음에 갈 곳을 찾을 수 있게요.

언제 쓰나

404 나 빈 화면을 「귀엽게」 꾸미고 싶을 때, 또는 짧은 문구를 가운데에 놓고 싶어질 때 떠올려요. 가운데 정렬 대신 왼쪽 정렬과 여백으로 정리해요.

페이지로 열기 ↗

항목 추가 요청

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