AncomWiki

CSS의 매직 넘버 (Magic Numbers) 이해 및 회피

Properties1
descriptionCSS에서 '매직 넘버'는 특정 환경에서만 작동하지만, 폰트 크기 변경이나 브라우저 차이 등 조건이 바뀌면 쉽게 깨지는 unnamed numerical constant(명명되지 않은 숫상수)를 의미합니다. 주로 폰트와 관련된 레이아웃 문제(고정 너비 탭, 라인 높이 조정, float 그리드 높이 동기화, 드롭다운 위치 지정, inline-block 간격 제거 등)에서 발생합니다. 이러한 값은 접근성(폰트 확대) 및 호환성 문…

4 min read

CSS의 매직 넘버 (Magic Numbers) 이해 및 회피

Source

  • Evernote/Technote scraps/Magic Numbers in CSS.md

Summary

CSS에서 ‘매직 넘버’는 특정 환경에서만 작동하지만, 폰트 크기 변경이나 브라우저 차이 등 조건이 바뀌면 쉽게 깨지는 unnamed numerical constant(명명되지 않은 숫상수)를 의미합니다. 주로 폰트와 관련된 레이아웃 문제(고정 너비 탭, 라인 높이 조정, float 그리드 높이 동기화, 드롭다운 위치 지정, inline-block 간격 제거 등)에서 발생합니다. 이러한 값은 접근성(폰트 확대) 및 호환성 문제를 유발하므로, min-width, top: 100%, font-size: 0 등 상대적 단위나 유연한 CSS 속성을 사용하여 회피해야 합니다.

Key Points

  • 정의: CSS 매직 넘버는 개발자의 특정 환경(브라우저, 폰트 설정)에서만 우연히 작동하는 고정 숫자 값으로, 유지보수성과 확장성이 낮습니다.
  • 주요 원인: 대부분 텍스트(폰트)의 크기와 밀접한 관련이 있으며, 사용자가 폰트 크기를 조정하거나 대체 폰트가 로드될 때 레이아웃이 깨집니다.
  • 대표적 사례:
    • 고정 너비(width: 100px) 탭: 텍스트 길이나 폰트 크기에 따라 잘리거나 줄바꿈 문제가 발생. (min-width 또는 overflow: hidden 권장)
    • 고정 라인 높이: 커스텀 폰트와 대체 폰트의 x-height 차이로 인해 수직 정렬이 깨짐.
    • Float 그리드의 고정 높이: 콘텐츠 양이나 폰트 크기 변화로 인해 박스 높이가 달라지고 겹침 현상 발생.
    • 절대 위치 지정(top: 37px): 부모 요소의 높이가 변하면 드롭다운 메뉴 위치가 어긋남. (top: 100% 권장)
    • Inline-block 간격 제거(margin: -4px): 폰트 종류나 크기에 따라 공백 너비가 달라져 마이너스 마진 값이 무의미해짐.
  • 해결 방향: 고정 픽셀(px) 값 대신 상대적 단위(%, em, rem)나 CSS 레이아웃 속성(min-width, top: 100%, font-size: 0 등)을 활용하여 환경 변화에 강인한 코드를 작성해야 합니다.

그래프 뷰

백링크