기초 태그 - 글자 태그(텍스트 속성)

(2) 문자열 형태를 설정하는 text 속성.

 

①{text-align:left / center /right / justify}                                            텍스트 정렬 방식 설정

②{text-decoration:none / underline / overline / line-through / blink}    글꼴에 선긋기

③{text-indent:절대크기 / 상대크기}                                                 들여쓰기 설정

④{text-transform:none / capitalize / uppercase / lowercase}              대소문자 자동 변환

⑤{vertical-align:top / middle / bottom}                                              글꼴을 수직으로 정렬

 

[설명]

 

①text-align

텍스트 정렬 방식을 설정하려면 text-align을 속성을 이용합니다.

....................................................

  속성값           :         의미

.................................................... 

  left                 :         왼쪽 정렬

  center            :         중앙 정렬

  right               :         오른쪽 정렬

  justify             :         양쪽 정렬                      

.....................................................

 

②text-decoration
글꼴에 밑줄을 그으려면 text-decoration속성을 이용합니다. 이속성은 글자 중간에 줄을
표시하거나 깜박이게하는 속성값을 가지고 있습니다.넣을 수있는 속성값은 다음과 같습니다

...........................................................................

  속성값             :         의미

........................................................................... 

  none                :         기본값으로 글자 보여주기

  underline          :         글자에 밑줄긋기

  overline            :         문자 위에 줄긋기

  line-through      :         문자 중간에 줄긋기

  blink                :         글자를 깜빡이게 하기

...........................................................................

 

③text-indent
문자열을 안쪽으로 들여쓰기 할때는 text-indent 속성을 이용합니다.
지정된 숫자값만큼 들여쓰기를 하며 '-' 값도 가능합니다.

 

④text-transform
영문 대소문자 조절은 text-transform속성을 이용합니다.이미 앞에서 배웠던
font-variant와 유사하지만 더 확장된 속성을 제공합니다.

...................................................................................

  속성값            :           의미

................................................................................... 

  none               :          효과를 주지 않음

  capitalize        :           단어의 첫 문자를 대문자로 바꿈

  uppercase       :           모든 영문자를 대문자로 바꿈

  lowercase       :           모든 영문자를 소문자로 바꿈

...................................................................................

 

⑤vertical-align
font-weight 속성은 글자 두께를 설정합니다.
글자나 이미지를 수직으로 정렬할 때는 vertical-align속성을 이용합니다.

.........................................................................................................

  속성값            :            의미

......................................................................................................... 

  top                  :            요소의 위쪽과 셀의 위쪽을 기준으로 정렬

  middle             :            요소의 중간과 셀의 중간을 기준으로 정렬

  bottom             :            요소의 아래쪽과 셀의 아래쪽을 기준으로 정렬

.........................................................................................................

 

         

          (더 쉽게..예제와 함께)

♡글자에 관련한 태그

글자의 색깔, 크기, 움직임, 글꼴등에 관한 지정을 할수 있습니다.

기본적인 형태는 <font>~</font> 입니다.
그 안에 잡다한 꾸밈 태그가 함께 들어가게 되는거죠.

글자색을 지정할 때는 <font color="색상명 또는 색상코드">

예를 들어서..<font color="red">태그야 노올자~!</font>
태그야 노올자~!

위에 있는 색상표 참고하셔서 다양한 색깔의 글씨를 만드세요...

글자 크기:

font style=font-size:수치(pt) <font face="굴림"size="2" color="#666666"><h1>~<h6> 어떤 방식으로 지정해주셔도 상관없어요.^^

  태그야 노올자~!

    태그야 노올자~!

글자모양


태그야 노올자~!

      

       글의 정렬

오른쪽정렬

가운데 정렬

왼쪽 정렬

태그야 노올자~!

태그야 노올자~!

태그야 노올자~!

♡Tip 한가지*^^*
"> 으로 하면 " 태그야 노올자~! " 이렇게 글자가 누워
버립니다^^;;
그리구 또 한가지 더!! 글자의 배경색을 넣고싶다면
<span style="background-color: 색명">글자</span>이라고 하시면 됩니다.
태그야 노올자~!