본문 바로가기

HTML / CSS / Java Script

기본 태그로 글자 스타일 바꾸기 <H>, <FONT> 태그

h태그크기비교


<H>, <FONT>, 태그

웹문서에서 글자를 다양한 형태로 보여주기위한 <H>, <FONT>, 태그 사용 방법



글자 크기를 조절하는 태그는 두 가지입니다.
둘 중에 쉽게 사용할 수 있는 <H> 태그는 총 6단계로 설정돼있습니다.
태그 안에 숫자가 커질수록 글자 크기가 작아집니다.


<H1>H1 글자 크기</H1>
<H2>H2 글자 크기</H2>
<H3>H3 글자 크기</H3>
<H4>H4 글자 크기</H4>
<H5>H5 글자 크기</H5>
<H6>H6 글자 크기</H6>

H 태그에서 정렬하기

태그에 속성이라는 것을 이용해서 여러 가지 특성을 부여할 수 있다.
<태그 속성 = 값> 형식으로 사용
속성은 태그에 따라 정해진 것만 사용 가능하고 하나의 태그에 여러 개의 속성은 가능하다.
H 태그를 사용하면서 문자를 정렬하려면 align 속성을 사용하면 된다.
align은 문자의 정렬하는 속성으로 center, right, left
각 값에 따로 가운데 오른쪽 왼쪽으로 정렬됩니다.


예

<H1 align="center">가운데 정렬</H1>
<H2 align="left">왼쪽 정렬</H2>
<H3 align="right">오른쪽 정렬</H3>


문자의 속성을 제어하는 태그는 속성값을 이용하여 글자 색상, 크기, 글꼴 등을 지정할 수 있다.
<FONT> 태그의 size 속성값은 글자 크기는 1~7까지 지정하고 숫자가 커지면 글자도 커집니다.
+2나 -1처럼 입력하여 기본 크기 3에 대한 상대적인 크기를 나타낼 수도 있습니다.


<H1>H1 글자 크기</H1>
<H2>H2 글자 크기</H2>
<H3>H3 글자 크기</H3>
<H4>H4 글자 크기</H4>
<H5>H5 글자 크기</H5>
<H6>H6 글자 크기</H6>
<FONT SIZE="1">Font1 글자 크기</FONT>
<FONT SIZE="2">Font2 글자 크기</FONT>
<FONT SIZE="3">Font3 글자 크기</FONT>
<FONT SIZE="4">Font4 글자 크기</FONT>
<FONT SIZE="5">Font5 글자 크기</FONT>
<FONT SIZE="6">Font6 글자 크기</FONT>
<FONT SIZE="7">Font7 글자 크기</FONT>
<FONT SIZE="+2">Font+2 글자 크기</FONT>
<FONT SIZE="+1">Font+1 글자 크기</FONT>
<FONT SIZE="-1">Font-1 글자 크기</FONT>
<FONT SIZE="-2">Font-2 글자 크기</FONT>


FONT는 size 속성을 이용하여 글자 크기만 바꾸는 게 아니라 color와 face 속성을 이용하여 색상과 글꼴도 바꿀 수 있다.
color : RGB 값이나 색상 이름을 지정
face : 글꼴을 지정할 수 있고 방문자의 시스템에 해당 글꼴이 없으면 기본 글꼴로 대체함


<FONT SIZE="6" COLOR="red" FACE="돋움체">돋움체</FONT>
<FONT SIZE="6" COLOR="#0900FF" FACE="궁서체">궁서체</FONT>


글자를 편집할때 사용하는 태그입니다.

글자 모양


글자모양

<B>B : 굵게</B>
<U>U : 밑줄</U>
<I>I : 이탤릭체</I>
SUB : 아래첨자 H<SUB>2</SUB>O
SUP : 위 첨자 : 10<SUP>2</SUP>
<BIG>BIG : 조금크게</BIG>
<SMALL>SMALL : 조금크게</SMALL>
<STRIKE>STRIKE : 취소선</STRIKE>
<TT>TT : 타자기체</TT>
<KBD>KBD : 타자기체</KBD>
<CODE>CODE : 타자기체</CODE>