06. text요소 _ 텍스트 꾸밈 요소

텍스트의 여러가지 요소를 변경합니다.
text-로 시작하는 요소와 font-로 시작하는 요소,
line-으로 시작하는 요소 등이 있습니다.

color

텍스트의 색상을 변경해 줍니다.

<p class="change_color">색상을 변경합니다</p>
 

CSS

<style>
   p.change_color {color:#DD5554;}
</style>
 

색상을 변경합니다

text-align

텍스트의 정렬방식을 변경합니다.
value값으로는 left, right, center, justify가 있습니다.
left, right, center는 말그대로 왼쪽 정렬, 오른쪽 정렬, 가운데 정렬이고 justify를 입력하면 양쪽정렬이 됩니다.
양쪽정렬이란 양옆을 꽉 채워서 정렬되는 것을 말합니다. 띄어쓰기가 조금씩 조정되서 네모 반듯하게 정렬됩니다.

<p class="change_alignLeft">왼쪽 정렬</p>
<p class="change_alignCenter">가운데 정렬</p>
<p class="change_alignRight">오른쪽 정렬</p>
<p class="change_justify">
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
 

CSS

<style>
   p.change_alignLeft {text-align:left; background:coral;}
   p.change_alignCenter {text-align:center; background:skyblue;}
   p.change_alignRight {text-align:right; background:tomato;}
   p.change_justify {width:400px;text-align:justify;}
</style>
 

왼쪽 정렬

가운데 정렬

오른쪽 정렬

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

text-decoration

텍스트의 꾸밈값을 줍니다. 혹은 없애줍니다.
a태그의 경우 default값(기본값)으로 컬러와 밑줄이 들어갑니다. 이는 부모의 상속을 받지 않으므로 직접 변경해 주어야 합니다.
이럴때 밑줄을 제거하는 것이 text-decoration입니다.
반대로 텍스트에 밑줄이나 가운데줄 등을 만들때 사용하는 것도 text-decoration입니다.
value값으로 none, underline, overline, line-throungh이 있습니다.

<a href="#">a의 기본 값입니다.</a><br>
<a href="#" class="change_decoNone">a 의 기본값 밑줄을 제거합니다.</a>
<p class="change_decoUnder">밑줄을 생성합니다</p>
<p class="change_docoOver">윗줄을 생성합니다</p>
<p class="change_decothrough">가운데줄을 생성합니다</p>
 

CSS

<style>
   a.change_decoNone {text-decoration:none;}
   p.change_decoUnder {text-decoration:underline;}
   p.change_docoOver {text-decoration:overline;}
   p.change_decothrough {text-decoration:line-through;}
</style>
 

a의 기본 값입니다.
a 의 기본값 밑줄을 제거합니다.

밑줄을 생성합니다

윗줄을 생성합니다

가운데줄을 생성합니다

text-indent

텍스트를 이동시킵니다. 들여쓰기 같은걸 하거나 아예 안보이게 멀리 보낼때 많이 쓰는 속성입니다.
-값도 가능합니다.

<p>텍스트의 기본형</p>
<p class="change_indentPlus">텍스트를 들여쓰기 합니다</p>
<p class="change_indentMinus">텍스트를 앞으로 땡겨옵니다</p>
 

CSS

<style>
   a.change_decoNone {text-decoration:none;}
   p.change_decoUnder {text-decoration:underline;}
   p.change_docoOver {text-decoration:overline;}
   p.change_decothrough {text-decoration:line-through;}
</style>
 

텍스트의 기본형

텍스트를 들여쓰기 합니다

텍스트를 앞으로 땡겨옵니다

line-height

행간을 조정해주는 요소입니다. 쉽게 말하면 문장에서 각 줄을 얼만큼의 간격을 줄 것인지 결정합니다.
line-height는 아래위로 가운데 정렬을 할때도 쓰입니다.
가로세로 가운데 정렬을 하는 text-align:center와 함께 텍스트를 가운데 배치할때 많이 쓰입니다.
높이가 100px인 박스에서 텍스트를 가운데 배치하고 싶다면 line-height값을 100px을 주면 됩니다.
각 수치에 따른 행간과 한가운데 정렬을 하는 예시를 살펴봅시다.

<p class="change_height1">
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<p class="change_height2">
   "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</p>
<div class="change_lineCenter">한가운데</div>
 

CSS

<style>
   p.change_height1 {width:300px; line-height:15px; background:coral;}
   p.change_height2 {width:300px; line-height:30px; background:skyblue;}
   div.change_lineCenter {width:300px; height:100px; text-align:center; line-height:100px; background:tomato;}
</style>
 

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."

한가운데

letter-spacing / word-spacing

행간을 조절했으니 자간도 조절해야지요. 대부분 기본값이 많이 쓰이기 때문에 자주 쓰이진 않습니다.
letter-spacing은 말그대로 글자들 사이에 공간을 주고,
word-spacingd은 단어들 사이에 공간을 줍니다.

<p class="change_letter">글자 사이에 공간을 듬뿍 줍시다</p>
<p class="change_word">단어 사이에 공간을 줍시다</p>
 

CSS

<style>
   p.change_letter {letter-spacing:10px;}
   p.change_word {word-spacing:20px;}
</style>
 

글자 사이에 공간을 듬뿍 줍시다

단어 사이에 공간을 줍시다

* 개인적인 공부를 정리하는 블로그입니다.