position 속성 - HTML 요소 위치 제어하기
HTML 요소의 위치를 제어하기 위해 CSS에서 사용하는 속성 중 하나인 position 속성에 대해 알아보겠습니다. position 속성을 이용하면 HTML 요소의 배치 방법을 지정할 수 있습니다.
1. static
position: static은 position 속성의 기본값입니다. 정적인 위치를 가지며, 웹 문서의 흐름에 따라 보통 위치합니다.
<div style="position: static;">
정적인 위치 요소
</div>2. relative
position: relative는 요소의 위치를 원래 위치에서 상대적으로 이동시킵니다. 태그의 원래 위치는 그대로 차지하며, top, right, bottom, left 속성을 사용하여 이동 거리를 조절할 수 있습니다.
<div style="position: relative; top: 10px; left: 20px;">
상대적인 위치로 이동한 요소
</div>3. absolute
position: absolute는 요소를 문서상의 원하는 위치로 절대적으로 이동시킵니다. 절대 위치를 가지기 때문에 해당 요소는 부모 요소 중에서 position: static이 아닌 첫 번째 요소를 기준으로 배치됩니다. 필요에 따라 부모 요소에 position: relative를 설정하여 원하는 위치로 배치할 수도 있습니다.
<div style="position: relative;">
<div style="position: absolute; top: 30px; left: 50px;">
절대적인 위치로 이동한 요소
</div>
</div>4. fixed
position: fixed는 요소를 뷰포트(브라우저 창)의 원하는 위치에 고정시킵니다. 스크롤해도 요소의 위치가 변하지 않습니다.
<div style="position: fixed; top: 50px; right: 50px;">
뷰포트에 고정된 요소
</div>5. sticky
position: sticky는 요소의 원래 위치에 상대적으로 이동한 후, 특정 지점 혹은 스크롤을 기준으로 고정시킵니다. top, right, bottom, left 속성을 사용하여 고정되는 지점을 설정할 수 있습니다.
<div style="position: sticky; top: 100px;">
스크롤해서 고정되는 요소
</div>위와 같이 position 속성을 사용하여 HTML 요소의 위치를 제어할 수 있습니다. 각 속성의 특징을 잘 이해하고 활용하면 웹 페이지의 레이아웃을 더욱 다양하게 제작할 수 있습니다.
마무리하자면, position 속성은 HTML 요소의 위치를 제어하기 위해 사용되며, static, relative, absolute, fixed, sticky 다섯 가지 값으로 구성됩니다. 각각의 속성은 다른 특징을 가지고 있으므로 적절하게 선택하여 웹 페이지의 레이아웃을 꾸밀 수 있습니다.
댓글