레이아웃 정리

김기만·2021년 12월 28일
0

HTML CSS

목록 보기
2/2

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와 비슷하게 동작함.)

profile
나도 누군가의 12시다. by.하스스톤 야생

0개의 댓글