꾸미기 순서가 저도 모르게 뒤바뀌어 있었다

큰 제목 아래에 여백을 넣었는데 화면에서는 여백이 없었습니다. 브라우저에 물어보니 여백이 0이라고 답했습니다.

화면을 꾸미는 규칙은 분명히 붙어 있는데, 그중 어느 것도 실제로 쓰이지 않고 있었습니다.

무슨 일이 있었나

웹에서는 여러 규칙이 같은 곳을 동시에 꾸미려 할 때가 많습니다. 그럴 때는 줄을 세워서 뒤에 선 쪽이 이기게 되어 있습니다.

저는 줄 순서를 이렇게 적어 뒀습니다.

기본 정리 → 색과 크기 값 → 바탕 스타일 → 부품 스타일

그런데 이 순서는 제가 적은 명단대로 정해지지 않습니다. 실제로는 파일에 먼저 나타난 순서대로 정해집니다.

코드를 하나로 묶어 주는 도구가 부품 스타일을 명단보다 먼저 내보냈습니다. 그러자 부품이 앞줄로 가고, 뒤에 선 '기본 정리'가 이겨 버렸습니다.

'기본 정리'에는 모든 요소의 여백을 없앤다 는 규칙이 들어 있습니다. 그래서 제가 넣은 여백이 매번 지워지고 있었습니다.

에러도 경고도 없었습니다. 그냥 조용히 안 됐습니다. 전에 화면 사진을 보고 괜찮다고 넘어간 페이지도 이미 같은 상태였습니다.

어떻게 고쳤나

부품 스타일을 줄에서 아예 빼냈습니다. 줄에 서지 않은 규칙은 줄 선 규칙을 전부 이기게 되어 있습니다. 이러면 도구가 어떤 순서로 내보내든 상관이 없어집니다.

그리고 같은 일이 다시 생기면 알아차리도록 검사기를 하나 만들었습니다. 완성된 파일을 열어서 줄 순서가 제가 적은 명단과 같은지 확인합니다.

조용히 틀리는 문제는, 지켜보는 장치가 없으면 영원히 조용합니다.