[CSS] Layout

📌 Layout 속성

layout을 잡을때 많이 사용하는 속성들..!

📌 Float 속성 (요새잘안씀)

요소를 쌓임맥락에서 벗어나게 만드는 style
위쪽으로 떠있게 만드는 행위

1. 높이 속성을 잃어버리기 때문에 float 요소를 포함하고 있는 부모는
   overflow:auto 로 줌으로써 float인 자식 요소까지
   높이를 인식할 수 있도록 만들 수 있다
2. 일반적인 쌓임 맥락을 따라가지 않고, left 혹은 right인지에 따라서
   자체적으로 쌓여간다 (아래쪽에 깔려있음)

   float : left

📌 clear 속성

이미 위쪽에 요소들이 float으로 설정되어있다면
일반 요소(float속성이 없는 요소)는 float되어있는 요소의 밑에 깔리게 된다..
이때 가려지는 부분 없이 일반적인 쌓임 맥락으로 쌓고 싶다면
해당 요소에서 clear 속성에 left / right / both 를 줘서
float 속성을 해제하고 사용해야 한다

📍 flex 속성

화면 요소들이 가로, 세로길이에 따라 자유롭게
flexible 하게 늘어났다 줄어들었다 할 수 있도록
만들어주는 속성
(1차원적으로만 가능)
(가로면 가로만 세로면 세로만)

📍 grid 속성

화면 요소들을 표(그리드) 형태로 만드는 속성