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>
▼ 이렇게 텍스트에 강조를 하기 위한 라인 긋기가 아닌 하이퍼링크(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>
'스마트폰' 카테고리의 다른 글
| 노트북 스마트폰과 블루투스로 연결하고 파일 전송하기 (6) | 2023.11.23 |
|---|---|
| 스마트폰 개발자옵션 활성화 하는 방법 (0) | 2023.09.06 |
| 스마트폰 인터넷 앱 비밀 모드 비밀번호 해제하는 방법 (0) | 2023.01.25 |
| 스마트폰 아이피 확인하거나 변경하는 방법 (2) | 2023.01.23 |
| 스마트폰 갤럭시 유튜브 pip 모드 사용하기 (2) | 2022.12.19 |
| 스마트폰 갤럭시 쿼티 천지인 키보드로 변경하기 (0) | 2022.11.23 |
| 스마트폰 갤럭시 통화 중 앱 알람 소리 변경하기 (0) | 2022.10.11 |
| 스마트폰 파일 다운로드 위치, 저장 경로 찾기 (1) | 2022.10.02 |
