Please Enable JavaScript!
Gon[ Enable JavaScript ]

반응형

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 속성 사용법

 

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 CSS 접두어 webkit, moz, ms, o 의미
HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법
스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션
스타일 시트 CSS 브라우저 위치를 지정 left, right, top, bottom 속성
시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법

 

 

 

이렇게 텍스트에 강조를 하기 위한 라인 긋기가 아닌 하이퍼링크(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 속성 사용법

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다.
스타일 시트 CSS 접두어 webkit, moz, ms, o 의미
HTML5 와 CSS 이용해 페이지 레이아웃 만드는 방법
스타일 시트 CSS vertical-align 속성, inline 요소끼리 수직 정렬 옵션
스타일 시트 CSS 브라우저 위치를 지정 left, right, top, bottom 속성
시트 CSS 가장 기본적인 내용과 스타일을 삽입하는 여러가지 방법
반응형
Posted by 녹두장군1
,