<header>,<h1> 스타일링(부제: font-size)

header, h1에 관한 정보

• header는 margin이 없다.
• 아래 코드처럼 header 안에 h1이 있을 때 header에 font-size 속성을 주면(예를 들어 72px를 주면) h1 안의 텍스트는 72px보다 더 크게 설정된다(엄청 커진다). 왜냐하면, h1은 기본적으로 다른 텍스트보다 크게 설정되기 때문이다.

<header>
   <h1>제목</h1>
</header>

header {
  font-size: 72px;
}

직접 확인해 보자

👉 만약 위의 코드에 있는 텍스트 크기를 72px로 설정하고 싶어서 css에서 header를 선택한 다음 font-size를 72px로 설정하면 h1은 72px보다 훨씬 큰 사이즈가 된다.

이건 72px가 아니다. 너무너무 크다...

h1이 정말 72px보다 큰지 좀 더 자세히 살펴보자면...

👉 만약 header font-size를 72px으로 설정하고 아래와 같이 일반 텍스트를 넣어 보면, p 태그 안의 텍스트 크기가 72px가 된다는 걸 알 수 있다. h1는 기본적으로 다른 텍스트보다 크게 설정되기 때문에(그게 디폴트다) 72px인 p 태그 속 텍스트보다 더 커진다.

<header>
   <h1>제목</h1>
   <p>일반 텍스트</p>
</header>

일반 텍스트는 72px고 h1인 "제목"은 훨씬 크다는 것을 알 수 있다.

그렇다면 어떻게 해야 h1 크기를 72px로 설정할 수 있나?

h1 텍스트 크기를 원하는 사이즈로 지정하고 싶으면 아래와 같이 h1에도 추가로 스타일 작업을 해야 한다.

<header>
   <h1>제목</h1>
   <p>일반 텍스트</p>
</header>

header {
  font-size: 72px;
}
h1 {
  font-size: 72px;
}

그러면 이렇게 둘 다 72px이 된다. h1은 디폴트값이 bold이기 때문에 더 굵다는 차이만 있다.

h1에만 스타일링을 하면 어떨까?

p 태그를 지우고 heading 태그 안의 font-size도 지워 보자.
그러면 아래와 같은 코드가 남는다.

<header>
  <h1>제목</h1>
</header>

h1 {
  font-size: 72px;
}

(마진 확인을 위해 body 배경색을 넣어보았다.)
이렇게 위 아래 이상하게 margin이 생겨버린다. heading은 margin이 없는데 h1은 디폴트값으로 위, 아래 마진값이 이미 설정돼 있어서 h1이 heading 높이를 넘어가기 때문인 것 같다. 이 경우 h1 margin 값을 0으로 주면 문제가 해결된다.

짠! 해결됐다.

방금 살펴본 것처럼, heading 안의 h1에 스타일을 주는 데는 두 가지 방법이 있다.

1. header에 스타일 주기
2. h1에 스타일 주기

header에 스타일 작업을 할 필요가 있을 때도 있지만, 비교적 번거로우므로...

✨ h1 태그 폰트 크기를 설정하고 싶다면, (가능하다면) h1 태그에만 font-size 속성을 주는 게 좋다.

참고: https://scrimba.com/learn/frontend/solution-5-styling-the-title-of-our-page-c4Mwy9sR?a=7499.64.12.L24_13-24_14