[HTML/CSS] CSS의 TEXT속성
[HTML/CSS] CSS의 TEXT속성
|
본 포스팅은 우선 CSS의 작성법 이해했다는 가정하에 작성되었습니다. 잘 모르겠으면 관련 포스팅을 참조해주세요. |
|
TEXT속성은 문자나 단락을 조절하기 위해 사용합니다. 앞서 다룬 Font의 경우 글자 자체의 형태를 변형하는 속성이였다면 TEXT는 문자의 방향이나 간격등을 설정해주는 속성이에요. TEXT는 다음과 같은 효과를 부여합니다. * Color * Direction * Letter-Spacing * Line-Height * Text-Align * Text-Decoration * Text-Indent * Text-Shadow * Text-Transform * Vertical-Align * White-Space * Word-Spacing |
|
|
|
|
Color
|
태그 |
속성 |
속성값 |
비고 |
|
style |
color |
색상코드 |
red, #FF0000 등의 색상코드 |
|
텍스트의 색상을 지정합니다. |
Direction
|
태그 |
속성 |
속성값 |
비고 |
|
style |
direction |
ltr |
Left to Right (기본값) |
|
rtl |
Right to Left |
|
왼쪽에서 오른쪽으로 읽거나 오른쪽에서 왼쪽으로 읽는 등의 텍스트의 방향을 지정합니다. 대표적으로 히브리어, 아랍어 등이 오른쪽에서 왼쪽으로 읽기 때문에 이런 언어들을 위해서 사용하는 속성이에요. |
Letter-Spacing
|
태그 |
속성 |
속성값 |
비고 |
|
style |
letter-spacing |
간격값 |
px, %, em 등 |
|
글자 사이의 간격을 조절합니다. |
Line-Height
|
태그 |
속성 |
속성값 |
비고 |
|
style |
line-height |
높이값 |
px, %, em 등 |
|
텍스트 행의 높이를 설정합니다. |
Text-Align
|
태그 |
속성 |
속성값 |
비고 |
|
style |
text-align |
정렬 |
left / rignt / center / justify, 기본값left |
|
수평 방향의 텍스트를 정렬합니다. |
Text-Decoration
|
태그 |
속성 |
속성값 |
비고 |
|
style |
text-decoration |
underline |
밑줄긋기 |
|
line-throught |
취소선긋기 | ||
|
overline |
윗줄긋기 | ||
| none |
줄 없앰 |
|
텍스트의 장식을 추가하거나 제거합니다. |
Text-Indent
|
태그 |
속성 |
속성값 |
비고 |
|
style |
text-indent |
들여쓰기값 |
px, %, em 등 |
|
문단의 첫줄 들여쓰기를 합니다. |
Text-Shadow
|
태그 |
속성 |
속성값 |
비고 |
|
style |
text-shadow |
간격, 투명도, 색상값 |
px, %, em 등 / red, #FF0000 등의 색상코드 |
|
텍스트에 그림자 효과를 표현합니다. 예) p {text-shadow: 5px 5px 5px #FF0000;} 오른쪽간격 아래간격 투명도 색상값 순으로 작성합니다. 쉼표를 사용하면 그림자를 중첩하여 사용 할수도 있습니다. 예) p {text-shadow: 5px 5px 5px red, 10px 10px 10px blue, 15px 15px 15px black;} |
Text-Transform
|
태그 |
속성 |
속성값 |
비고 |
|
style |
text-transform |
none |
원본 유지 (기본값) |
|
capitalize |
단어의 첫 문자를 대문자로 변경 | ||
|
uppercase |
모든 문자를 대문자로 변경 | ||
| lowercase | 모든 문자를 소문자로 변경 |
|
텍스트의 대/소 문자를 지정합니다. 한글은 의미가 없습니다. |
Vertical-Align
|
태그 |
속성 |
속성값 |
비고 |
|
style |
vertical-align |
정렬 |
top / middle / bottom, 기본값bottom |
|
인라인요소끼리의 세로위치 정렬을 합니다. 흔히 <p>태그는 블록요소, <span>태그는 인라인요소로 나뉘어지는데 분량이 많기 때문에 자세한 내용은 따로 다루도록 하겠습니다. 간단히 설명하면 블록요소의 태그가 사용되면 나머지 태그를 다른줄로 밀어내어 혼자서 한 줄을 차지하며, 인라인요소는 같은 줄 내에 여러 태그가 함께 사용할 수 있습니다. |
White-Space
|
태그 |
속성 |
속성값 |
비고 |
|
style |
white-space |
nomal |
공백1칸 / 엔터불가능 / 자동줄바꿈 |
|
nowrap |
공백1칸 / 엔터불가능 / 자동줄바꾸지 않음 | ||
| pre | 있는 그대로 표시 / 엔터가능 / 자동줄바꾸지 않음 | ||
| pre-line |
공백1칸 / 엔터가능 / 자동줄바꿈 | ||
|
pre-wrap |
있는 그대로 표시 / 엔터가능 / 자동줄바꿈 |
|
공백 및 줄바꿈에 대해설정합니다. 이부분은 설명하기 굉장히 어렵네요. 예제를 보고 직접 해보시는게 이해하기 쉬울것 같습니다. 예) 옹봉이는 잘생겼다.(엔터) |
Word-Spacing
|
태그 |
속성 |
속성값 |
비고 |
|
style |
word-spacing |
간격값 |
px, %, em 등 |
|
단어 사이의 간격을 지정합니다. |
< 연습하기 >
