본문 바로가기
html

[html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

by 지구별에 2014. 3. 18.

 

 

 [html 기초] 제목 태그 h1, h2, h3, h4, h5, h6

 

이제부터 글자, 글꼴, 글꼴 색, 글꼴 크기 에 관련된 태그를  정리해 볼까 합니다. 

 

오늘 알아 볼 태그는 제목 태그 <h1> <h2> <h3> <h4> <h5> <h6>인데요

 

 

우선 알아둘 점은, html 작성 시 글꼴이나, 글자 크기 등을 특별히 지정하지 않으면

 

브라우저의 기본 글꼴과 크기로 표시됩니다.

 

 

예:

<html>
 <head>
 <title>지구별 안내서</title>
 </head>

<body>

1. 월요일<br>
2. 화요일<br>
3. 수요일<br>
4. 목요일<br>
5. 금요일<br>
6. 토요일<br>
7. 일요일

</body>
</html> 

 

 

제 브라우저는 웹 페이지 기본 글꼴이 '굴림체'로 설정되어

다음과 같이 화면이 나옵니다

 

      

 

만일, 갖고 계신 브라우저의 기본 글꼴이 '궁서체'라면 궁서체로 표시되겠지요..

 

 

 

<제목처럼 굵게 표시하는  h1, h2, h3, h4, h5, h6 태그>

 

<h1>는 가장 큰 제목을 쓸 때

<h2>는 그 다음 큰 제목

.

.

.

 

<h6>은 가장 적은 제목을 쓸 때 필요한 태그입니다.

 

 

예:

<html>
 <head>
 <title>지구별 안내서</title>
 </head>

<body>

<h1>1. 월요일</h1>

<h2>2. 화요일</h2>
<h3>3. 수요일</h3>
<h4>4. 목요일</h4>
<h5>5. 금요일</h5>
<h6>6. 토요일</h6>
7. 일요일

</body>
</html>

 

 

첫번째 예에서는, 줄바꿈 태그 <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/css기초] span, div

 

span, div 태그

 

[HTML, CSS 기초] class, id 선택자

반응형

댓글