본문 바로가기
  • search_ _ _ _
  • search_ _ _ _
  • search_ _ _ _
html+css

text 속성

by 오늘의갈비찜 2021. 4. 24.
728x90

color
텍스트의 색상을 설정함.

ex)  body { color: red; }
direction 텍스트가 쓰이는 방향을 설정함.

기본적으로 왼쪽에서 오른쪽 방향으로 써집니다.

left-to-right(ltr):텍스트가 왼쪽에서 오른쪽 방향으로 써짐

right-to-left(rtl):텍스트가 반대 방향인 오른쪽에서 왼쪽 방향으로 써짐.

ex) .rightToLeft { direction: rtl; }

letter-spacing 텍스트 내에서 문자 사이의 간격을 설정함.

ex) .incLetterSpacing { letter-spacing: 10px; }
word-spacing 텍스트 내에서 단어 사이의 간격을 설정함.
 -문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정

ex)  .incWordSpacing { word-spacing: 10px; }
text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정함.
- 기본적으로 들여쓰기가 설정되어 있지 않음.

ex)  .paraIndent { text-indent: 30px; }
text-align 텍스트의 수평 방향 정렬을 설정함.
-text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적 적용.

  left: 왼쪽 정렬

  right: 오른쪽 정렬

  center: 가운데 정렬

ex) 
h2 { text-align: left; }

text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거함.
overline: 텍스트 윗줄에 라인이 생김.
ine-through: 텍스트 중앙을 가로지르는 라인이 생김 =html <STRIKE>
underline: 텍스트 아래 라인이 생김 =html <U>
none: 텍스트 라인 사라짐.

ex) a { text-decoration: none; }
text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정함.

  uppercase: 텍스트의 모든 영문자를 대문자로 만듬.

  lowercase: 텍스트의 모든 영문자를 소문자로 만듬.

  capitalize: 텍스트의 모든 영단어의 첫 문자(first character)만을 대문자로 만듬.

ex) h4 { text-transform: capitalize; }

line-height 텍스트의 줄 간격을 설정함.

ex)   .wideLineHeight line-height: 1.8; }
text-shadow 텍스트에 그림자 효과를 설정함.

ex) h2 { text-shadow: 2px 1px #3399CC; }
unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정함.
vertical-align HTML 요소 내의 수직 방향 정렬을 설정함.
white-space HTML 요소 내의 여백을 설정함.

출처:

tcpschool.com/css/css_basic_text

728x90

'html+css' 카테고리의 다른 글

link 속성  (0) 2021.04.24
font 속성  (0) 2021.04.24
background 속성  (0) 2021.04.24
hover시 background-images 확대하기  (0) 2020.11.21