[CSS] Position/Display/Flex

[1] CSS Display 속성

syntax display:inline; / display:block; / display:inline-block;

inline block inline-block

배치	한 줄에 여러 컨텐츠를 이어서 배치 가능	한 줄에 한 컨텐츠만 배치 가능	한 줄에 여러 컨텐츠를 이어서 배치 가능
너비	컨텐츠의 너비값을 가짐	컨텐츠의 너비와는 상관없이 100%	컨텐츠의 너비값을 가짐
크기	width/heignt 값 가질 수 없음	width/height 값 가질 수 있음	width/heignt 값 가질 수 없음
마진	상하좌우 마진 값을 가질 수 없음	상하좌우 마진 값을 가질 수 있음	상하좌우 마진 값을 가질 수 없음

 

 

[2] CSS Position 속성

syntax position:relative; / position:absolute;

1. relative : 본인이 있었던 위치를 기준으로 위치값이 부여된 만큼 이동한다. 본인의 잔상을 남기고 이동한다.
2. absolute : 본인의 직계 부모나 조상 중 position 값이 relative값을 가진 것(여러 요소가 있다면 가장 가까운 것)을 기준으로 위치값이 부여된 만큼 움직이고 없을 경우 body를 기준으로 한다. 뜨는 속성이 있다(z-index처럼).
3. sticky : 스크롤이 되는 부모 안에 위치해 스크롤이 될 때 화면에서 사라지지 않고 화면을 따라다닌다.(부모에 height 값이 필수로 존재하지 않아도 되며 부모 요소가 자식 요소보다 크면 작동한다.) 부모나 직계 조상 요소중에 overflow - hidden, auto, scroll 속성이 있을 경우 실행되지 않는다. fixed나 absolute와는 달리 뜨지 않는다.
4. 부모영역을 기준으로 화면에 고정되어있으며 뜨지 않는다.

 

 

[3] CSS Display Flex 속성

주축과 교차축으로 정렬하는 display 속성

(1) Flex direction : 주축과 교차축의 방향설정

row 주축을 가로로 교차축을 세로로 지정합니다.

row-reverse	주축을 가로로 교차축을 세로로 지정합니다. 역순으로 가로배치됩니다.
column	주축을 세로로 교차축을 가로로 지정합니다.
column-reverse	주축을 세로로 교차축을 가로로 지정합니다. 역순으로 세로배치됩니다.

(2) Flex wrap : 줄넘김

wrap 줄바꿈을 한다.

nowrap	줄바꿈을 하지 않고 한 줄에 요소들을 채운다.
wrap-reverse	줄바꿈을 하고 역순으로 배치한다.

(3) Justify-content : 주축 방향 정렬

flex-start 아이템들을 시작점으로 정렬합니다.

flex-end	아이템들을 끝점으로 배치합니다.
center	아이템들을 가운데로 정렬합니다.
space-between	아이템들의 사이에 균일한 간격을 만들어준다.
space-around	아이템들의 둘레에 균일한 간격을 만들어준다.
space-evenly	아이템들의 사이와 양 끝에 균일한 간격을 만들어준다.

(4) Align-items : 수직축 방향 정렬

stretch 아이템들이 수직축 방향으로 끝까지 늘어난다.

flex-start	아이템들을 시작점으로 정렬합니다.
flex-end	아이템들을 끝점으로 배치합니다.
center	아이템들을 가운데로 정렬합니다.
baseline	아이템들을 텍스트 베이스라인 기준으로 정렬합니다.

(5) Align-content : 수직축 방향 정렬(여러줄)