본문 바로가기
css

text-decoration 속성(none, underline, overline, line-through)

by 지구별에 2014. 6. 9.
반응형



text-decoration 속성(none, underline, overline, line-through)


Css에서는 글씨에 밑줄이나 윗줄, 중간줄을 넣을 때 text-decoration 속성을 사용합니다.



▶text-decoration 속성값


none 기본값으로 밑줄이 없는 보통 글자

underline 글자 아래에 밑줄

overline 글자 위에 줄이 그어짐

line-through 글자 중간에 줄이 그어짐

blink  글자를 반짝거리게 만듬. 퇴화 속성으로 사용을 권장하지 않습니다. 

          css 명세에서는 브라우저가 이 속성값을 무시하도록 하고 있음.


참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration


상속 여부 : no




링크 밑줄 없애는 방법


보통 텍스트는 기본적으로 밑줄 형태가 아니지만, 링크 <a href...>로 연결된 글자의 경우


밑줄이 자동으로 들어갑니다. 이때 밑줄을 없애고 싶으면 text-decoration: none을 사용하면 됩니다.


사용 예:

span a{text-decoration: none}


h1 a{text-decoration: none}




CSS3 에서 text-decoration은 축약 속성으로 사용합니다.


즉 text-decoration-line, text-decoration-color, text-decoration-style을 한꺼번에 지정하는 속성인데


현재는  Firefox에서만 지원하고 있습니다.




 

html과  css 사용 예를 보겠습니다~


text-decoarion.htm



 html/css


<!DOCTYPE hTML>

<html>

<head>

<style>

#no{text-decoration: none;}

#no2 a {text-decoration: none;}

#un{text-decoration:underline;}

#ov{text-decoration: overline;}

#li{text-decoration: line-through; }


</style>

</head>

<body>


<h3  id="no"> 기본값 text-decoration: none</h3>

<h3> <a href="www.google.com"> 1. 기본 링크 : 구글 사이트</a></h3>

<h3 id="no2"><a href="www.google.com"> 2. text-decoaration: none : 구글 사이트</a></h3>

<h3 id="un">text-decoration: underline</h3>

<h3 id="ov">text-decoration: overline</h3>

<h3 id="li">text-decoration: line-through</h3>



</body>

</html>



▶실행 화면





1번은 링크에 밑줄이 자동으로 들어간 반면 


2번은 text-decoration: none을 사용함으로써 링크 밑줄이 없어졌습니다.


 


[html/css] line-height 속성 배우기


글자색 color 속성, 배경색 background-color 속성 배우기


배경 이미지를 넣는 background-image 속성


vertical-align 속성 자세히 알기(수직 정렬)

반응형

댓글1