기발자의 개발 노트

알다시피 Day 07~09는 난이도가 꽤 높다. 특히 position 속성은 속성값에 따라 ①부모 자식 간에 발생하는 마진 병합 현상, ② top, right, bottom, left 속성 적용 유무, ③ 자식의 높이가 부모에게 영향을 미치는지 아닌지 등 세 가지 경우의 수를 대입해서 살펴봐야 하므로 시간이 오래 걸린다.

기존 책이나 온라인 강의에서는 position 속성의 속성값을 절대 위치와 상대 위치 개념으로만 소개할 뿐 다양한 경우의 수를 설명하지 않아 이해하는 데 어려움을 겪었다.

필자의 경우 키즈가오 웹 사이트 제작 당시 HTML 태그의 두 가지 혈액형과 position 속성의 속성값이 갖고 있는 특징을 전혀 모르는 상태에서 제작을 진행했다. 그래서 원하는 위치에 항목을 배치하는 것도 쉽지 않았고, 위치가 조금만 어긋나도 전체 레이아웃이 틀어지는 문제가 자주 나타났다. 수많은 시행착오 덕분에 이러한 개념을 실전에서 익힐 수밖에 없었고 3개월가량 고생한 끝에 비로소 필자만의 공식을 찾을 수 있었다.

position 속성은 다양한 경우의 수를 코드로 직접 입력하면서 학습하는 방식을 추천한다. 예를 들어 부모-자식 관계를 바탕으로 경우의 수를 정리하면 부모의 position 4가지 X 자식의 position 4가지 X 앞에서 언급한 3가지 특징까지 조합하여 총 48가지 경우의 수를 전부 살펴보는 것이 좋다.

경우의 수 48가지가 부담스럽다면 경우의 수를 조금 줄일 수 있다. 보통 부모의 position 속성의 속성값으로 fixed나 absolute를 적용하는 경우는 드물다. 또한 특별한 경우를 제외하면 자식으로 fixed 속성값을 사용하는 경우는 없다. 그럼 경우의 수가 부모의 position 2가지 X 자식의 position 3가지 X 앞에서 언급한 3가지 특징을 조합하여 18가지로 줄어든다. 이 정도면 충분히 도전해 볼 만하다.

부모-자식 관계의 경우의 수를 모두 살펴봤다면 형제 관계의 경우의 수도 살펴보길 바란다. 여기까지 살펴보면 키즈가오 레이아웃 작업을 하면서 필자가 제시하는 코드 외에도 여러분만의 공식으로 배치 작업을 진행할 수 있을 것이다.

한 가지를 더 추가하면 position 속성의 속성값과 float 속성 간의 상관관계를 살펴보길 바란다. 키즈가오 실습 단계에서 한 번 더 언급하겠지만 absolute와 fixed 속성값은 float 속성과 함께 사용할 수 없다.

이런 다양한 경우의 수와 상관관계를 언급하는 책이나 블로그는 많지 않다(이 책을 만난 것이 행운일지도 모른다). position 속성은 평소 운동을 하듯 여러 번 반복해서 익히는 방법이 가장 빨리 익힐 수 있는 방법이다.

당구를 책으로만 공부해서는 300점 이상을 칠 수 없다. 지문이 닳도록 큐대를 잡고 수없이 많은 공을 쳐 봐야 몸이 기억한다. 그렇게 하루하루가 더해져야 당구의 고수가 될 수 있다. 이것은 position 속성뿐만 아니라 모든 프로그래밍 언어를 학습할 때도 마찬가지로 적용되는 원칙이다. 매일매일 반복해서 연습하는 것이야 말로 학습의 지름길이다.