text태그

여기에서는 태그를 배우는데 가장 기초인 text 태그에 대해서 배워보도록 하겠습니다. 말 그대로 글자에 어떠한 기능을 하는 태그입니다. 주로 글자의 색깔, 크기, 움직임, 글꼴 등을 나타낼 수 있니다....자~ 그럼 한 가지씩 배워볼까요?^^

 ※ 글자태그의 기본

 글자태그는 기본적으로 <font></font> 입니다. 그런데 <font></font>☜이것만 있어서는 아무런 효과를 나타낼 수 없구요....단지 기본적인 뼈대이며...<font></font>☜이것에 각각의 기능을 나타내는 속성이 붙는 겁니다.  예를 들자면  <font color="green">녹색</font> 이런식 이져^^  

 ※ 글자색 조정 ( <font color="색명 or RGB색상코드">  )

 제일 먼저 글자의 색을 조정하는 방법입니다. 색을 영어로 color 라고 하죠?^^ 모르시는 분들은 없겠져?^^ 그대루 써주시면 됩니다. 단, 태그를 사용하는데 있어서 글꼴을 제외하곤 한글을 쓰지 못합니다. 전부다 영어나 기호를 사용해야 하죠. 그러기 때문에 색명을 적을 때도 영어로 "red" , "green" , "yellow" ☜이런 식으로 적어 주어야 합니다.

 위에 표를 보니 이해가 되시져....^^ 뒤에 두개는 RGB색상코드를 넣은 겁니다. RGB색상코드를 알고 싶은 분은 ☞[이곳을 클릭] 하시면 RGB색상코드표가 있으니 거길 참조하시길 바랍니다.

 ※ 글자 크기 조정 ( <font size="1~7"> 혹은 <font style=font-size:수치pt> 혹은 <h1>~<h6> )

   글자 크기를 조절하는 방법입니다. 컬러와 마찬가지로 크기는 영어로 size 져..^^ 그리고 태그 안에 수치나 숫자가 커질 수록 글자크기가 커집니다.(주의 : <h>의 경우숫자가 작을 수록 커짐) 단, font size의 경우 최대 7까지 밖에 크게 할 수 없구요...h의 경우도 최대 h1까지가 한도이죠. 예제를 한번 볼까요?^^

   아시겠져^^ 마지막에 가장 큰 글씨는 스타일 이용한 건데요....이건 수치를 넣은 만큼 크기가 무한대로 커지기 때문에 사용하실 때 조심하시도록.......그리고 앞에<font style....> ☜이 부분에 font 대신 다른 태그가 들어갈 수도 있습니다. 다른 태그를 집어 넣으면 해당태그에 속하는 글자의 크기가 지정된 수치만큼 커집니다.^^

 ※ 글꼴 조정 ( <font face="글꼴"> )

   이번에는 글꼴 조정하는 방법입니다. 글꼴이 뭔지는 아시져? ^^ 우리가 "돋움체","궁서체","바탕체" 등...뭐 이런 글자의 모양을 말하는 거죠^^ 이러한 글꼴도 역시 태그를 이용해서 조정할 수 있습니다.

참고적으로 돋움체 궁서체 바탕체 Arial 등의 글씨체들은 컴퓨터에 윈도우를 설치하면 자동으로 같이 설치되도록 되어 있는 기본폰트입니다. 때문에 위에 표에서처럼 사용해도 다른 사람들 역시 윈도우가 설치되어 있기때문에 지정해준 돋움체 궁서체 등등으로 보여지게 되는거죠. 만약에 여러분께서 "산돌광수체" 를 사용했다면 다른사람들의 컴퓨터에 "산돌광수체"가 설치되어 있다면 보이겠지만 "산돌광수체" 는 윈도우 기본폰트가 아니기때문에 "산돌광수체"가 설치되어 있지 않은 대부분의 사람들에게는 산돌광수체가 아닌 그냥 일반폰트로 보여지게 되는 겁니다. 즉, 글씨태그를 사용하는 사람뿐만 아니라 그걸 보는 사람의 컴퓨터에도 같은 폰트가 존재해야만 제대로 보여진다는 것이죠. 여기까지 이해되셨나요? ^^; 그렇게 어려운 말은 아닌데... 정 이해가 안되신다면 다음페이지로 넘어가셔도 좋습니다.

그리고 한가지 더!! 이 강좌 쓸때까지만 해도 없었는데... 요즘은 웹폰트라고 해서 자신의 컴퓨터나 상대방의 컴퓨터에 폰트가 존재하지 않아도 제대로 보이는 폰트가 나왔습니다. 그 원리는 개인사용자의 컴퓨터에 설치되어 있는 폰트를 사용하는게 아니라 홈페이지 계정(서버)에 웹폰트를 설치하고 방문객들이 홈페이지를 방문하면 계정에 있는 웹폰트를 방문객들의 컴퓨터에 설치하여 보여주게 되는 것입니다. 웹폰트는 유료웹폰트가 대부분이며, 요즘은 무료웹폰트도 나오고 있으니 나중에 한번씩 사용해보시길 바랍니다.

이거 역시 이해가 안되시면 패쑤~ 하셔도 됩니다. ^^; 어차피 때되면 다 알게된답니다.^^*

자...글자색, 글자크기, 글꼴에 대해서 배워봤는데요...이 다음 에서는 글자움직임 과 각종 예제에 대해서 알아보도록 하죠^^

앞 페이지에 이어서 계속 text 태그에 대해서 배워보도록 하겠습니다. 글자를 움직이는 태그와 글자태그의 예제에 대해서 알아볼텐데요....... 졸지 말구 잘 보시길....^^

 ※ 움직이는 글자 ( <marquee> 글자 </marquee> )

   여러분들 웹서핑하면서 글자나 이미지가 혼자서 움직이는 걸 보고 처음 보신 분들은 참 신기하다고 생각을 하셨을 텐데요....바로 마퀴태그를 이용한 것입니다....여기서는 marquee 태그의 기본원리만 알아보고 상세한 건 ☞[춤추는글자] 부분에서 기술하도록 하겠습니다.

 ※ 문장정렬

   글자의 정렬 방식을 정해주는 태그입니다.

 ※ text 태그 예제

<font color=red> 빨간색

<font color=orange> 오랜지색

<font color=redblue> 연한파란색

<font color=magenta> 핑크

<font color=pink> 연한핑크색

<font color=olive> 금색

<font color=bluesky> 연한녹색

<font color=break> 투명한논색

<font size=5 color=magenta face=궁서체> 핑크

<font size=5 color=red face=궁서체> 빨간색

<font size=5 color=pink face=궁서체> 연한핑크색

<font size=5 color=olive face=궁서체> 금색

<font size=5 color=orange face=궁서체> 오렌지색

<font size=5 color=bluesky face=궁서체> 연한녹색

<font size=5 color=break face=궁서체> 투명한녹색

<font size=5 color=redblue face=궁서체> 연한파란색

 ※ 글자태그 틱

 ① <font face="@궁서">를 하면 글자가 쓰러집니다.

 모든 글자체 앞에 @ ☜골뱅이 마크를 붙이면 글자가 쓰러집니다.

 ② <b>글자</b> 를 사용하면  글자 --> 글자    해당 글자가 두꺼워 집니다.

 ③  글자 주위에 이렇게 ☞ 색을 넣는 것  은 <span style="background-color: 색명">글자</span>를 사용하면 됩니다.

 ※ 총정리

<marquee><font face="돋움체" color="bluesky" size="5">총정리</font></marquee>

총정리

  이제 text 태그에 대해서는 다 배웠네용^^ 어때요? 어려운 것은 없죠?^^ text 태그는 쉬울 겁니다. 기억하기도 쉽고...한번 보면 절대 잊을 일은 없을 겁니다. 하지만 쉽다고 우습게 보면 안됩니다. 어떤 일이든지 기초없이는 완성할 수 없듯이 태그도 마찬가지로 기초를 잘 아셔야 만히 나중에 가더라도 쉽게 쉽게 배울 수 있답니다. 그럼 여기까지 봐주신거 감사드리고요.....오늘도 좋은 하루 되시길 바라겠습니다.