기발자의 개발 노트

kitchen 공간을 볼 때마다 스팀기와 관련된 한 가지 추억(?)이 떠오른다. 당시 스팀기를 배치하기 위해 absolute 속성값을 적용하고 top, left, margin-left 속성으로 정렬 작업을 진행했다. 속성값을 입력하고 결과를 확인했더니 스팀기가 사라져 버렸다.

무엇이 문제인지 몰라 코드를 여기저기 뒤져 봤지만 도무지 알 수 없었다. top, left, margin-left 속성을 제거하면 스팀기가 정상으로 출력되다 해당 속성만 입력하면 사라져 버렸다. 두 시간 넘게 원인을 찾아 헤매었지만 결국 찾지 못하고 작업을 접어야 했다.

다음날 다시 문제를 해결하기 위해 index.html 파일을 실행했는데 스팀기가 로고 위쪽에 떡하니 배치되어 있었다.

스팀기가 사라진 이유는 kitchen 공간을 relative 속성값으로 감싸지 않았기 때문이다. 이때 처음으로 부모 자식 간 position 속성의 상관관계를 인지하기 시작했다.

이 문제를 겪은 후 한동안 모든 부모에게 relative 속성값을 남발하듯 사용했다. 앞서 position 속성의 중요성을 여러 차례 강조한 이유도 이때 겪은 일이 트라우마로 남았기 때문이다. 다시 한 번 강조하지만 position 속성은 정말 중요한 개념이다. 가능하면 모든 경우의 수를 살펴보기 바란다.