CSS display, position

● display: 요소를 블록과 인라인 요소 중 어느 쪽으로 처리할지와 함께, 플로우, 그리드, 플렉스처럼 자식 요소를 배치할 때 사용할 레이아웃을 설정합니다.

- display-outside values:

• block: 인라인 요소를 블럭요소로 바꿔줄 때 사용한다. 

• inline: 블럭 요소를 인라인으로 바꿔줄 때 사용한다.컨텐츠의 크기에 따라 사이즈가 달라지고 컨텐츠 자체만을 꾸며주는 역할을 한다. margin-top, margin-bottom을 쓸 수 없다. width, height를 쓸 수 없다.

• run-in

• display-inside values:

• flow

• flow-root

• table

• flex

• grid

• ruby

- display-listitem

 

- display-internal values:

• table-row-group

• table-header-group

• table-footer-group

• table-row

• table-cell

• table-column-group

• table-column

• table-caption

• ruby-base

• ruby-text

• ruby-base-container

• ruby-text-container

- display-box values:

• contents

• none: 셀렉터 값을 보이지 않게 한다. 영역 자제가 없어진다.

- display-legacy values:

• inline-block: 높이값을 넣을 수 있다. 상자로 변환되어 컨텐츠의 사이즈에 관계없이 박스의 사이즈로 된다. margin, padding 가능, width, height 가능.

• inline-table

• inline-flex

• inline-grid

 

● position: 문서 상에 요소를 배치하는 방법을 지정합니다. top, right, bottom, left 속성이 요소를 배치할 최종 위치를 결정합니다. 기본적으로 static으로 진열된다.

• static: top, right, bottom, left, z-index 속성이 아무런 영향도 주지 않는다. 기본값이다.

• relative: 현재의 자리에서 이동한다. 

• absolute: 부모 박스를 중심으로 이동한다.

• fixed: 윈도우를 중심으로 이동한다.

• sticky: 스크롤링 되어도 그 자리에 머문다.