부트스트랩에서 이 세가지의 차이점이 궁금하다.

<div  class="row d-flex">
<div  class="d-flex">
<div  class="row">

정확히 어떤 차이가 있는가?

부트스트랩에서 <div class="row d-flex">, <div class="d-flex">, <div class="row">의 주요 차이는 row와 d-flex 클래스가 각각 제공하는 역할과 스타일링에 있습니다. 아래에 각각의 차이를 설명합니다:

1. <div class="row d-flex">
row: 그리드 시스템에서 사용되며, 내부 요소(주로 col- 클래스를 가진 요소) 사이에 **가로 여백(gutter)**을 적용합니다.
display: flex;와 함께 내부 요소를 플렉스 컨테이너로 만듭니다.
가로 여백이 자동으로 추가됩니다.
d-flex: 내부 요소를 플렉스 컨테이너로 설정합니다.
추가적으로 플렉스의 다양한 정렬 옵션(justify-content, align-items)을 사용할 수 있습니다.
결합 효과:
그리드의 가로 여백(row)과 플렉스 정렬(d-flex) 기능을 동시에 적용.
주로 그리드 시스템의 레이아웃을 사용하면서 내부 요소를 플렉스 정렬로 세밀히 제어할 때 유용.

2. <div class="d-flex">
d-flex: 요소를 단순히 플렉스 컨테이너로 만듭니다.
그리드 시스템의 여백은 없으며, 직접적으로 플렉스 컨테이너의 배치를 제어해야 합니다.
가로 및 세로 정렬(예: justify-content-center, align-items-center)을 세밀히 조정 가능.
차이점:
row 클래스처럼 여백(gutter)을 제공하지 않으며, 플렉스 컨테이너로의 역할에만 집중.

3. <div class="row">
row: 부트스트랩의 그리드 시스템에서 사용되며, 자식 요소로 col- 클래스를 가진 요소를 배치.
**가로 여백(gutter)**을 포함해 그리드 레이아웃을 구성하는 기본 단위.
기본적으로 display: flex; 속성을 가지며, 가로 축 정렬이 중심.

제한점:
플렉스 컨테이너의 세부 정렬(align-items, justify-content)을 위해 별도로 d-flex를 추가해야 할 수도 있음.

주요 차이 비교
클래스 역할 가로 여백(gutter) 플렉스 컨테이너 세부 정렬
row d-flex 그리드 레이아웃과 플렉스 정렬의 결합 있음 있음 가능 (d-flex로 제어)
d-flex 단순 플렉스 컨테이너 없음 있음 가능
row 그리드 시스템의 기본 구성 요소 있음 있음 제한적 (추가 클래스 필요)

선택 기준
row: 부트스트랩의 기본 그리드 레이아웃을 사용하고 싶다면.
d-flex: 단순한 플렉스 컨테이너로 정렬이나 배치를 세밀히 제어하고 싶다면.
row d-flex: 그리드 레이아웃과 플렉스 컨테이너의 장점을 모두 사용하고 싶다면.
상황에 따라 원하는 정렬 옵션과 여백 필요 여부를 고려해 선택하면 됩니다.