|
[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6 |
이제부터 글자, 글꼴, 글꼴 색, 글꼴 크기 에 관련된 태그를 정리해 볼까 합니다.
오늘 알아 볼 태그는 제목 태그 <h1> <h2> <h3> <h4> <h5> <h6>인데요
우선 알아둘 점은, html 작성 시 글꼴이나, 글자 크기 등을 특별히 지정하지 않으면
브라우저의 기본 글꼴과 크기로 표시됩니다.
예:
|
<html> <body> 1. 월요일<br> </body> |
제 브라우저는 웹 페이지 기본 글꼴이 '굴림체'로 설정되어
다음과 같이 화면이 나옵니다
만일, 갖고 계신 브라우저의 기본 글꼴이 '궁서체'라면 궁서체로 표시되겠지요..
<제목처럼 굵게 표시하는 h1, h2, h3, h4, h5, h6 태그>
<h1>는 가장 큰 제목을 쓸 때
<h2>는 그 다음 큰 제목
.
.
.
<h6>은 가장 적은 제목을 쓸 때 필요한 태그입니다.
예:
|
<html> <body> <h1>1. 월요일</h1> <h2>2. 화요일</h2> </body> |
첫번째 예에서는, 줄바꿈 태그 <br>을 넣었지만
<h1>~<h6> 태그는 <p>태그와 마찬가지로 자동으로 줄바꿈이 된다는 것 유의해주세요!
<제목 태그 실행 화면>
<h1, h2, h3, h4, h5, h6 의 px, pt, em 크기>
| IE7 | IE8 | FF2 | FF3 | Opera | Safari3.1 | |
| H1 | 24pt | 2em | 32px | 32px | 32px | 32px |
| H2 | 18pt | 1.5em | 24px | 24px | 24px | 24px |
| H3 | 13.55pt | 1.17em | 18.7333px | 18.7167px | 18px | 19px |
| H4 | 1em | |||||
| H5 | 10pt | 0.83em | 13.2667px | 13.2833px | 13px | 13px |
| H6 | 7.55pt | 0.67em | 10.7333px | 10.7167px | 10px | 11px |
브라우저마다 기본값이 조금씩 다릅니다~ 그냥 참고용으로 보세요..
|
[참고] 브라우저 기본 글꼴 설정 방법 |
브라우저 글꼴 변경 방법은 생각보다 쉽습니다.. 아래 순서대로 따라 하시면 됩니다~
STEP 1: 브라우저 맨 위 <도구>→<인터넷 옵션> 클릭
STEP 2: 인터넷 옵션 창이 나오면 이 창 하단 [글꼴] 클릭
STEP 3: <글꼴> 팝업창이 뜨면 이곳에서 글꼴 지정을 해줌.
이번 시간엔 제목 태그 (h1, h2, h3, h4, h5, h6)에 대해 알아보았는데요
다음 시간엔 b, strong, em, i, cite, small 태그를 알아보겠습니다~
HTML 기초(태그 작성법, 저장 방법, 대소문자 구별, 서버에 올리는 방법)
'html' 카테고리의 다른 글
| [html/css]문서를 연결하는 a 태그 (href, title, target 속성) (9) | 2014.04.07 |
|---|---|
| [html 기초] b, strong, em, i, cite, small 태그 (0) | 2014.03.18 |
| [html기초] , br, pre, p 태그 (3) | 2014.03.12 |
| table 태그, tr 태그, th 태그, td 태그와 table 속성 정리 (7) | 2014.03.05 |
| html, css, javascript 주석 처리 방법 (2) | 2014.02.26 |
댓글