반응형
|
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' 카테고리의 다른 글
| HTML 이미지 관리를 위한 img 태그 기본적인 내용 (0) | 2019.01.03 |
|---|---|
| HTML 순서 없는 목록 만들기 ul, li 태그 사용법 (0) | 2018.10.31 |
| HTML address 태그 이용해서 제작자, 주소, 연락처 입력하기 (0) | 2018.10.13 |
| 스타일 시트 CSS 글자의 두께를 조절하는 font-weight 사용하는 방법 (0) | 2018.06.06 |
| HTML 텍스트 입력할 때 이용되는 태그들 사용법 (0) | 2018.05.02 |
| HTML 특수문자 출력, 공백을 적용할 수 있는 코드 (0) | 2018.03.02 |
| HTML 기본 구조 알아 보기 (0) | 2018.01.30 |
| HTML 줄바꾸기 태그 <br>, <p> 태그 사용하는 방법 (0) | 2015.09.25 |
