justify-content VS text-align

justify-content vs text-align

공통점

두 속성 모두 수평 방향 정렬에 사용

---

차이점

1. 적용 대상
   • Flexbox (display: flex):
     모든 자식 요소(block 요소: div, section 등, inline 요소: span, a 등)를 정렬할 수 있음.
   • Text-align:
     텍스트나 inline 요소(span, a 등)를 정렬할 때 주로 사용.

---

2. 정렬 방식
   • Flexbox (justify-content):
     부모 요소 안에서 자식 요소들의 위치와 간격을 유연하게 제어.
     예) justify-content: center; (가운데), justify-content: flex-end; (오른쪽 끝)
   • Text-align:
     text나 inline 요소를 부모 요소 기준으로 정렬.
     예) text-align: center; (가운데), text-align: right; (오른쪽 끝)

---

3. 언제 사용?
   • Flexbox:
     여러 자식 요소(div, button 등)를 동적으로 정렬하거나,
     수평뿐 아니라 수직 정렬(Flexbox는 수평뿐만 아니라 수직 정렬도 가능. 이를 위해 align-items나 align-self를 사용함.)이 필요할 때.
   • Text-align:
     단순히 텍스트(h1, p)나 inline 요소(a, span)를 정렬할 때.

---

예시

Flexbox

.parent {
  display: flex;
  justify-content: center; /* 자식 요소를 가운데 정렬 */
}

• 자식 요소: div, button 같은 block 요소 정렬 가능.

Text-align

.parent {
  text-align: center; /* 텍스트와 inline 요소를 가운데 정렬 */
}

• 자식 요소: span, a 같은 inline 요소와 텍스트 정렬에 적합.

---

결론

• Flexbox: 다양한 자식 요소를 동적이고 유연하게 정렬.
• Text-align: 텍스트 중심의 간단한 정렬.