[CSS] Flex와 Grid (feat. float)

레이아웃을 정의하거나 요소들을 정렬해야 할 때가 너무나도 많습니다.

저는 레이아웃을 정의할 때는 flex를 사용하고 요소를 정렬할 때는 float을 많이 씁니다. ( 왜 이렇게 두가지로 나눠지게 됐는지는 저도 잘... )

 

그런데 최근 코드 리뷰를 받으면서 float사용을 최대한 지양하는 것이 좋다는 피드백을 받았습니다.

float 이 나쁜 코드라기보다 더 좋은 flex와 grid가 있기 때문에 이렇게 말씀하신 게 아닐까 싶습니다.

( 참고 문서 : 링크 )

 

flex와 grid에 대한 사용경험도 별로 없어서 이번 기회에 익숙해지기 위해 두 가지에 대해서 정리해두려고 합니다!

 

이미지 출처 : https://studiomeal.com/archives/533

---

flex

flex는 1차원을 수직 또는 수평 중 하나의 방향으로 레이아웃을 나눌 수 있는 속성입니다.

 

display: flex 를 통해 flex속성을 부여할 수 있습니다.

 

flex-direction: row, flex-direction: column을 통해 수평 또는 수직으로 레이아웃 방향을 설정할 수 있습니다.

 

추가)

justify-content, align-item을 통해 Flex 내부 요소들을 적절한 간격과 위치에 배치할 수 있습니다.

---

Grid

Grid는 2차원으로 수평과 수직으로 동시에 영역을 나눌 수 있는 속성입니다.

 

display: grid 를 통해 grid 속성을 부여할 수 있습니다.

 

grid-template-row, grid-template-column을 통해 각 칸의 크기를 정의할 수 있습니다.

 

---

 

flex와 grid에 대해 그 차이와 선언 방식에 대해서만 알아보았습니다.

 

개인적으로 float을 사용하는 게 복잡할 때가 많았는데, 정리하고 보니까 이게 더 편하네요...

 

1분 코딩이라는 강의 페이지에 다양한 기능과 함께 소개되어있어서 링크 첨부하겠습니다

이번에야말로 CSS Flex를 익혀보자

이번에야말로 CSS Grid를 익혀보자