[CSS] 텍스트 속성 color, text-align, text-decoration 등

글자(text) 속성

color	색상	red, #FF0000
direction	방향	ltr, rtl
line-height	줄 간격	150%
letter-spacing	글자 간격	-0.1px
text-align	정렬	left, right, center, justify
text-decoration	텍스트 장식	none, underline(밑줄), overline(윗줄),line-through(중간선), blink(깜빡임)
text-indent	들여쓰기	20px
text-transform	대소문자 지정	none, capitalize(첫번째 대문자), uppercase(모두 대문자), lowercase(모두 소문자)
word-spacing	단어간격	1px

연습소스

css

table {
  width: 100%;
  table-layout: fixed
}

td {
  border: 1px solid gray
}

<table>
  <tr>
    <td style="color:red">color:red</td>
    <td style="color:#13bb00">color:#13bb00</td>
    <td style="color:hsla(200, 92%, 50%, 0.64)">color:hsla(200, 92%, 50%, 0.64)</td>
    <td style="color:rgb(249, 36, 251)">color:rgb(249, 36, 251)</td>
  </tr>
  <tr>
    <td colspan=2 style="direction:ltr">direction:ltr</td>
    <td colspan=2 style="direction:rtl">direction:rtl</td>
  </tr>
  <tr>
    <td style="line-height:0">line-height:0
      <br>br
      <br>br</td>
    <td style="line-height:10px">line-height:10px
      <br>br
      <br>br</td>
    <td style="line-height:20px">line-height:20px
      <br>br
      <br>br</td>
    <td style="line-height:200%">line-height:200%
      <br>br
      <br>br</td>
  </tr>
  <tr>
    <td style="letter-spacing:0">letter-spacing:0</td>
    <td style="letter-spacing:5px">letter-spacing:5px</td>
    <td style="letter-spacing:-5px">letter-spacing:-5px</td>
    <td style="letter-spacing:-0.5px">letter-spacing:-0.5px</td>
  </tr>
  <tr>
    <td style="text-align:left">text-align:left</td>
    <td colspan=2 style="text-align:center">text-align:center</td>
    <td style="text-align:right">text-align:right</td>
  </tr>
  <tr>
    <td colspan=2 style="text-align:none">text-align:none(자동 줄바꿈시 좌우를 정렬을 통해 글이 보기좋게 정리됩니다. 자동 줄바꿈이 되어야 확인을 할수 있습니다.) 가느다란 마법사 엽엽</td>
    <td colspan=2 style="text-align:justify">text-align:justify(자동 줄바꿈시 좌우를 정렬을 통해 글이 보기좋게 정리됩니다. 자동 줄바꿈이 되어야 확인을 할수 있습니다.) 가느다란 마법사 엽엽</td>
  </tr>
  <tr>
    <td style="text-decoration:underline">text-decoration:underline</td>
    <td style="text-decoration:overline">text-decoration:overline</td>
    <td style="text-decoration:line-through">text-decoration:line-through</td>
    <td style="text-decoration:blink">text-decoration:blink
      <br>(잘 안쓰는 속성입니다.)</td>
  </tr>
  <tr>
    <td style="text-indent:10px">text-indent:10px</td>
    <td style="text-indent:20px">text-indent:20px</td>
    <td style="text-indent:-10px">text-indent:-10px</td>
    <td style="text-indent:-20px">text-indent:-20px</td>
  </tr>
  <tr>
    <td style="text-transform:none">text-transform:none</td>
    <td style="text-transform:capitalize">text-transform:capitalize</td>
    <td style="text-transform:uppercase">text-transform:uppercase</td>
    <td style="text-transform:lowercase">text-transform:lowercase</td>
  </tr>
  <tr>
    <td style="word-spacing:10px">word-spacing : 10px </td>
    <td style="word-spacing:20px">word-spacing : 20px </td>
    <td style="word-spacing:-10px">word-spacing : -10px </td>
    <td style="word-spacing:-20px">word-spacing : -20px </td>
  </tr>
</table>
 

http://jsfiddle.net/chjs7290/pgw9ecy5/?utm_source=website&utm_medium=embed&utm_campaign=pgw9ecy5

https://www.w3schools.com/css/css_text.asp