이번에 가운데에 선을 긋는 작업을 하던 중, CSS를 사용해 `position: absolute`와 `left: 50%`를 주어 가운데에 선을 그으려고 했다. 3개의 DIV 내부에 선을 긋기 위해 아래와 같이 작업을 했다.
<div>
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
<div>
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
<div>
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
결과는 처참했다. 부모 div의 가운데가 아니라 전체 화면의 가운데에 같은 줄이 3개가 겹쳐서 그려졌다. 각 div의 가운데에 그리려고 검색을 하던 중 absolute와 부모와의 관계에 대한 글을 보게 되었다.
absolute의 위치 기준은 position이 relative, fixed, absolute인 가장 가까운 부모이다. 즉 위의 코드에서는 부모 div가 기준이 아니라, body가 기준이 된 것이다.
나는 아래와 같이 부모 div 태그에 position을 relative로 주고, 다시 시도해봤다.
<div style="position:relative">
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
<div style="position:relative">
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
<div style="position:relative">
<div style="position:absolute; left:50%; width:1px; height:100%; background-color:#DDD"></div>
</div>
부모 div 내에 선이 그어진 것을 이번에는 확인할 수 있었다.
position absolute를 사용하기 전에 기준으로 삼을 부모의 position을 먼저 확인하고, 사용하는 습관을 들여야겠다. 그리고 이 부분은 다음에도 써먹을 수 있을 것 같다.
