◆ 다단 레이아웃
- 2단, 3단, 그 이상의 화면 배치를 가로로 하기 위한 방법
- float, flex, grid와 같은 여러 방식들이 존재
◆ float 레이아웃
- 기본 배치가 아닌 공중 배치 개념
- left 또는 right으로 이동시키는 속성
- 바닥이 아닌 공중에 배치하기 때문에 뒤쪽 영역을 침범하는 문제가 있다.
- (뒤쪽 영역을 침범하는 문제)이 문제를 해결하지 못하면 사용이 불가능하다.
- clear 속성을 가진 영역이 반드시 float 사용 후에 배치해야 한다.
- 글씨의 높이 차이가 생기면 문제가 발생한다. ::after영역을 가상 선택자로 선택하여 생성한 뒤 clear 적용- 일반적으로 이미지나 텍스트 주위에 레이아웃을 구성하는 데 사용
- 주로 웹 페이지의 구조를 만드는 데 사용
- ◆ 앞으로 사용할 방식
1) .float-box 영역을 만든다.
2) 내부에 .float-left, .float-right로 좌우 정렬을 배치
3) 영역이 종료되면 자동 clear가 되도록 처리
◆ flex 레이아웃
-
요소의 크기를 조정하고, 간격을 조절하며, 요소의 배치를 제어하는 레이아웃 모델이다.
-
요소를 수직 또는 수평 방향으로 정렬
-
요소 간의 공간을 조정할 수 있다.
-
주로 컨테이너 내부의 요소를 정렬하는 데 사용
-
요소 간의 상호작용을 제어하고자 할 때 사용
-
방향 설정이 가능하다.
-
[1] 4가지 방향 설정이 있다.
- (column/column-reverse/row/row-reverse) -
[2] 줄바꿈을 허용하거나 차단할 수 있다.
-
[3] 최대 폭 이상의 폭을 설정해도 가능한한 범위까지만 자동으로 설정된다.
-
[4] 폭을 동일하게 만들고 싶다면 개별 항목에
flex-grow를 설정한다. -
[5] 글자가 아니어도 가로 세로 정렬이 가능하다.
- justify-content 로 가로 정렬 구현
- align-items 로 세로 정렬 구현
◆ flexbox
- 영역에 display:flex 또는 display:inline-flex라고 설정하여 구현
- 영역 차원에서 설정하는 옵션이 많다.
- flex-direction: 영역 내부 컨텐츠 배치 방향
- flex-wrap : 영역 내부 컨텐츠 줄 바꿈
- justify-content : 영역 내부 컨텐츠 가로 정렬
- align-items : 영역 내부 컨텐츠 세로 정렬 - 개별 항목에는 배치 비율를 지정할 수 있다.
- flex-grow : 남는 공간에 대한 할당 비율
Backend Developer