포지션과 레이아웃: 요소의 위치와 레이아웃을 제어

웹 페이지의 포지션(Position)과 레이아웃(Layout)에 대해 좀 더 상세하게 설명드리겠습니다. 이 두 개념은 웹 페이지의 구조를 정의하고, 요소들이 어떻게 배치되고 상호 작용하는지를 결정하는 핵심적인 요소입니다.

포지션(Position)

포지션은 HTML 요소가 페이지 내에서 어떻게 배치되는지를 결정합니다. 주요 포지션 속성은 다음과 같습니다:

1. Static (정적 위치):
   • 모든 HTML 요소의 기본 포지션입니다.
   • 요소가 자연스러운 문서 흐름에 따라 배치됩니다.
   • top, right, bottom, left 속성이 적용되지 않습니다.
2. Relative (상대 위치):
   • 요소의 원래 위치를 기준으로 상대적으로 이동시킵니다.
   • top, right, bottom, left 속성으로 이동 거리를 지정할 수 있습니다.
   • 원래 자리를 유지하며, 주변 요소에 영향을 주지 않고 이동합니다.
3. Absolute (절대 위치):
   • 가장 가까운 상위 요소 중 위치가 지정된 요소 (relative, absolute, fixed)에 대해 상대적으로 배치됩니다.
   • 원래 흐름에서 벗어나 주변 요소에 영향을 주지 않습니다.
   • top, right, bottom, left 속성으로 위치를 지정합니다.
4. Fixed (고정 위치):
   • 요소를 뷰포트(브라우저 창)에 대해 고정시킵니다.
   • 스크롤과 상관없이 항상 같은 위치에 표시됩니다.
   • 주로 메뉴바나 광고 배너에 사용됩니다.
5. Sticky (고정-스크롤 위치):
   • 스크롤에 따라 정적 위치와 고정 위치 사이를 전환합니다.
   • 특정 스크롤 위치에서 요소가 고정됩니다.

레이아웃(Layout)

레이아웃은 페이지 내 요소들이 어떻게 배치되는지를 정의합니다. 다음은 주요 레이아웃 관련 속성입니다:

1. Display:
   • 요소가 어떻게 표시될지 결정합니다.
   • block, inline, inline-block, none 등의 값이 있습니다.
2. Flexbox:
   • 일차원 레이아웃 모델로, 요소들을 행 또는 열로 유연하게 배치할 수 있습니다.
   • 컨테이너에 display: flex를 적용하면 자식 요소들이 플렉스 아이템이 됩니다.
3. Grid:
   • 이차원 레이아웃 모델로, 행과 열을 기반으로 복잡한 레이아웃을 구성할 수 있습니다.
   • 컨테이너에 display: grid를 적용하고, 행과 열을 정의합니다.
4. Box Model:
   • 모든 HTML 요소는 상자 모델을 따릅니다.
   • margin, border, padding, width, height 속성을 사용하여 요소의 크기와 주변 여백을 조절할 수 있습니다.
5. Overflow:
   • 요소 내부의 콘텐츠가 상자를 벗어났을 때 어떻게 표시할지 결정합니다.
   • visible, hidden, scroll, auto 등의 값이 있습니다.
6. Z-Index:
   • 요소의 쌓임 순서를 지정합니다.
   • 더 높은 값은 요소를 상위에 배치합니다.