[CSS] 위치 지정 간단 설명 (Position, Float, Display 등)

1. Position: CSS의 position 속성은 요소의 위치를 지정하는 데 사용됩니다. position 속성에는 다음과 같은 값들이 있습니다:
   • static: 요소의 기본값으로, 일반적인 문서 흐름에 따라 배치됩니다.
   • relative: 요소를 문서 흐름에 따라 배치한 후, top, right, bottom, left 속성을 사용하여 상대적인 위치를 지정할 수 있습니다. 다른 요소들과의 관계를 기준으로 이동합니다.
   • absolute: 요소를 문서 흐름에서 제거하고, 가장 가까운 조상 요소 중에 position 값이 relative, absolute, 또는 fixed인 요소를 기준으로 위치를 지정합니다.
   • fixed: 요소를 뷰포트(브라우저 창)를 기준으로 위치를 지정합니다. 스크롤해도 화면에 고정됩니다.
2. Float: float 속성은 요소를 왼쪽이나 오른쪽으로 부동(floating)시킵니다. 이로써 요소들을 문서 흐름에서 빼내어 다른 요소들이 그 주위로 감싸지게 할 수 있습니다. float 속성은 다음과 같은 값을 가질 수 있습니다:
   • none: 요소를 부동시키지 않습니다.
   • left: 요소를 왼쪽으로 부동시킵니다. 다른 요소들이 그 주위로 흐르게 됩니다.
   • right: 요소를 오른쪽으로 부동시킵니다. 다른 요소들이 그 주위로 흐르게 됩니다.
   float 속성을 사용할 때 주의해야 할 점은, 해당 요소를 부동시킨 후에는 부모 요소에게 명시적인 높이를 지정하거나, clear 속성을 사용하여 요소의 부동을 해제해야 할 수도 있습니다.
3. Display: display 속성은 요소의 표시 방법을 설정하는 데 사용됩니다. 일반적으로 사용되는 값들은 다음과 같습니다:
   • block: 요소를 블록 수준 상자로 설정합니다. 즉, 요소는 새로운 줄에서 시작되고 가능한 가로 너비를 모두 차지합니다.
   • inline: 요소를 인라인 수준 상자로 설정합니다. 즉, 요소는 새로운 줄에서 시작되지 않고, 다른 인라인 요소와 함께 같은 줄에 배치됩니다.
   • inline-block: 요소를 인라인 수준 상자로 설정하되, 블록 수준 상자의 특성을 가지도록 합니다. 즉, 요소는 같은 줄에 배치되지만, 가로 너비와 세로 높이 등을 지정할 수 있습니다.
   • none: 요소를 화면에 표시하지 않습니다. 즉, 요소가 사라지며 공간도 차지하지 않게 됩니다.
   이 외에도 display 속성에는 다른 값들이 있으며, 이 값들을 사용하여 요소들을 유연하게 배치하고 표시할 수 있습니다.