‘It works on My Machine’가 코드 버그가 아니라 커뮤니케이션 버그인 이유

Source: Dev.to

깨진 코드

body {
  margin: 40px auto; 
  text-align: center;
}

결과: 왼쪽 정렬. 왜?

해결책: margin: auto는 너비가 필요함

margin: auto는 남은 가로 공간을 균등하게 나눕니다. 요소에 width: 100%가 설정돼 있으면 남는 공간이 0이므로 나눌 것이 없습니다.

수정된 CSS

body {
  width: 90%;           /* 남는 공간을 생성 */
  max-width: 600px;     /* 너무 넓어지는 것을 방지 */
  margin: 40px auto;    /* 이제 가운데 정렬 */
  text-align: center;
}

고객에게 설명하는 방법

오븐만큼 넓은 베이킹 트레이는 가운데에 놓일 수 없습니다. “chapati”(빵)를 width: 90%로 줄이면 margin: auto가 가운데로 밀어줍니다.

버그를 고치는 다른 방법들

컴포넌트를 위한 Flexbox

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

전체 페이지를 위한 Grid — 한 줄 코드

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

디버그 체크리스트

DevTools → Computed 탭에서 확인:

1. width: auto인가요? width: 90% 혹은 600px 같은 고정 너비를 추가합니다.
2. display: inline인가요? block으로 변경합니다.
3. 수직 중앙 정렬을 원한다면: 부모 요소에 높이가 있나요?

라이브 데모

Live demo of my page