CSS 05. 텍스트 관련 스타일

텍스트 관련 스타일 ( text- )

 

color : 텍스트의 색상지정 
선택자 {  color : 색상명 | 16진수 | rgb(x,x,x) | rgba(x,x,x,x) | hsl(x,x,x) | hsla(x,x,x,x) }
(hue 색상, saturation 채도 , lightness 밝기)

---

text-decoration : 텍스트에 줄을 긋거나 기존의 줄을 없얼때 사용

선택자{text-decoration : none | underline | overline | line-through;}

<ul>
    <li id="td1">텍스트 영역 아래 줄 긋기</li>
    <li id="td2">텍스트 영역 중간에 줄 긋기</li>
    <li id="td3">텍스트 영역 위에 줄 긋기 </li>
 </ul>

    <a id="td4" href="http://www.naver.com" taget="_blank">네이버로</a>
    
 <style>
 #td1{text-decoration: underline;}
#td2{text-decoration: line-through;}
#td3{text-decoration: overline;}
#td4{text-decoration: none; color: black;}
</style>

• 텍스트 영역 아래 줄 긋기
• 텍스트 영역 중간에 줄 긋기
• 텍스트 영역 위에 줄 긋기

네이버로

---

text - transform : 영문텍스트의 대소문자 변환시 사용

선택자{ text-transform : uppercase | lowercase | capitalize }

<ol>
    <li id="tt1">uppercase : 모든 영문자 대문자로 변환</li>
    <li id="tt2">Lowercase : 모든 영문자 소문자로 변환</li>
    <li id="tt3">capitalize : 영문자의 firsttext만 대문자로 변환</li>     
 </ol>

<style>
#tt1{text-transform: uppercase;}
#tt2{text-transform: lowercase;}
#tt3{text-transform: capitalize;}
</style>

1. uppercase : 모든 영문자 대문자로 변환
2. Lowercase : 모든 영문자 소문자로 변환
3. capitalize : 영문자의 firsttext만 대문자로 변환

---

text-shadow : 텍스트에 그림자효과를 줄 때 사용

선택자{ text-shadow : 가로거리(x) 세로거리 (y) [번짐정도] [색상]; }

<div>
<span class="shadow" id="ts1">HTML</span><br><br>
<span class="shadow" id="ts2">HTML</span><br><br>
<span class="shadow" id="ts3">HTML</span>
</div>
<style>
.shadow{font-size: 50px;
        font-weight: 900;}

#ts1{color:orangered;
     text-shadow: 10px 10px;/*번짐정도 생략시 선명한 그림자, 색상 생략시 글자색과 동일*/        
     text-shadow: -5px -5px 5px gray;
}
#ts2{
     color :white;
     text-shadow: 0px 0px 10px yellow;
 }
#ts3{
text-shadow: 0px -5px 4px yellow, 0px -10px 8px orange, 0px -15px 15px orangered, 0px -22px 20px red;
 }
 
</style>

HTML

HTML

HTML

 

---

 

text-align: 텍스트 정렬할때 사용

선택자{text-align : left(기본값) | justify(양쪽정렬)| right | center ;}

line-height : 줄간격 조절할 때 사용

선택자{line-height : normal | px | em | % ;}

 <h4>왼쪽정렬(기본값)</h4>
 <p style="text-align:left; line-height: 30px;">웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.</p>

 <h4>양쪽정렬</h4>
 <p style="text-align:justify; line-height: 3em;">웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.</p>

<h4>오른쪽정렬</h4>
<p style="text-align:right; line-height: 150%;">웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.</p>

 <h4>가운데정렬</h4>
<p style="text-align: center;">웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.</p>

왼쪽정렬(기본값)

웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.

양쪽정렬

웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.

오른쪽정렬

웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.

가운데정렬

웅대한 싸인 뼈 인생에 피는 몸이 가치를 사막이다. 간에 이상은 더운지라 인간의 넣는 두기 있으며, 광야에서 그러므로 철환하였는가? 목숨이 것은 끝까지 희망의 보라.못할 노래하며 방황하여도, 장식하는 가진 봄바람을 있는 끓는 피다. 가슴이 용감하고 돋고, 영원히 우는 같이, 사라지지 것이다.