text-align이 안 먹는 이유? block과 inline의 차이

배운 내용을 가지고 miniTodo를 만들고 있었다.

맨 위 제목을 h1을 사용해

이런 식으로 하고 싶었다.

그런데

이렇게 떴다.

처음 코드

h1 {
  text-align: center;
  background-color: black;
  color: white;
}

배경을 글자(content)만 해당하게 하려면 블록 요소를 인라인 요소로 바꿔야 한다는 게 떠올랐다.
그래서

display: inline

추가했지만 가운데 정렬이 되지 않았다.

블록요소와 인라인 요소의 가운데 정렬 방법은 다른 건가 생각이 들었다.
그래서 찾아보았다.

왜 text-align: center 가 안 먹었는데?

블록 요소는 한 줄을 다 자기 공간으로 사용한다. 그래서 자기 공간이기 때문에 조절이 가능한 것.
인라인 요소는 content 영역만 자기 공간으로 사용한다. 그래서 나머지 공간에 대해서는 권한이 없는 것
~~으로 이해했다. ~~
그래서 인라인 요소를 가운데 정렬하려면 블록 요소로 감싸고, 부모에게(블록 요소) text-align: center를 한다.

text-align은 자식과 자손에게도 상속이 되기 때문이다!!

최종 코드

div.container {
  text-align: center;
}

div>h1 {
  display: inline;
  background-color: black;
  color: white;
}

h1 {
    background-color: black;
    color: white;
}

최종 완성 모습(문제 해결)

알게 된 점

1⃣ 인라인 요소는 content 영역만 자기 공간이다.
2⃣ 인라인 요소를 text-align을 하기 위해서는 블록 요소를 부모로 감싸서 사용해야 한다.