제 목

HTML 강좌 - [제03강] 글자를 강조하려고 할때 사용하는 글자 관련 태그들

작성자

컴쟁이

등록일

2008-01-08 01:05:61

조회수

12,050

이번에는 글자의 크기를 쉽게 지정해 주는 방법으로 보통은 문서의 제목으로 많이 사용하는 태그를 알아보자! 총 6가지 종류가 있는데 말이 6가지지, 실은 한가지나 마찬가지로 외우기 쉽다. 그밖에 강조하고자 하는 글자에 대한 몇가지 태그를 살펴보기로 하자.

1. <H1> : Header

- <H1> </H1> : 가장 크고 굵다.
- <H6> </H6> : 가장 작고 가늘다.
- <H2 align="center"> </H2> : 정렬 옵션을 추가할 수 있다.

2. 예제-1 (H1~6, Align)

[Source]

<html>
<head>
<title>
글자의 크기 및 굵기를 결정하는 H1태크
</title>
</head>

<body>
<H1>문서 제목</H1>
<H2>문서 제목</H2>
<H3>문서 제목</H3>
<H4>문서 제목</H4>
<H5>문서 제목</H5>
<H6>문서 제목</H6>
<H3 align="left">문서 제목을 왼쪽으로 정렬</H3>
<H4 align="center">문서 제목을 중앙으로 정렬</H4>
<H5 align="right">문서 제목을 오른쪽으로 정렬</H5>
</body>
</html>

[Result]

문서 제목

문서 제목을 왼쪽으로 정렬

문서 제목을 중앙으로 정렬

문서 제목을 오른쪽으로 정렬

3. <Strong> : Strong

- <STRONG> </STRONG> : 글자를 굵게

4. <Em> : Emphasizes

- <EM> </EM> : 글자를 강조(이태릭체)

5. <Strike> : Strike

- <STRIKE> </STRIKE> : 글자를 강조

6. <Sub> : Under의 의미

- <SUB> </SUB> : 아래첨자로 표시

7. <Sup> : Avove의 의미

- <SUP> </SUP> : 윗첨자로 표시

8. 예제-2 (글자강조 종합선물 세트)

[Source]

<html>
<head>
<title>
강조하고자 하는 글자들은 이렇게 사용해라!
</title>
</head>

<body>
<strong>굵은 글자로 강조하려고 할때~</strong><p>
<em>강조하고자 하는 글자를 이태릭체 처럼~</em> <p>
<strike>글자를 가로지는 선을 그어라~</strike> <p>
글자를 <sub>아래첨자로 표시 </sub> <p>
글자를 <sup>윗첨자로 표시 </sup><p>
</body>
</html>

[Result]

굵은 글자로 강조하려고 할때~

강조하고자 하는 글자를 이태릭체 처럼~

~~글자를 가로지는 선을 그어라~~~

글자를
아래첨자로 표시

윗첨자로 표시
글자를

▶ 강조하고자하는 글자와 관련된 태그들의 종합예제를 보니 한층 이해가 더해질 것이다.

작성자 : 웹제작 토탈 커뮤니티 (http://www.webmadang.net) 컴쟁이