#HTML 강좌 - FONT 테그

안녕하세요 낭만고양이 입니다. 오늘은 FONT 테그에 대해서 배워보도록 하겠습니다.

글자를 표현하는 가장 기본적인 테그이니 알아두시면 매우 유익할것입니다.

이 포스팅을 보시기전에 앞강좌를 보시지 않았다면 보시고 아래링크를 따라가서 공부하고 오세요.

#HTML 강좌 - 표제테크(h) 줄바꿈테그(br/p) 수평선테그(hr)

#HTML 강좌 - 글자의 서식 , 주석처리 방법

#HTML 강좌 - 이미지 삽입

#HTML 강좌 - 링크걸기

■  FONT  테그

<font>태그는 size, color, face 3가지의 속성을 가집니다.  예제를 통해 배워보도록하겠습니다.

낭만고양이와 함께 HTML 공부를 하세요 


낭만고양이와 함께 HTML 공부를 하세요 


낭만고양이와 함께 HTML 공부를 하세요 

※ 위 소스가 제대로 안보이면 아래 텍스트 파일을 다운받으세요.

첨부파일 다운 →  

1.txt

위 소스를 다운받아서 test.htm 으로 저장한후 실행하보면 아래와 같이 뜰것입니다.

이미 눈치를 채셨겠지만 size 속성은 글자의 크기를 color 속성은 글자의 색상을 face 속성은 글꼴을 지정합니다. 

글자  size는 1부터 7 까지 사용가능합니다. 기본값은 3 입니다.

<font size="1">글자 사이즈는 아주작은 1입니다.</font> 

<font size="2">글자 사이즈는 그다음작은 2입니다.</font> 

<font size="3">글자 사이즈는 기본값 3입니다.</font> 

<font size="4">글자 사이즈는 3보다 커요</font> 

<font size="5">글자 사이즈는 5입니다.</font> 

<font size="6">글자 사이즈는 6입니다.</font> 

<font size="7">글자 사이즈는 아주큰 7입니다.</font> 

색상을 지정하는 color 속성은 white ,black,blue,green 등등 영문으로 지정가능하지만 원하는 색상을 다 표현하기에는 한계가 있습니다, 그래서 색상을 헥사코드로 변환해서 입력하면 보다 다양한 색상을 표현할수가 있습니다. 여기 사이트로 가시면 원하는 색상을 헥사코드로 보여줍니다. 

<font color="red">빨강색</font> (일반 색명)

<font color="#ff0000">빨강색</font> (RGB 핵사코드)

<font color="blue">파란색</font> (일반 색명)

<font color="#0000ff">파란색</font> (RGB 핵사코드)

<font color="green">녹색</font> (일반 색명)

<font color="#00ff00">녹색</font> (RGB 핵사코드)

<font color="yellow">노란색</font> (일반 색명)

<font color="#fff000">노란색</font> (RGB 핵사코드)

<font color="black">검정색</font> (일반 색명)

<font color="#000000">검정색</font> (RGB 핵사코드)

<font color="white">흰색</font> (일반 색명)

<font color="#ffffff">흰색</font> (RGB 핵사코드)

위와 같은 형태로 색상을 넣어주시면 됩니다.

face 는 글자의 글꼴을 지정합니다. 이 테그를 사용하여 글꼴을 마음데로 지정할수가 있습니다.

<font face="돋움체">낭만고양이</font>

<font face="명조체">낭만고양이</font>

<font face="굴림체">낭만고양이</font>

<font face="바탕체">낭만고양이</font>

<font face="신명조">낭만고양이</font>

<font face="Arial">낭만고양이</font>

위와 같은 형태로 사용하시면됩니다.

나중에 ccs 를 사용해서 굴자의 스타일을 지정하는 방법을 배우시겠지만 지금은 기초를 튼튼튼히 하셔야 하기에 html 필수 테그인 font 테그에 대하여 공부하였습니다. 가장 기초적인 테그인 만큼 꼭 숙지하시기 바랍니다.

제 글이 도움이 되셨다면  "공감 (♡)" 한번씩 클릭해주시고 응원의 댓글들도 남겨주세요.