[CSS] postion, display

---

position

position 속성은 요소의 위치를 조정하는데 사용되는 속성이다. 

 

다음과 같은 속성들을 조합하고, 다른 속성들과 함께 사용하여 원하는 레이아웃과 위치를 구현할 수 있다.

 

static

기본값으로, 요소를 문서의 일반적인 흐름에 따라 배치한다.  top , right, bottom, left  등의 속성은 적용되지 않는다.

 

relative

요소를 자기 자신을 기준으로 상대적으로 이동시킬 수 있다. 이동시키려는 경우 top , right, bottom, left 속성을 사용할 수 있다. 또 다른 요소들과 겹칠 수도 있다.

 

absolute

가장 가까운 조상 요소 중 position 속성이 static이 아닌 경우를 기준으로 위치한다. 다른 요소들의 영향을 받지 않고 원하는 위치로 이동할 수 있다.

 

fixed

뷰포트(화면)에 대해 고정된 위치에 요소를 배치합니다. 스크롤해도 화면의 동일한 위치에 남아있습니다.

 

sticky

요소가 스크롤되는 동안 일시적으로 고정되고, 지정한 임계값에 도달하면 일반적인 문서 흐름에 따라 배치됩니다.

 

 

display

display속성은 요소가 어떻게 보이고 배치되는지를 결정하는 속성이다. 

 

요소의 레이아웃 특성을 변경하거나 보이는 방식을 조절하는 데 사용된다. 

 

block

요소를 블록 레벨 요소로 표시한다. 요소는 새로운 줄에서 시작되며, 가능한 가로 너비를 모두 차지한다.

 

inline

요소를 인라인 레벨 요소로 표시한다. 다른 인라인 요소와 같은 줄에 표시되며, 내용의 크기만큼만 가로 너비를 차지한다.

 

inline-block

인라인 레벨 요소처럼 다른 요소와 같은 줄에 표시되지만, 블록 레벨 요소처럼 내용의 크기만큼 가로 너비를 차지한다.

 

none

요소를 화면에서 숨긴다. 레이아웃에서 공간도 차지하지 않는다.

 

table

요소를 테이블 요소로 표시한다. 추가적인 테이블 관련 속성과 함께 사용하여 레이아웃을 정의할 수 있다.

 

inline-table

테이블 레이아웃을 가진 인라인 레벨 요소를 생성한다.

 

flex

요소를 플렉스 컨테이너로 설정하고, 내부 요소들을 플렉스 아이템으로 배치하여 유연한 레이아웃을 만들 수 있다.

 

grid

요소를 그리드 컨테이너로 설정하고, 그리드 아이템들을 배치하여 복잡한 레이아웃을 구성할 수 있다.

 

inline-flex

인라인 레벨에서 플렉스 컨테이너로 설정하며, 내부 플렉스 아이템들을 배치한다.