HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기

HTML

HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기

 

환경: Eclipse Mars, Chrome

 

제목 크기를 조절하는 <Hn> 태그는 레벨 별로 폰트크기와 텍스트 Bold 를 적용합니다. 텍스트 크기는 <h1> 부터 <h6> 까지 6단계이며, 1 레벨이 제일 크고 숫자가 커질 수록 폰트가 작아 집니다. 그리고 Bold 는 특별한 설정 없이 무조건 적용합니다. 

 

보통 브라우저의 기본 폰트 픽셀은 16px 입니다. 샘플은 h1 ~ h6 까지 크기와 기본 폰트를 비교해 놓았습니다. 그럼 h1 h6 의 픽셀 크기는 어느 정도 될까요? 이것은 기본 폰트 크기에 따라서 틀려 집니다. 그러니까 h1 은 기본 폰트의 2배이고 h2 1.5배가 됩니다. 이런 폰트 크기 단위를 em 이라고 하는데 브라우저의 기본 폰트 크기에 따라 배율을 숫자로 표기한 것입니다. 아래 내용은 em pixel 간의 단위 변환을 표시한 것입니다. 이것은 기본 폰트가 16px 라는 것을 전제로 하는 것입니다. 만약 설정을 변경하면 px 값도 전부 틀려지겠죠.

 

¤ h1 : 2em, 32px

¤ h2 : 1.5em, 24px

¤ h3 : 1.33em, 21.28px

¤ h4 : 1.17em, 18.72px

¤ h5 : 0.83em, 13.28px

¤ h6 : 0.67em, 10.72px

 

샘플의 결과 화면으로 체크해 보시면 알겠지만 16px 과 가장 근접한 태그는 h4 입니다. 그리고 글자 모두 기본적으로 Bold 처리가 되어 있습니다.

 

<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=euc-kr">
<title> hn 태그 </title>
 </head>
 <body>
	<h1><h1>제목 레벨 1</h1>
	<p>적용하지 않았을 때 폰트 크기 </p>
	<h2><h2>제목 레벨 2 </h2>
	<p>적용하지 않았을 때 폰트 크기</p>
	<h3><h3>제목 레벨 3 </h3>
	<p>적용하지 않았을 때 폰트 크기</p>
	<h4><h4>제목 레벨 4 </h4>
	<p>적용하지 않았을 때 폰트 크기</p>
 </body>
</html>

 

HTML 텍스트 크기를 조절하는 제목 태그 Hn 사용하기

 

Posted by 녹두장군