text-decoration는 텍스트에 밑줄이나 취소선, 윗선을 그려주는 속성
|
속성 |
설명 |
|
none |
줄을 표시하지 않음 |
|
underline |
텍스트에 밑줄을 표시 |
|
overline |
텍스트 위로 선을 표시 |
|
line-through |
글씨 가운데로 선 표시 |
티스토리 뷰
1. 개념
text-decoration - 텍스트에 줄 표시2. 태그
text-decorationhtml5 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
<style>
div
{
margin-top : 20px ;
}
</style>
</head>
<body>
1
<div style =' text-decoration : underline ;' >
텍스트 아래로 선을 표시
</div>
2
<div style =' text-decoration : overline ;' >
텍스트 위로 선을 표시
</div>
3
<div style =' text-decoration : line-through ;' >
글씨 가운데로 취소선을 의미하는 선 표시
</div>
</body>
</html>
|
결과 화면
코드 설명
1
text-decoration : underline ;
underline 속성은 텍스트 아래로 밑줄을 표시할 때 사용됩니다.
2
text-decoration : overline ;
overline 속성은 텍스트 위로 줄을 표시할 때 사용됩니다.
3
text-decoration : line-through ;
line-through 속성은 텍스트 가운데로 선을 그어주는 것으로 취소선으로 사용됩니다.
'[개발]프로그래밍 > css3' 카테고리의 다른 글
| [css3] text-shadow - 텍스트에 그림자 효과 (0) | 2021.03.31 |
|---|---|
| [css3] text-transform - 텍스트 대·소문자 변환 (0) | 2021.03.30 |
| [css3] color - 글자 색 지정 (0) | 2021.03.26 |
| [css3] font - 글꼴 속성 한꺼번에 표현 (0) | 2021.03.25 |
| [css3] font-style - 글자 스타일 지정 (0) | 2021.03.24 |
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday