Published 2020. 6. 16. 21:26
728x90
반응형

CSS text 속성

 

속성 설명
color 텍스트의 색상을 설정
direction 텍스트가 쓰이는 방향을 설정
letter-spacing 텍스트 내에서 문자 사이의 간격을 설정
word-spacing 텍스트 내에서 단어 사이의 간격을 설정
text-indent 단락의 첫 줄을 들여쓰기할지 안 할지를 설정
text-align 텍스트의 수평 방향 정렬을 설정
text-decoration 텍스트에 여러 가지 효과를 설정하거나 제거
text-transform 텍스트에 포함된 영문자에 대한 대소문자를 설정
line-height 텍스트의 줄 간격을 설정
text-shadow 텍스트에 그림자 효과를 설정
unicode-bidi direction 속성과 같이 사용하여 텍스트의 기본 출력 방향을 설정
vertical-align HTML 요소 내의 수직 방향 정렬을 설정
white-space HTML 요소 내의 여백을 설정

 

color 속성

<body>태그에 명시된 color 속성값은 웹 페이지 내의 모든 텍스트 요소에 적용

하지만 각 요소별로 따로 명시된 color 속성값이 있다면, 해당 속성값이 <body>태그에 명시된 속성값보다 우선 적용

 

 

direction 속성

direction 속성이 left-to-right(ltr)일 때는 기본 설정처럼 텍스트가 왼쪽에서 오른쪽 방향으로 써짐

하지만 direction 속성이 right-to-left(rtl)일 때는 오른쪽에서 왼쪽 방향으로 써짐

 

 

letter-spacing 속성

텍스트 내에서 글자 사이의 간격을 설정

 

 

word-spacing 속성

텍스트 내에서 단어 사이의 간격을 설정

letter-spacing 속성과는 달리 문자 간의 간격이 아닌 단어 간의 간격을 기준으로 설정

 

 

text-indent 속성

text-indent 속성은 단락의 첫 줄에 들여쓰기할지 안 할지를 설정

웹 페이지에서 단락은 기본적으로 들여쓰기가 설정되어 있지 않음

 

 

text-align 속성

텍스트의 수평 방향 정렬을 설정

text-align 속성으로 설정된 정렬 방향은 text-direction 속성과는 상관없이 우선적으로 적용

 

 

text-decoration 속성

text-decoration 속성은 텍스트에 여러 가지 효과를 설정하거나 제거하는데 사용

 

 

text-transform 속성

text-transform 속성은 텍스트에 포함된 영문자에 대한 대소문자를 설정

단어의 첫 문자만을 대문자로 변경시킬 수도 있음

 

 

line-height 속성

line-height 속성은 텍스트의 줄 간격을 설정

 

 

text-shadow 속성

text-shadow 속성은 텍스트에 간단한 그림자 효과를 설정

반응형

'프로그래밍 > CSS' 카테고리의 다른 글

06.22(list)  (0) 2020.06.22
06.18(box model)  (0) 2020.06.18
06.17(text-align)  (0) 2020.06.17
06.15(font & color)  (0) 2020.06.15
06.12(선택자)  (0) 2020.06.12
복사했습니다!