스타일 시트 CSS 텍스트 줄 긋기 할 때 이용하는 text-decoration 속성 사용법

 

환경: Eclipse Mars

 

text-decoration 속성은 텍스트에 줄 그을 때 사용하는 속성입니다. 강조를 위한 줄 긋기로 중간에 그으면 취소선”, 아래에 그으면 밑줄이라고 하죠. 글자 위로 줄을 그을 수도 있습니다. 그런데 잘 사용되지는 않죠. 많이 사용하는 경우는 href 태그의 밑줄을 없애기 위해 text-decoration 속성 값으로 none 을 적용합니다.

 

text-decoration 속성의 값은 5가지 정도가 있습니다. 텍스트의 줄을 어느 위치에 긋느냐에 따라 값이 다릅니다. 마지막에 있는 blank 는 이제 더 이상 쓰이지 않을 옵션이므로 신경 쓰지 않아도 됩니다.

 

l  none : 기본값으로 줄을 긋지 않는다.

l  underline : 텍스트 아래에 줄을 긋는다. 하이퍼링크는 기본적으로 적용이 된다.

l  overline : 텍스트 위에 줄을 긋는다.

l  line-through : 텍스트 중간에 줄을 긋는다. 일명 취소선이라고 한다.

l  blank : 글자를 반짝거리게 만드는 속성으로 파이어폭스에만 적용이 되며 앞으로 사용하지 않을 가능성이 있는 속성 이다.

 

아래 샘플 소스는 text-decoration 속성에 4가지 경우의 값을 넣어서 테스트 하였습니다. 샘플을 실행한 결과 이미지를 보시면 이해가 쉽게 가실 겁니다.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		font-size:14pt;
		width: 500px;
	}
	p {	background-color: #d4d4f2; 
		padding: 5px;
	}
	.textdecoration1 { text-decoration: none; }
	.textdecoration2 { text-decoration: underline; }
	.textdecoration3 { text-decoration: overline; }
	.textdecoration4 { text-decoration: line-through; }
</style>
</head>
<body>
	<code>text-decoration: none</code>
	<p class="textdecoration1">
	The current push to implement labor market</p>
	
	<code>text-decoration: underline</code>
	<p class="textdecoration2">
	The current push to implement labor market</p>
	
	<code>text-decoration: overline</code>
	<p class="textdecoration3">
	The current push to implement labor market</p>
	
	<code>text-decoration: line-through</code>
	<p class="textdecoration4">
	The current push to implement labor market</p>
</body>
</html>


스타일 시트 CSS 텍스트 줄 긋기 할 때 이용하는 text-decoration 속성 사용법

 

이렇게 텍스트에 강조를 하기 위한 라인 긋기가 아닌 하이퍼링크(href) 태그에서 기본적으로 그어지는 줄을 삭제해 보도록 하겠습니다. 하이퍼링크는 이벤트에 따른 가상 클래스 4가지가 있죠. 그 중 텍스트에 마우스가 올라갔을 때 발생하는 hover 가상 클래스 속성에만 밑줄을 긋겠습니다

<!DOCTYPE HTML>
<html>
<head>
<meta charset="euc-kr">
<title>CSS</title>
<style type="text/css">
	body {
		background-color: #e7e7e7;
		font-size:14pt;
		width: 500px;
	}
	p {	background-color: #d4d4f2; 
		/* border-style: solid; 
		border-width: 1px; */
		padding: 5px;
	}
	a:link { text-decoration: none;}
	a:visited { text-decoration: none;}
	a:active { text-decoration: none;}
	a:hover {text-decoration:underline;}
</style>
</head>
<body>
	<code>녹두장군 블로그 바로가기</code>
	<p><a href="http://mainia.tistory.com">
	상상을 현실로 만드는 IT 블로그 </a></p>
	<code>녹두장군 블로그 바로가기</code>
	<p><a href="http://mainia.tistory.com">
	상상을 현실로 만드는 IT 블로그 </a></p>
</body>
</html>

스타일 시트 CSS 텍스트 줄 긋기 할 때 이용하는 text-decoration 속성 사용법


Posted by 녹두장군