CSS 기본: 위치 및 부동

CSS는 열형 레이아웃을 만들고, 레이아웃의 한 부분을 다른 부분과 겹치고, 수년 동안 종종 여러 테이블을 사용해야 했던 작업을 수행할 수 있는 위치 지정 및 부동 속성을 제공합니다.
위치 지정의 기본 아이디어는 간단합니다. 이를 통해 요소의 상자가 일반 위치를 기준으로 표시되거나 상위 요소, 다른 요소 또는 브라우저 창 자체를 기준으로 표시되어야 하는 위치를 정의할 수 있습니다. 분명히 이 기능은 매우 강력하고 놀랍습니다. 사용자 에이전트가 다른 측면보다 CSS2에서 위치 지정을 훨씬 더 잘 지원한다는 사실은 놀라운 일이 아닙니다.
반면에 Float는 CSS1에서 처음 소개되었으며 웹 초기에 Netscape에서 추가된 기능을 기반으로 했습니다. 플로팅은 정확한 위치 지정은 아니지만 확실히 일반적인 흐름 레이아웃도 아닙니다. float의 의미는 이후 장에서 명확하게 설명하겠습니다.

모든 것은 프레임이다

div, h1 또는 p 요소를 종종 블록 수준 요소라고 합니다. 즉, 이러한 요소는 콘텐츠 블록, 즉 "블록 상자"로 나타납니다. 대조적으로, 스팬(span) 및 스트롱(strong)과 같은 요소는 해당 내용이 "인라인 상자"라는 한 줄 안에 나타나기 때문에 "인라인 요소"라고 합니다.
표시 속성을 사용하여 생성된 상자 유형을 변경할 수 있습니다. 이는 표시 속성을 block으로 설정하여 인라인 요소(예: <a> 요소)가 블록 수준 요소처럼 동작하도록 할 수 있음을 의미합니다. 생성된 요소에 상자가 전혀 없도록 표시를 없음으로 설정할 수도 있습니다. 이렇게 하면 상자와 그 안에 들어 있는 모든 내용이 더 이상 표시되지 않으며 문서에서 공간을 차지하지 않습니다.
그러나 어떤 경우에는 명시적인 정의 없이도 블록 수준 요소가 생성됩니다. 이는 블록 수준 요소(예: div)의 시작 부분에 일부 텍스트를 추가할 때 발생합니다. 텍스트가 단락으로 정의되지 않은 경우에도 다음과 같이 처리됩니다.


이 경우 상자는 특별히 정의된 요소와 연결되지 않기 때문에 이름 없는 블록 상자라고 합니다.
블록 수준 요소의 텍스트 줄에서도 비슷한 일이 발생합니다. 세 줄의 텍스트가 포함된 단락이 있다고 가정해 보겠습니다. 각 텍스트 줄은 이름 없는 상자를 형성합니다. 스타일을 적용할 장소가 없기 때문에 이름 없는 블록이나 라인 상자에 스타일을 직접 적용할 수 없습니다(라인 상자와 인라인 상자는 서로 다른 개념입니다). 하지만 화면에 보이는 모든 것이 일종의 상자를 형성한다는 점을 이해하면 도움이 됩니다.

CSS 위치 지정 메커니즘

CSS에는 일반 흐름, 부동 및 절대 위치 지정이라는 세 가지 기본 위치 지정 메커니즘이 있습니다.
달리 지정하지 않는 한 모든 상자는 일반 흐름에 배치됩니다. 즉, 일반 스트림의 요소 위치는 X(HTML)의 요소 위치에 따라 결정됩니다.
블록 수준 상자는 위에서 아래로 하나씩 배열되며, 상자 사이의 세로 거리는 상자의 세로 여백을 기준으로 계산됩니다.
인라인 상자는 가로로 한 줄로 배열됩니다. 간격은 수평 패딩, 테두리 및 여백을 사용하여 조정할 수 있습니다. 그러나 수직 패딩, 테두리 및 여백은 인라인 상자의 높이에 영향을 주지 않습니다. 라인으로 형성된 수평 상자를 라인 상자라고 합니다. 라인 상자의 높이는 항상 포함된 모든 인라인 상자를 수용할 수 있을 만큼 충분히 높습니다. 그러나 행 높이를 설정하면 이 상자의 높이가 늘어날 수 있습니다.
아래에서는 상대위치, 절대위치, 플로팅에 대해 자세히 설명하겠습니다.

CSS 위치 속성

위치 속성을 사용하면 요소 상자가 생성되는 방식에 영향을 미치는 4가지 다른 위치 지정 유형 중에서 선택할 수 있습니다.
위치 속성 값의 의미:
공전
요소 상자가 정상적으로 생성됩니다. 블록 수준 요소는 문서 흐름의 일부로 직사각형 상자를 만드는 반면, 인라인 요소는 상위 요소 내에 배치되는 하나 이상의 선 상자를 만듭니다.
상대적인
요소 상자는 특정 거리만큼 오프셋됩니다. 요소는 위치가 지정되지 않은 모양과 원래 차지했던 공간을 유지합니다.
순수한
요소 상자는 문서 흐름에서 완전히 제거되고 포함 블록을 기준으로 배치됩니다. 컨테이닝 블록은 문서의 다른 요소일 수도 있고 초기 컨테이닝 블록일 수도 있습니다. 일반적인 문서 흐름에서 요소가 이전에 차지했던 공간은 해당 요소가 존재하지 않는 것처럼 닫힙니다. 요소는 원래 일반 흐름에서 생성된 상자 유형에 관계없이 위치 지정 후 블록 수준 상자를 생성합니다.
결정된
요소 상자는 포함 블록이 뷰포트 자체라는 점을 제외하면 위치를 절대값으로 설정하는 것처럼 동작합니다.
팁: 요소의 위치는 일반 흐름의 위치에 상대적이기 때문에 상대 위치 지정은 실제로 일반 흐름 위치 지정 모델의 일부로 간주됩니다.

CSS 위치 지정 속성

CSS 위치 지정 속성을 사용하면 요소의 위치를 ​​지정할 수 있습니다.
속성 설명
position은 요소를 정적, 상대, 절대 또는 고정 위치에 배치합니다.
top은 위치 지정 요소의 상단 여백 경계와 포함 블록의 상단 경계 사이의 오프셋을 정의합니다.
right는 위치가 지정된 요소의 오른쪽 여백 가장자리와 포함 블록의 오른쪽 가장자리 사이의 오프셋을 정의합니다.
하단은 위치가 지정된 요소의 하단 여백 경계와 포함 블록의 하단 경계 사이의 오프셋을 정의합니다.
left는 위치 지정 요소의 왼쪽 여백 가장자리와 포함 블록의 왼쪽 가장자리 사이의 오프셋을 정의합니다.
Overflow는 요소의 콘텐츠가 해당 영역을 넘을 때 발생하는 상황을 설정합니다.
클립은 요소의 모양을 설정합니다. 요소는 이 모양으로 잘린 다음 표시됩니다.
수직 정렬은 요소의 수직 정렬을 설정합니다.
z-index는 요소의 쌓인 순서를 설정합니다.