728x90
반응형
웹에서 가운데 정렬을 할 때, 초보자가 가장 많이 헷갈리는 부분이 바로
margin: auto와 text-align: center의 차이입니다.
1. margin: auto의 원리 – 블록 요소를 가운데 정렬
main {
width: 700px;
margin: 32px auto;
}
- main 같은 블록 요소는 기본적으로 왼쪽부터 쌓임.
- 그런데 width를 주면 요소가 화면 전체를 차지하지 않고 남는 공간이 생김.
- margin-left: auto; margin-right: auto;는 남는 공간을 좌우로 균등하게 분배해서, 블록 요소 자체가 화면 가운데로 이동함.
👉 즉, 블록 요소 자체를 정렬하는 방법이에요.
2. text-align: center의 원리 – 내부 텍스트/인라인 요소 정렬
main {
text-align: center;
}
- text-align은 부모 박스 안에서 인라인 요소(텍스트, span, img 등)의 정렬 방식을 결정.
- 따라서 블록 요소(main, div, section 등)를 가운데로 옮기지 않음.
- 대신, 그 안의 글자나 인라인 요소들만 가운데로 정렬됨.
👉 즉, 자식 인라인 요소를 정렬하는 방법이에요.
3. 두 가지 비교 정리
| 구분 | margin: auto | text-align: center |
| 적용 대상 | 블록 요소 | 인라인 요소 (텍스트, span, img) |
| 필요 조건 | width 값 지정 필요 | display: inline, inline-block, 또는 텍스트 |
| 효과 | 요소 박스 자체를 가운데 정렬 | 박스 안의 텍스트/인라인 요소만 가운데 정렬 |
| 예시 | main, div, section | span, a, 텍스트, img |
4. 왜 text-align: center로는 안되나?
main 같은 블록 요소는 부모 컨테이너(예: <body>) 안에서 이미 독립적인 박스로 자리 잡아요.
이 블록 요소 자체를 옮기려면 margin 같은 레이아웃 속성이 필요하지,
text-align은 내부 자식에만 적용되기 때문에 먹히지 않는 거예요.
5. 실제 코드 비교
<main>
가운데 정렬된 텍스트
</main>
/* 방법 1: main 자체를 가운데 */
main {
width: 700px;
margin: 0 auto; /* 블록 요소 자체가 중앙 */
}
/* 방법 2: main 안의 텍스트만 가운데 */
main {
text-align: center; /* 내부 글자만 중앙 */
}
✅ 한 줄 요약
- 박스 자체를 가운데로: margin: auto
- 박스 안의 글자를 가운데로: text-align: center
블로그 글이라면 여기서 마지막에 “헷갈리지 않게 기억하는 법” 같은 포인트 넣으면 좋아요.
예:
👉 "margin은 박스 자체, text-align은 박스 안의 글자"
728x90
반응형
'front-end development' 카테고리의 다른 글
| JavaScript console.log(): 개발자의 필수 도구 (0) | 2026.01.22 |
|---|---|
| JavaScript 메서드(Method): 객체 안의 함수 활용하기 (0) | 2026.01.22 |
| 인라인 요소의 두 종류 - 대체 인라인, 비대체 인라인 (0) | 2025.09.10 |
| 블록요소들끼리의 margin collaspe (마진 겹침) 현상이 발생하는 이유 (0) | 2025.09.09 |
| [지식루프 웹개발] 002. 웹사이트는 어떻게 만들어질까? (왕초보 가이드) (0) | 2025.08.22 |