1. DISPLAY
1.1 BLOCK : 새 줄에서 시작하여 죄우로 최대한 늘어남. 대표적인 블록 레벨 엘리멘트는 아래와 같습니다.
∙ p
∙ form
∙ header
∙ footer
∙ section
1.2 INLINE : 단락안에서 해당 당락의 흐름을 발해하지 않은 채로 텍스트를 감쌈. 대표적인 인라인 엘리멘트는 아래와 같습니다.
∙ span
∙ a
1.3 INLINE-BLOCK : 요소를 인라인 레벨로 배치하면서 내용에는 블록 레벨 속성을 지정할때 사용함.(블록과 인라인의 특성을 모두 가짐)
1.4 FLEX : 어떤 방량에든 위치할 수 있으며, 동적으로 변경 가능한 순서를 지정할 수도 있고, 가용한 공간 내에서 크기와 위치를 자동으로 조정하기도 함.(사용 시 기본적으로 가로 정렬됨.) 사용법은 아래와 같습니다.
1.4.1. justify-content(flex 요소들을 가로선 상에서 정리합니다.)
flex-start: 요소들을 컨테이너의 왼쪽으로 정렬합니다.
flex-end: 요소들을 컨테이너의 오른쪽으로 정렬합니다.
center: 요소들을 컨테이너의 가운데로 정렬합니다.
space-between: 요소들 사이에 동일한 간격을 둡니다.
space-around: 요소들 주위에 동일한 간격을 둡니다.
1.4.2. align-items(flex 요소들을 세로선 상에서 정리합니다.)
flex-start: 요소들을 컨테이너의 꼭대기로 정렬합니다.
flex-end: 요소들을 컨테이너의 바닥으로 정렬합니다.
center: 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.
baseline: 요소들을 컨테이너의 시작 위치에 정렬합니다.
stretch: 요소들을 컨테이너에 맞도록 늘립니다.
1.4.3. flex-direction(정렬할 방향을 지정합니다.) :
row: 요소들을 텍스트의 방향과 동일하게 정렬합니다.
row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다.
column: 요소들을 위에서 아래로 정렬합니다.
column-reverse: 요소들을 아래에서 위로 정렬합니다.
1.4.4. order(때때로 컨테이너의 row나 column의 순서를 역으로 바꾸는 것만으로는 충분하지 않습니다.
이러한 경우에는 order 속성을 각 요소에 적용할 수 있습니다. order의 기본 값은 0이며, 양수나 음수로 바꿀 수 있습니다.)
1.4.5. align-self(개별 요소에 적용할 수 있는 또 다른 속성입니다.
이 속성은 align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용됩니다.)
1.4.6. flex-wrap(flex 요소들을 한줄 또는 여러 줄에 걸쳐 정렬합니다.) :
nowrap: 모든 요소들을 한 줄에 정렬합니다.
wrap: 요소들을 여러 줄에 걸쳐 정렬합니다.
wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.
1.4.7. flex-flow(flex-direction와 flex-wrap를 합친 것) :
row-wrap: 텍스트 방향과 동일하게 여러줄에 걸쳐 정렬함
column-wrap: 위에서 아래로 동일하게 여러줄에 걸쳐 정렬함.
이외에도 조합에 따라 더 있음.
1.4.8. align-content(세로선 상에 여분의 공간이 있는 경우, flex 컨테이너 사이의 간격을 조절합니다.) :
flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.
flex-end: 여러 줄들을 컨테이너의 바닥에 정렬합니다.
center: 여러 줄들을 세로선 상의 가운데에 정렬합니다.
space-between: 여러 줄들 사이에 동일한 간격을 둡니다.
space-around: 여러 줄들 주위에 동일한 간격을 둡니다.
stretch: 여러 줄들을 컨테이너에 맞도록 늘립니다.
2. POSITION
2.1 STATIC(정적 위치 지정 방식) : 기본값
2.2 RELATIVE(상대 위치 지정 방식) : 별도의 프로퍼티를 지정하지 않는 이상 STATIC과 동일하게 작동하나 상대 위치가 지정된 엘리멘트에 top, right, bottom, left를 지정하면 위치가 조정됨.
2.3 FIXED(고정 위치 지정 방식) : top, right, bottom, left를 이용하여 지정한 위치에 고정시키는 엘리멘트
2.4 ABSOLUTE(절대 위치 지정 방식) : 절대 위치가 지정된 엘리멘트가 기준으로 삼는 조상 엘리멘트가 없으면 문서 본문을 기준으로 삼고 페이지 스크롤에 따라 움직임.(조상 엘리멘트에 상대적으로 위치가 지정된다는 점을 제외하면 FIXED와 비슷하게 동작함.)