들어가기 전에
<a>를 사용하면 기본적으로 텍스트 밑에 밑줄이 그어져서 표시되는 것을 보신 적이 있으실 겁니다.
이러한 이유는 브라우저에 따라 다를 수는 있지만 보통 text-decoration이
<a>에 대해서 기본값이 다르기 때문입니다.
이 속성은 단순 밑줄을 그어주는 것이 아니라 다양한 줄의 스타일과 모양,
색상 등을 제어할 수 있습니다.
핵심키워드
- 텍스트의 꾸밈
- 밑줄의 종류
학습하기
들어가기 전에
<a>를 사용하면 기본적으로 텍스트 밑에 밑줄이 그어져서 표시되는 것을 보신 적이 있으실 겁니다.
이러한 이유는 브라우저에 따라 다를 수는 있지만 보통 text-decoration이
<a>에 대해서 기본값이 다르기 때문입니다.
이 속성은 단순 밑줄을 그어주는 것이 아니라 다양한 줄의 스타일과 모양,
색상 등을 제어할 수 있습니다.
핵심키워드
학습하기
text-decoration 속성
텍스트의 장식을 지정하는 속성입니다. 아래 속성들의 단축 속성으로, 기본 값은 차례대로 아래 3가지 속성의 값입니다.
기본 값 : none currentColor solid
text-decoration: text-decoration-line text-decoration-color text-decoration-style | initial | inherit;
< 속성 값 >
none | 텍스트 꾸밈을 생성하지 않음 ( 기본값 ) |
underline | 밑줄로 꾸밈을 설정 |
overline | 윗줄로 꾸밈을 설정 |
line-through | 중간을 지나는 줄로 꾸밈을 설정 |
< 속성 값 >
solid | 한줄 스타일 ( 기본 값 ) |
double | 이중선 스타일 |
dotted | 점선 스타일 |
dashed | 파선 스타일 |
wavy | 물결 스타일 |
코드실습
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>text-decoration</title>
</head>
<body>
<h2>일반 경우</h2>
<p style="text-decoration: overline;">
text-decoration: overline;
</p>
<p style="text-decoration: underline;">
text-decoration: underline;
</p>
<p style="text-decoration: line-through;">
text-decoration: line-through;
</p>
<h2>부모 내 자식요소가 float될 경우 상속이 해제됨</h2>
<a href="#" style="text-decoration: overline;"> <span style="float:left;">
text-decoration: overline;</span>
</a>
<br>
<h2>부모 내 자식요소가 absolute 경우 상속이 해제됨</h2>
<a href="#" style="text-decoration: overline;"> <span style="position:absolute;">
text-decoration: overline;</span>
</a>
</body>
</html>
생각해보기
참고자료
https://www.w3schools.com
https://www.w3schools.com
https://www.w3schools.com
https://www.w3schools.com
https://developer.mozilla.org