CSS 실무: 긴 URL 때문에 모바일 카드가 넘칠 때

문제에서 시작하기

화면을 두 열로 나누었는데 긴 주소 하나가 카드 폭을 밀어내 모바일 페이지 전체에 가로 스크롤이 생겼다. overflow:hidden으로 숨기면 스크롤은 사라질지 몰라도 내용이나 포커스 표시까지 잘릴 수 있다. 넘침이 어디에서 시작되는지 그리드 트랙, 아이템, 텍스트 세 단계로 나눠 확인한다.

그림. 각 속성이 작동하는 범위를 구분했다. 페이지 전체를 숨겨 가로 넘침을 덮지 않고 내용 유형에 맞게 처리한다. Devin.KR이 직접 제작한 학습용 SVG 개념도입니다. 이미지를 선택하면 크게 볼 수 있습니다.

학습 목표와 선수지식

선택자와 박스 모델을 알고 있다고 가정한다. minmax(0, 1fr), min-width:0, overflow-wrap의 역할을 서로 구분하고 좁은 화면에서 단일 열로 전환한다.

실행 환경

현대 브라우저에서 grid-overflow.html을 연다. 개발자 도구의 뷰포트를 320px·768px로 바꾸고 200% 확대도 확인한다. 외부 글꼴·이미지·라이브러리를 사용하지 않는다.

직접 실행하기

grid-overflow.html에 저장한다.

<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>그리드 넘침 연습</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; font-family: sans-serif; line-height: 1.6; }
main { max-width: 960px; margin: auto; padding: 16px; }
.cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.card { min-width: 0; padding: 16px; border: 1px solid #64748b; border-radius: 8px; }
.card a { overflow-wrap: anywhere; color: #1450a3; }
.card pre { max-width: 100%; overflow-x: auto; background: #eef2f6; padding: 8px; }
a:focus-visible { outline: 3px solid #1450a3; outline-offset: 3px; }
@media (max-width: 600px) { .cards { grid-template-columns: minmax(0, 1fr); } }
</style>
<main>
  <h1>자료 목록</h1>
  <div class="cards">
    <article class="card">
      <h2>긴 주소</h2>
      <a href="#target">https://example.invalid/articles/abcdefghijklmnopqrstuvwxyz0123456789abcdefghijklmnopqrstuvwxyz0123456789</a>
    </article>
    <article class="card" id="target">
      <h2>코드는 자체 영역에서 스크롤</h2>
      <pre tabindex="0" aria-label="가로 스크롤 가능한 코드 예제"><code>SELECT article_id, article_title, source_url FROM published_articles ORDER BY article_id DESC;</code></pre>
    </article>
  </div>
</main>
</html>

예상 결과

320px: 카드 1열, URL 줄바꿈, 페이지 전체 가로 넘침 없음
768px: 카드 2열, 긴 코드는 코드 영역에서만 가로 스크롤

코드를 읽는 순서

CSS Grid 명세에서 자동 최소 크기는 내용의 최소 크기에 영향을 받을 수 있다. 1fr만 써도 무조건 긴 문자열이 원하는 폭으로 줄어든다고 단정할 수 없다. 이 예제는 트랙의 최소를 0으로 명시하고 아이템에도 최소 너비를 0으로 둔다.

minmax(0, 1fr)는 열이 남은 공간을 나누면서 내용에 의해 최소 폭이 커지는 상황을 줄인다. min-width:0은 그 안의 카드가 줄어들 수 있다는 별도 선언이다. 어느 한 줄만 모든 레이아웃의 정답이라고 외우기보다 개발자 도구로 트랙과 아이템의 실제 폭을 구분해 본다.

URL은 사람이 읽는 연결 정보이므로 anywhere로 필요할 때 긴 문자열을 끊는다. 반면 코드는 줄바꿈으로 의미나 가독성이 나빠질 수 있어 pre 안에서만 가로 스크롤을 허용했다. 페이지 전체가 스크롤되는 것과 제한된 코드 영역이 스크롤되는 것은 다르다.

600px 이하에서는 한 열로 바꾼다. 특정 휴대전화 이름에 맞춘 분기라기보다 두 카드의 내용이 답답해지기 전 배치 전환점으로 정한 값이다. 실제 디자인에서는 번역 길이·글자 확대·폼 요소까지 포함해 이 지점을 조정한다.

검증할 때는 document.documentElement.scrollWidth와 clientWidth를 비교해 전체 페이지의 넘침을 찾고, 실제로 링크 포커스와 코드 스크롤이 가능한지도 본다. 숫자만 같아도 내용이 overflow:hidden으로 잘렸을 수 있기 때문이다.

흔한 오류와 반례

body에 overflow-x:hidden을 붙여 문제를 덮으면 잘린 내용이 남을 수 있다.
word-break:break-all을 모든 문장에 쓰면 일반 단어도 불필요하게 끊긴다. 긴 URL처럼 필요한 범위에 적용한다.
고정 너비 이미지나 입력칸이 추가되면 다른 넘침 원인이 생긴다. 이번 코드가 이후 모든 자식 요소를 자동으로 고쳐 주는 것은 아니다.

연습문제

코드 영역에 overflow-x:auto를 없애 보고 페이지 넘침과 내용 표시가 어떻게 달라지는지 기록하라. 모든 텍스트를 숨기는 방식으로 고치지 말고, 320px에서 URL 전체를 읽고 링크에 키보드 포커스를 줄 수 있는지 확인하라.

정답과 해설

pre의 긴 줄이 자신의 상자 밖으로 그려질 수 있다. 다시 overflow-x:auto를 적용해 코드 영역의 스크롤로 범위를 한정한다. URL은 anywhere 덕분에 전체가 여러 줄로 보이고, Tab으로 링크와 코드 영역에 접근할 수 있어야 한다. 공개 전 실제 브라우저와 확대 배율에서 다시 검토한다.

참고자료와 작성 정보

W3C CSS Grid 자동 최소 크기

Devin.KR AI 작성 · 2026-09-12. 독립적으로 작성한 설명과 가상 데이터 예제다. 실행 결과와 경계 조건을 검증했으며, 공개 전 편집 검토 대상이다. 특정 서적의 번역·발췌·요약본이 아니다.