H2가 H1보다 큰 이유는 무엇입니까?

H2가 H1보다 큰 이유는 무엇입니까?

---

다음 코드 조각에서 H2 콘텐츠가 H1 콘텐츠보다 큰 이유는 무엇입니까?

<article>
    <section>
    <header>
        <h1>First Header</h1>
    </header>
    </section>
    <section>
    <header>
        <h2>Second Header</h2>
    </header>
    </section>
</article>

http://jsfiddle.net/abugp/

아래 스 니펫에서 H1 콘텐츠가 더 크지 만 위의 콘텐츠가 아닌 이유는 무엇입니까?

<h1>First Line</h1>
<h2>Second Line</h2>

http://jsfiddle.net/59T43/

---

스타일을 지정하지 않았으므로 머리글의 크기는 브라우저의 기본 스타일 시트에 따라 결정됩니다. 특히 이는 두 헤더의 상대적 크기가 뷰어의 브라우저에 따라 다를 수 있음을 의미합니다.

Chrome 33에서 바이올린을 보면 설명하는 효과를 볼 수 있습니다. 제목을 마우스 오른쪽 버튼으로 클릭하고 "요소 검사"를 선택 하면 제목 주변에 <article>및 / 또는 <section>태그 가 있기 때문에 문제가 발생했음을 알 수 있습니다 .

특히 Chrome의 기본 스타일 시트에는 일반적으로 다음 규칙이 포함됩니다.

h1 { font-size: 2em }

과:

h2 { font-size: 1.5em }

그러나 이전 규칙은 섹션 제목을 일반 "전체 페이지"제목보다 작게 만들도록 설계된 일부 더 구체적인 규칙에 의해 내부 <article>및 / 또는 <section>태그보다 우선 적용됩니다 .

:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.5em;
}

:-webkit-any(article,aside,nav,section)
:-webkit-any(article,aside,nav,section) h1 {
    font-size: 1.17em;
}

비표준 :-webkit-any(...)선택기는 아마도 괄호 안에 나열된 태그와 일치합니다. 그 효과는 임의이다 <h1>내부 호 <article>, <aside>, <nav>또는 <section>태그는 통상의 크기로 감소 <h2>호, 및 <h1>내부 개의 그러한 태그는 아마도 통상의 크기를 더 아래로 수축 <h3>정도.

결정적으로 Chrome 기본 스타일 시트 에는<h2> 태그에 대한 특별한 규칙이 없으므로 항상 (Chrome 33에서는) 항상 동일한 크기로 표시됩니다. 따라서 둘 이상의 <article>및 / 또는 <section>태그로 둘러싸인 <h1>경우 <h2>.

---

스타일을 지정하지 않으면 브라우저가 기본 스타일을 선택합니다. 첫 번째 예에서 h1과 h2는 섹션의 헤더 내부에 있고 두 번째 경우에는 루트에 있습니다. 그런 다음 행동이 다르다는 것이 허용됩니다.

참조 URL : https://stackoverflow.com/questions/22898559/why-is-h2-larger-than-h1