[TIL]20241211

일정표 ✨

09:00 ~ 10:10 : 디자인 카타 진행(UI 컴포넌트 조사)

10:10 ~ 10:30 : 데일리 스크럼 진행 & 학습 계획 세우기

10:30 ~ 13:00 : 웹퍼블리싱 특강 시간(grid&flex)

 

14:00 ~ 16:00 : 웹 퍼블리싱 특강

16:00 ~ 17:00 : 실습

17:00 ~ 18:00 : 과제 작성

 

19:00 ~ 20:30 : 아티클진행 (flex&grid 정리)

20:30 ~ 21:00 : TIL 작성 & 내일 계획 세우기 & 마무리

 

 

오늘 공부 내용 : [css] Flex 와 Grid

flex와 grid 기능 정리 및 사용법 블로그 업데이트 : https://eunzi789.tistory.com/65

 

[주요 목적]

1. Flexbox (Flexible Box)

• 1차원 레이아웃 시스템
• 주로 한 방향(행 또는 열)으로 아이템을 배치하고 정렬하는 데 사용.
• 요소 간의 정렬과 간격 조정을 유연하게 처리.
• 사용 예시: 버튼 그룹 / 네비게이션 바 / 간단한 정렬
• 정렬 및 정돈을 위해 justify-content, align-items와 같은 속성을 사용

2. Grid (CSS Grid Layout)

• 2차원 레이아웃 시스템
• 행과 열을 동시에 관리할 수 있어 복잡한 레이아웃을 쉽게 구성할 수 있음.
• 정밀한 레이아웃 구성이 가능하며, 페이지의 전체 구조를 설계하는 데 적합.
• 사용 예시: 웹 페이지 전체 레이아웃 / 대시보드 디자인 / 카드형 레이아웃
• grid-template-rows와 grid-template-columns로 행과 열을 정의

 

[자동 정렬 및 공간 분배]

1. Flex

• 자식 요소들은 부모 컨테이너 내에서 자동으로 배치
• 공간 분배는 자식 요소들의 내용과 크기에 따라 결정
• 내용 기반(content-based)으로 작동

2. Grid

• 부모 컨테이너에서 정확한 행과 열 크기를 미리 정의할 수 있음
• 각 아이템이 특정 셀에 배치되도록 설정 가능
• 레이아웃 기반(layout-based)으로 작동

[장단점]

1. Flex

• 장점: 간단한 레이아웃에서 빠르고 직관적으로 사용할 수 있음.
• 단점: 복잡한 2차원 레이아웃에는 적합하지 않음.
• 사용: 요소가 한 방향으로 나열되고, 정렬 및 간격 조정이 필요한 경우.

2. Grid

• 장점: 복잡한 페이지 레이아웃을 설계할 때 강력한 기능 제공.
• 단점: 간단한 정렬 작업에는 불필요하게 복잡할 수 있음.
• 사용: 행과 열을 모두 관리하며, 더 구조적인 레이아웃이 필요한 경우

 

TIL 작성

실무를 하면서 사용하기 전에 항상 다시 찾아보고 적용했던 flex와 grid의 사용법과 헷갈렸던 부분을 이참에 다시 정리해보았다.  flex는 한방향으로의 배치를 조정하지만 grid는 행과열 모두 관리할 수 있다는 차이점에 대해 알게되었다. 이를 통해 각자 기능의 장단점을 파악하고 상황에 따라 적절히 선택해야한다는 것을 알게되었다. 

내용을 정리하면서 css레이아웃 설계에 대한 이해도가 더 높아졌으니 직관적이고 효과적인 디자인으로 구현해 보아야겠다.