제목 태그 h1~h6와 폰트의 크기 em

h1, h2, h3, h4, h5, h6 태그는 문서나 특정 영역의 제목을 정의할 때 사용하는 태그입니다.

가장 주요한 제목은 h1을 사용하며 하부로 2번째 제목을 사용할 경우 h2, 그 하부로 또다른 제목이 필요하다면 h3을 사용합니다. 보통의 문서에는 그렇게 하부에 하부에 하부에... 로 들어갈 필요가 없기때문에 대부분은 h1, h2 정도에서 마무리가 되며 h3은 간혹 있을까 말까하는 정도 입니다.

h1~h6

개발자 도구로 h1~h6의 기본적인 사이즈 확인해 보면

h1 = block, margin top bottom 0.67em, font-size: 2em, font-weight:bold

h2 = block, margin top bottom 0.83em, font-size: 1.5em, font-weight:bold

h3 = block, margin top bottom 1em, font-size: 1.17em, font-weight:bold

h4 = block, margin top bottom 1.33em, font-weight:bold

h5 = block, margin top bottom 1.67em, font-size: 0.83em, font-weight:bold

h6 = block, margin top bottom 2.33em, font-size: 0.67em, font-weight:bold

 

종합해 보면 h~ 태그는 블럭속성을 가지고 두꺼운 글씨체를 가지고 있으며 숫자가 증가할 수록 작아지고 바깥쪽 상하 여백이 커진다고 할 수 있습니다.

 

728x90

 

em 단위

em 단위는 부모로 부터 상속받은 폰트 사이즈 입니다. 현재 h~ 태그들은 body가 부모 요소 이므로 기본 사이즈 16px이 1em이 됩니다. 만약 부모의 font-size가 14px 이라면 1em = 14px이 됩니다. 부모의 font-size가 12px 이라면 1em=12px이 되겠지요

 

위와 같이 개발자 도구로 h~ 모두 확인해 보면 h4 태그는 font-size에 대한 언급이 없습니다. 이전 강좌에서 이런 경우는 부모로부터 같은 크기로 상속받았다고 했습니다. 즉 h4는 1em=16px 이라는 겁니다.

 

다시 h1의 폰트 사이즈를 보시면 2em 입니다. 그러니까 2배 크기라는 것이구요 32px 이됩니다.

그려면 h2는 1.5em = 16 * 1.5 = 24px이라는 계산이 나옵니다.

이렇게 나머지도 px로 계산할 수는 있습니다만 수치까지 알고 있을 필요는 없습니다. h1 폰트의 크기가 2배정도의 크기이며 나머지는 작아지다가 h4일때 정상 크기가 되고 이하로는 더 작다 라고만 알고 있으면 될 것 같습니다. 그러면 margin도 대략 유추가 가능하겠지요

 

 

다시 돌아가서 h~ 태그 사용시 많이 실수 하는 것은 문서의 제목을 조금 작게 하고 싶다고 해서 h3, h4를 쓰는 것입니다. 하지만 이전에도 언급했듯이 html 태그는 의미가 가장 중시되기 때문에 갑자기 h1, h2 가 없는데 h3이 나오는 형태는 좋지 않은 방법입니다. 이 강좌 처음에 언급했듯이 의미데로 먼저 h1을 사용하고 그 하부에는 h2 ... 이런 형태로 사용하셔야 올바른 표현입니다. 글씨의 크기를 작게 하고 싶다면 css를 이용해서 조절하는 것이 좋습니다.