css 레이아웃
display : value;
요소를 어떻게 보여줄지 레이아웃을 결정하는 속성
속성값 | 설명 |
flex | 한 방향 레이아웃 시스템이고 (1차원) |
grid | 두 방향(가로-세로) 레이아웃 시스템 (2차원) |
Flex
복잡한 레이아웃을 간단하게 구현할 수 있게 나온 것으로, 요소의 크기와 순서를 유연하게 배치할 수 있다.
뷰 포트나 요소의 크기가 불명확하거나 동적으로 변할 때에도 효율적으로 요소를 배치, 정렬, 분산 시킬 수가 있다.
Grid
좀 더 복잡한 레이아웃을 만들 때 사용하며, Flex보다 더 복합적인 레이아웃 표현이 가능하다.
Float : value;
특정 요소를 떠있게, 흐르도록, 부유하게 하도록 하는 속성
기본적인 문서 배치의 흐름에서 벗어나 요소의 모서리가 페이지의 왼쪽이나 오른쪽으로 이동시킬 수 있다.
속성값 | 설명 |
left | 요소를 오른쪽으로 이동시키고, 오른쪽부터 가로로 정렬됨 |
right | 요소를 왼쪽으로 이동시키고, 왼쪽부터 가로로 정렬됨 |
float를 해제해주자!
플로팅한 요소는 문서의 흐름상에서 벗어난 상태이기 때문에 레이아웃을 무너뜨리게 되는 현상을 보인다.
이러한 문제를 해결하기 위해서는 float 을 해제해 주어야 한다.
float 해제 방법 : https://velog.io/@hsecode/CSS-float-해제하기-float-clearPosition : value;
문서 상에서 요소가 배치되는 방식을 결정한다.
relative | 상대 위치 지정방식, 요소의 기본 위치를 기준으로 위치를 설정 |
fixed | 고정 위치 지정방식, 뷰포트 기준으로 위치 설정 |
absolute | 절대위치 지정방식, 위치가 설정된 조상요소를 기준으로 위치 설정 |
static(기본값) | 정적위치 지정방식, 웹 페이지의 흐름에 따라 차례대로 요소들을 위치 |
