CSS 기초 - text 속성

color : 텍스트 색상 설정. 기본 설정값은 검정색이다.

{color : green;}  

 

letter-spacing :  글자의 간격(자간)을 설정

{letter-spacing:10px;} 

 

word-spacing : 띄어쓰기 간격을 설정

{word-spacing:40px;}

 

text-align : 수평 방향 정렬을 설정

{text-align:center;} - 가운데 정렬 

{text-align:right;} - 오른쪽 정렬

{text-align:left;} - 왼쪽 정렬

{text-align:justify;} - 양쪽 맞춤(2줄이상, 강제줄바꿈 X) 

 

text-indent : 단락의 첫 줄의 들여쓰기 설정

{text-indent:20px}

 

line-height : 줄 높이를 설정

{line-height:20px}

 

text - decoration : 여러가지 효과를 설정.

{text - decoration:none} - 설정없음

{text - decoration:underline} - 밑줄

{text - decoration:line-through} - 취소선

{text - decoration:overline} - 윗줄

 

text-transform 포함된 영문자에 대한 대소문자를 설정.

{text - transform:uppercase} 대문자로 설정

{text - transform:lowercase} 소문자로 설정

{text - transform:capitalize} 첫문자를 대문자로 설정

 

font-variant 소문자를 소문자 크기의 대문자로 바꿈

{font-variant:normal} 작은대분자로 바뀌지 않음

{font-variant:small-caps} 소문자를 작은 대문자로 바꿈

{font-variant:initial} 기본값으로 설정

{font-variant:inherit} 부모요소의 속성값을 상속

 

text-shadow 그림자효과

{text-shadow:5px 5px 5px #222}  가로간격 세로간격 번짐 색상

 

text-overflow 기준선을 벗어날 경우 텍스트를 어떻게 처리할지 설정(글자)

{text-overflow:clip} 넘치는 텍스트 자름

{text-overflow:ellipsis}  넘치는 텍스트...처리

 * 단독으로 사용하지 않고, overflow나 white-space와 함께 쓰인다.

 

white-space 스페이스, 탭, 줄바꿈, 자동줄바꿈 설정

{white-space:nomal} 기본속성으로, 연속공백을 하나로 합치며, 텍스트가 넘치면 자동 줄바꿈. 

{white-space:nowrp} 연속공백을 표시하지 않으며, 텍스트가 넘쳐도 자동 줄바꿈 X 

{white-space:break-spaces} 모든 공백을 보여줌, 한줄이 길어지면 자동 줄바꿈

{white-space:pre} 연속공백을 보여주며, 텍스트가 넘쳐도 자동 줄바꿈 X

{white-space:pre-line} 연속 공백을 하나의 공백으로 합쳐짐.

{white-space:pre-wrap} break-spaces와 비슷한 속성으로, 연속 공백이 공간을 차지 하지 않음?

 

overflow 기준선을 벗어날 경우 어떻게할지 설정 (글자, 면)

{overflow:hidden} 숨겨줌

{overflow:visible}  그냥 보여줌

{overflow:scroll} 무조건 scroll이 생성됨

{overflow:auto} 벗어날 경우 scroll이 생성됨

 

font-size 텍스트의 크기설정 

{font-size:10px}

{font-size:10%}

{font-size:10em}

 

font-family 글꼴 설정

{font-family:'D2Coding'}

 

font-weight 텍스트의 굵기 설정

{font-weight:200} 100-900 사용