HTML 글자태그: H태그와 FONT태그
안녕하세요! 이미보라입니다.
지난 시간, 우리는 HTML 문서와 태그의 특징을 알아보고, 이와 관련된 문단 태그들을 살펴보았습니다.
오늘은 텍스트 , 즉 글자의 형태를 결정할 수 있는 글자태그 중에서 H태그와 FONT 태그에 대해 알아보도록 하겠습니다.
<Hn> ... </Hn>태그
헤드라인(Headline)의 약자로, 제목 또는 머리글의 글자크기를 지정할 수 있는 태그입니다.
이때 n은 숫자 1에서 6까지 중 하나를 작성하면 해당하는 사이즈로 변경됩니다.
<H1> </H1> 태그의 크기가 가장 크고, <H6></H6> 태그의 크기가 가장 작습니다.
복합 태그로 시작 태그와 종료 태그로 구성되며, 종료 태그에는 줄 바꿈 기능을 포함하고 있습니다.
<FONT> ... </FONT>태그
- size : 글자크기 1~7
- color : rgb 또는 컬러 이름
- face : 글꼴
<FONT></FONT>태그의 경우 옵션을 통하여 작성된 텍스트의 크기, 색깔, 글꼴을 지정할 수 있습니다.
옵션 size는 숫자 1에서 7까지 중 하나의 값을 가질 수 있습니다.
이때, size 옵션 값 1이 가장 작은 글자크기이고, 7이 가장 큰 글자 크기입니다. (헤드라인과 대소가 반대임)
옵션 color는 RGB값 또는 컬러 이름을 가질 수 있고, 해당하는 텍스트의 색깔을 지정할 수 있습니다.
옵션 face는 굴림체, 돋움체, 궁서체, 바탕체 등의 글꼴을 설정할 수 있습니다.
rgb코드
rgb코드란, 색상 코드 중 하나로, red, green, blue의 앞 글자를 따서 rgb코드라고 합니다. 다시 말해서, red, green, blue의 색상 값을 16진수의 형태로 나타내어 이를 붙여서 만든 코드입니다.
색상명 white의 경우 rgb 코드 값으로 #ffffff , black의 경우 rgb코드 값으로 #000000를 가집니다.
더 많은 rgb 색상 코드는 아래의 사이트에서 확인할 수 있습니다.
색상, RGB, CMYK, 컬러 코드,유사 색상
www.analogouscolors.com
실습 예제 코드
<HTML>
<HEAD> <TITLE> 문단태그 실습</TITLE></HEAD>
<BODY>
<H1> 헤드라인태그 1</H1>
<H2> 헤드라인태그 2</H2>
<H3> 헤드라인태그 3</H3>
<H4> 헤드라인태그 4</H4>
<H5> 헤드라인태그 5</H5>
<H6> 헤드라인태그 6</H6>
<BR><BR>
<FONT> FONT태그 기본값 </FONT>
<FONT size = "1" color = "red" > FONT태그 실습1 </FONT>
<FONT size = "2" color = "orange"> FONT태그 실습2 </FONT>
<FONT size = "3" color = "yellow"> FONT태그 실습3</FONT>
<FONT size = "4" color = "green"> FONT태그 실습4</FONT>
<FONT size = "5" color = "#0000ff" face = "굴림체" >FONT태그 실습5 </FONT>
<FONT size = "6" color = "navy" face = "바탕체" > FONT태그 실습6</FONT>
<FONT size = "7" color = "pink" face = "궁서체"> FONT태그 실습7</FONT>
</BODY>
</HTML>
위의 예제 코드를 실행하면 다음과 같습니다.
헤드라인 태그의 경우 1에서 6까지 각 사이즈가 다르고, 기본적으로 bold (굵게), 그리고 줄 띄우기 (<br>) 효과가 있음을 확인할 수 있습니다.
font 태그의 경우 속성 값을 설정하지 않으면, 검정 색상의 font size =3의 값의 크기로 설정되며, 글꼴은 웹브라우저에서 설정된 글꼴로 보이는 것을 확인할 수 있습니다.
font 태그는 각 속성 값에 따라 색상, 글자크기, 글꼴을 설정할 수 있음을 확인할 수 있습니다.
오늘은 글자 태그 중에서 헤드라인 태그와 font 태그를 살펴보았습니다. 다음 포스트에서 문자 스타일을 지정하는 태그들을 알아보도록 하겠습니다. 감사합니다.