자주 하는 실수

증상으로 찾기

앞의 단원들이 각 주제의 실수를 다뤘습니다. 이 단원은 반대로 증상에서 출발합니다. 화면이 이상할 때 어디부터 볼지 정리합니다.

옛 코드를 읽을 때 만나는 것들도 함께 다룹니다.

증상 1 — 가로로 밀립니다

좁은 화면에서 좌우로 스크롤이 생기는 것은 어딘가에 화면보다 넓은 요소가 있다는 뜻입니다. 흔한 원인이 넷입니다.

범인을 찾는 방법이 있습니다. 개발자 도구 콘솔에 아래를 붙여 넣으면 넘치는 요소에 빨간 테두리가 그려집니다.

document.querySelectorAll("*").forEach(el => {
  if (el.offsetWidth > document.documentElement.clientWidth)
    el.style.outline = "2px solid red";
});

증상 2 — 여백이 사라졌습니다

2.9 의 여백 상쇄입니다. 값을 키워도 늘어나지 않는다면 이것입니다.

<div class="outer bad">
  <p>부모 밖으로 여백이 새어 나갑니다</p>
</div>

<div class="outer ok">
  <p>padding 이 있어 새지 않습니다</p>
</div>

.outer { background: #ece7fb; margin-bottom: 14px; }
.outer p { margin: 20px 0; }

/* 자식의 위 여백이 부모를 밀고 나갑니다 */
.bad { }

/* 안쪽 여백이 1px 만 있어도 막힙니다 */
.ok { padding: 1px 10px; }

막는 방법은 부모에 padding 이나 border 를 두는 것입니다. 부모를 display: flex 로 만들어도 상쇄가 일어나지 않습니다.

가장 단순한 예방은 여백을 한 방향으로만 주는 것입니다 — 아래 여백만 사용하면 마주칠 일이 거의 없습니다.

증상 3 — 규칙이 안 먹습니다

1. 개발자 도구에서 줄이 그어졌는지 봅니다(5.4). 그어졌으면 명시도 문제입니다(2.8).
2. 규칙이 아예 목록에 없으면 선택자가 그 요소를 못 고른 것입니다. 오타나 빈칸을 확인하십시오(2.2).
3. 선언 하나만 안 들면 윗줄의 세미콜론을 확인하십시오(2.1).
4. 값에 단위가 있는지 봅니다(2.4).
5. CSS 파일 자체가 안 왔을 수도 있습니다. 콘솔 탭을 보십시오(5.4).

증상 4 — z-index 가 안 듣습니다

3.7 의 쌓임 맥락입니다. 값을 키우는 대신 조상 가운데 무리를 만든 것을 찾으십시오. opacity·transform· position + z-index 가 그것입니다.

옛 코드에서 만나는 것들

오래된 코드를 읽다 보면 지금 쓰지 않는 방식이 나옵니다. 고쳐 쓰기 전에 무엇을 하려던 것인지 알아야 합니다.

float 는 지금도 한 가지 쓸모가 남아 있습니다 — 글이 그림을 감싸고 흐르게 하는 것입니다. 그것이 원래 용도이고, 배치는 아닙니다.

고치는 방법의 실수

• 값을 계속 키웁니다. z-index: 9999, margin: 100px. 원인을 찾지 않은 채 덮는 것이라 나중에 더 큰 문제가 됩니다.
• !important 로 끝냅니다. 그 자리를 다음에 고칠 사람이 또 !important 를 쓰게 됩니다(2.8).
• 넓은 화면에서만 확인합니다. 320px 에서 한 번 보는 것으로 대부분의 넘침을 미리 잡을 수 있습니다.

직접 해보기

.wrap  { width: 960px; margin: 0 auto; }
.hero  { width: 100vw; }
.table { width: 100%; }
.thumb { width: 400px; }

정리

• 가로로 밀리면 고정 폭 · 100vw · 넓은 표 · 긴 글자를 봅니다.
• 여백이 사라지면 상쇄입니다. 부모에 padding 을 두거나 한 방향만 사용합니다.
• 규칙이 안 먹으면 개발자 도구에서 줄이 그어졌는지부터 봅니다.
• 값을 키우거나 !important 로 덮지 말고 원인을 찾으십시오.