🐒 마주친 문제
하나의 템플릿 안에 section으로 구역을 나누었고, 이때 h 태그를 사용함에 있어서 문제가 발생했다. 바로바로 h1과 h2 태그의 크기가 똑같았던 것이다... h3는 크기가 달랐다. 🙀 처음엔 설정을 잘못한 줄 알았는데 이유가 있었다.

1. <section>

<section>는 제목이 있는 주제별 콘텐츠 그룹 또는 응용 프로그램 영역을 나타낼때 사용하며 <h> 요소를 포함하는 것을 강력하게 권장한다.

2. 원인

브라우저가 <h2> 와 같은 레벨로 스타일을 적용해버린다.

• <section> 에서는 <h1>을 쓸 일이 없기 때문에 다르다.
• <h1> 는 한 페이지 당 하나만 사용하는 것을 권장한다.
• 여러 개를 사용하더라도 오류는 나지 않지만 하나만 사용하는 것이 올바르다. 이는 스크린 리더 사용자나 SEO에도 적합하다.
• 그러나 <section>은 구획을 나누는 요소이기 때문에 대부분 여러 번 사용된다.

결과적으로 <h1> 는 한 페이지당 하나만 사용해야하고, <section>에서는 <h2>~<h6>가 사용된다.