[HTML] HTML 플렉스 박스와 그리드 레이아웃을 사용한 레이아웃 구성방법

1. 플렉스 박스(flexbox) 

HTML에서 플렉스박스(flexbox는) 컨테이너 내의 아이템을 배치하는 데 유용한 CSS 레이아웃 모델로, 주로 1차원 레이아웃을 구성할 때 사용됩니다. 플렉스 박스의 기본 사용법은 아래와 같습니다.

• display: flex를 사용해 플렉스 컨테이너를 설정
• justify-content: space-between 속성으로 아이템간 여백을 조정
• align-items: center로 수직 정렬을 조정 

See the Pen flexbox by Koras02 (@koras02-the-lessful) on CodePen.

 

---

2. CSS 그리드 (Grid) 레이아웃

CSS 그리드는 2차원 레이아웃을 구성하는 데 유용하며, 행과 열을 사용해 복잡한 레이아웃을 쉽게 만들 수 있습니다.

See the Pen gird-flex by Koras02 (@koras02-the-lessful) on CodePen.

• display: grid를 사용하여 그리드 컨테이너를 설정
• grid-template-columns 속성으로 열을 정렬
• gap 속성으로 아이템 간의 공간을 설정

---

3. flexbox 와 grid 혼합 사용하기

플렉스박스와 그리드를 함께 사용할 수 있습니다.

See the Pen grid-flex by Koras02 (@koras02-the-lessful) on CodePen.

---

결론

플렉스박스와 CSS 그리드를 사용하면 다양한 레이아웃을 손쉽게 구성할 수 있습니다. 플렉스박스는 1차원 레이아웃에 적합하고, 그리드는 2차원 레이아웃에 더욱 적합합니다. 필요에 따라 두 가지를 혼합해 사용할 수 있습니다.