5. 텍스트 스타일링

1. 텍스트 정렬 (text-align)
2. 간격
3. 텍스트 장식 (text-decoration)
4. 그림자 효과 (text-shadow)
5. 대소문자 변환 (text-transform)

 

텍스트 정렬 (text-align)

• start: 현재 텍스트 줄의 시작 위치에 정렬
• end: 현재 텍스트 줄의 끝 위치에 정렬
• left: 왼쪽 정렬
• right: 오른쪽 정렬
• center: 가운데 정렬
• justify: 양쪽에 맞추어 정렬
• match-parent: 부모 요소를 따라 정렬

- 활용 코드

      .text-center {
        text-align: center;
      }

      .text-right {
        text-align: right;
      }

 

 

간격

• 글자 간격 (letter-spacing)
• 단어 간격 (word-spacing)
• 줄 간격(line-height)

- 활용 코드

letter-spacing: 2px;
line-height: 0.7;

 

 

텍스트 장식 (text-decoration)

• none: 선 표시x
• line-through: 글자 중간에 선
• overline: 글자 위에 선
• underline: 글자 아래에 선

- 활용 코드

<P style="TEXT-DECORATION: none">none</P>
<P style="TEXT-DECORATION: line-through">line-through</P>
<P style="TEXT-DECORATION: overline">overline</P>
<P style="TEXT-DECORATION: underline">underline</P>

 

- 실행 결과

none

line-through

overline

underline

 

 

그림자 효과(text-shadow)

• 가로 거리: 텍스트로부터 그림자까지의 가로 거리 (양숫값: 글자의 오른쪽, 음숫값: 글자의 왼쪽)
• 세로 거리: 텍스트로부터 그림자까지의 세로 거리
• 번짐 정도: 기본값 0 (양숫값: 그림자가 모든 방향으로 퍼짐, 음숫값: 그림자가 모든 방향으로 축소)
• 색상: 기본값은 현재 글자색. 고백으로 구분해 여러 색상 지정 가능

- 활용 코드

<P style="color:red; text-shadow: 1px 1px black">HTML</P>
<P style="text-shadow: 5px 5px 3px #ffa500">CSS</P>
<P style="color:#fff; text-shadow: 7px -7px 20px #000">Java</P>

 

- 실행 결과

HTML

CSS

Java

 

 

대소문자 변환 (text-transform)

• none: 줄 표시x
• capitalize: 첫 번째 글자를 대문자로 변환
• uppercase: 모든 글자를 대문자로 변환
• lowercase: 모든 글자를 소문자로 변환
• full-width: 가능한 모든 문자를 전각 문자(가로와 세로의 길이 비율이 같은 글자)로 변환

- 활용 코드

    <p style="text-transform: uppercase">abc</p>
    <p style="text-transform: lowercase">ABC</p>
    <p style="text-transform: capitalize">
      only the first letter of a word is converted to uppercase
    </p>

 

- 실행 결과

abc

ABC

only the first letter of a word is converted to uppercase