[css] ( Text ) 여러가지 텍스트 옵션들 (들여쓰기,자간,줄간격)

css / text 

text-indent / 들여쓰기

• 값이 양수면 들여쓰기, 음수면 내어쓰기가 된다.

---

예제

1. 들여쓰기
2. 내어쓰기
3. 여백주고 내어쓰기

    <P style="text-indent:1.0em; text-align:justify;">
       The standard chunk of Lorem Ipsum
    </P>
    <P style="text-indent:-1.0em; text-align:justify;">
       The standard chunk of Lorem Ipsum
    </P>
    <P style="text-indent:-1.0em; text-align:justify; margin-left:1.0em;">
       The standard chunk of Lorem Ipsum
    </P>

---

letter-spacing / 글자 간격

• 글자와 글자 사이의 간격을 설정 
• 양수면 늘어나고 음수면 줄어든다.

---

예제

1. 3px만큼 간격 설정
2. -3px 만큼 간격 설정
3. 1em 만큼 간격 설정

  <ul>
    <li style="letter-spacing: 3px;">The standard chunk of Lorem Ipsum</li>
    <li style="letter-spacing: -3px;">The standard chunk of Lorem Ipsum </li>
    <li style="letter-spacing: 1em;">The standard chunk of Lorem Ipsum </li>
  </ul>

---

line-height / 줄 간격

• 문단의 줄과 줄 사이의 간격을 설정한다
• 양수면 늘어나고 음수면 줄어든다.

---

예제

1. 5px만큼 간격 설정
2. 25px 만큼 간격 설정
3. 250% 만큼 간격 설정
4. 기본값으로 설정

  <ul>
    <li style="line-height: 5px;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>
    <li style="line-height: 25px;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>
    <li style="line-height: 250%;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>
    <li style="line-height: initial;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>
  </ul>

---

white-space / 자동 줄 바꿈

• normal : 자동으로 줄 바꿈 (기본)
• nowrap : 화면 밖으로 나가도 자동 줄바꿈 X 

---

예제

1. normal  (자동 줄 바꿈 O)
2. nowrap (자동 줄 바꿈 X)

  <ul>
    <li style="white-space: normal;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>

    <li style="white-space: nowrap;">
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
      The standard chunk of Lorem Ipsum
    </li>
  </ul>