CSS text-decoration
이 장에서는 다음 속성에 대해 알아본다:
- text-decoration-line
- text-decoration-color
- text-decoration-style
- text-decoration-thickness
- text-decoration
CSS text-decoration 속성(텍스트에 decoration line 추가)
text-decoration-line 속성은 텍스트에 장식 선을 추가하는 데 사용된다.
추가 정보: 텍스트 위와 아래에 선을 표시하기 위해 두 개 이상의 값(예: 선 및 밑줄)을 결합할 수 있다.
| <!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: overline; } h2 { text-decoration-line: line-through; } h3 { text-decoration-line: underline; } p.ex { text-decoration-line: overline underline; } </style> </head> <body> <h1>Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p class="ex">Overline and underline text decoration.</p> <p><strong>참고: </strong> 링크가 아닌 텍스트에는 밑줄을 긋지 않는 것이 좋습니다. 이는 종종 혼동을 일으키기 때문입니다 독자.</p> </body> </html> |
text-decoration-line 속성에 overline 값을 설정하면 글자 위에 선을 표시한다.
text-decoration-line 속성에 line-throung 값을 설정하면 글자 중간에 선을 표시한다.
text-decoration-line 속성에 underline 값을 설정하면 글자 아래에 선을 표시한다.
text-decoration-line 속성에 overline underline 값을 설정하면 글자 위, 아래에 선을 표시한다.
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS decoration-color 속성(decortation line에 특정 색 설정하기)
text-decoration-color 속성은 장식 선의 색상을 설정하는 데 사용된다.
| <!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: overline; text-decoration-color: red; } h2 { text-decoration-line: line-through; text-decoration-color: blue; } h3 { text-decoration-line: underline; text-decoration-color: green; } p { text-decoration-line: overline underline; text-decoration-color: purple; } </style> </head> <body> <h1>Overline text decoration</h1> <h2>Line-through text decoration</h2> <h3>Underline text decoration</h3> <p>Overline and underline text decoration.</p> </body> </html> |
text-decoration-color 속성에 빨강색을 설정하면 글자 위에 빨강색 선이 표시된다.
text-decoration-color 속성에 파랑색을 설정하면 글자 중간에 파랑색 선이 표시된다.
text-decoration-color 속성에 초록강색을 설정하면 글자 아래에 초록색 선이 표시된다.
text-decoration-color 속성에 보라색을 설정하면 글자 위, 아래에 보라색 선이 표시된다.
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS text-decoration-style 속성
text-decoration-style 속성은 장식 선의 스타일을 설정하는 데 사용됩니다.
| <!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: underline; text-decoration-style: solid; /* this is default */ } h2 { text-decoration-line: underline; text-decoration-style: double; } h3 { text-decoration-line: underline; text-decoration-style: dotted; } p.ex1 { text-decoration-line: underline; text-decoration-style: dashed; } p.ex2 { text-decoration-line: underline; text-decoration-style: wavy; } p.ex3 { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; } </style> </head> <body> <h1>제목 1</h1> <h2>제목 2</h2> <h3>제목 3</h3> <p class="ex1">단락 1.</p> <p class="ex2">단락 2.</p> <p class="ex3">단락 3.</p> </body> </html> |
h1 요소에 text-decoration-style에 solid(실선)이 설정되어 글자 아래에 실선으로 표시된다.
h2 요소에 text-decoration-style에 double(이중실선)이 설정되어 글자 아래에 이중실선으로 표시된다.
h3 요소에 text-decoration-style에 dotted(점선)이 설정되어 글자 아래에 점선으로 표시된다.
p.ex1 요소에 text-decoration-style에 dashed(파선)이 설정되어 글자 아래에 파선으로 표시된다.
p.ex2 요소에 text-decoration-style에 wavy이 설정되어 글자 아래에 물결선으로 표시된다.
p.ex3 요소에 text-decoration-style에 wavy이 설정되어 글자 아래에 빨간색 물결선으로 표시된다.
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS text-decoration-thickness 속성
text-decoration-thickness 속성은 장식 선의 두께를 설정하는 데 사용된다.
| <!DOCTYPE html> <html> <head> <style> h1 { text-decoration-line: underline; text-decoration-thickness: auto; /* this is default */ } h2 { text-decoration-line: underline; text-decoration-thickness: 5px; } h3 { text-decoration-line: underline; text-decoration-thickness: 25%; } p { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: double; text-decoration-thickness: 5px; } </style> </head> <body> <h1>제목 1</h1> <h2>제목 2</h2> <h3>제목 3</h3> <p>단락.</p> </body> </html> |
h1 요소에 text-decoration-thickness에 auto로 설정되어 글자 아래에 자동으로 선의 두께를 설정하여 표시된다.
h2 요소에 text-decoration-thickness에 5px로 설정되어 글자 아래에 5px 선의 두께로 선이 표시된다.
h3 요소에 text-decoration-thickness에 25%로 설정되어 글자 아래에 25% 선의 두께로 선이 표시된다.
p 요소에 text-decoration-thickness에 5px로 설정되어 글자 아래에 5px 선의 두께로 선이 표시된다.
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS text-decoration 속성 (단축속성)
텍스트 장식 속성은 다음의 약자 속성이다:
- text-decoration-line (required)
- text-decoration-color (optional)
- text-decoration-style (optional)
- text-decoration-thickness (optional)
| <!DOCTYPE html> <html> <head> <style> h1 { text-decoration: underline; } h2 { text-decoration: underline red; } h3 { text-decoration: underline red double; } p { text-decoration: underline red double 5px; } </style> </head> <body> <h1>제목 1</h1> <h2>제목 2</h2> <h3>제목 3</h3> <p>단락.</p> </body> </html> |
h1 요소에 text-decoration에 underline 값으로 설정되어 글자 아래에 선이 표시된다.
h2 요소에 text-decoration에 underline red 값으로 설정되어 글자 아래에 빨강색 선이 표시된다.
h3 요소에 text-decoration에 underline red double 값으로 설정되어 글자 아래에 빨강색 이중실선이 표시된다.
p 요소에 text-decoration에 underline red double 5px값으로 설정되어 글자 아래에 빨강색 두께가 5px의 이중실선이 표시된다.
위의 코드를 실행한 결과 화면은 아래 그림과 같다.
CSS text-decoration none 설정
HTML의 모든 링크는 기본적으로 밑줄이 그어져 있다. 때때로 링크가 밑줄 없이 스타일이 지정되어 있는 것을 알 수 있다. 다음과 같이 링크에서 밑줄을 제거하는 데 사용된다:
| <!DOCTYPE html> <html> <head> <style> a { text-decoration: none; } </style> </head> <body> <h1>text-decoration: none</h1> <p>밑줄이 없는 링크 : <a href="https://www.naver.com">naver.com</a></p> </body> </html> |
위의 코드에서 text-decoration에 none 값을 설정하여 하이퍼링크에 밑줄을 표시하지 않도록 하였다. 결과 화면은 아래 그림과 같다.
CSS text-decoration 속성 정리
| 속성 | 설명 |
| text-decoration | 하나의 선언에 모든 텍스트 장식 속성을 설정합니다 |
| text-decoration-color | 텍스트 장식의 색상을 지정합니다 |
| text-decoration-line | 사용할 텍스트 장식의 종류를 지정합니다(밑줄, 밑줄 등) |
| text-decoration-style | 텍스트 장식의 스타일(솔리드, 점선 등)을 지정합니다 |
| text-decoration-thickness | 문자 장식 선의 두께를 지정합니다 |
지금까지 text-decoration 속성에 관련해서 살펴보았다.
text-decoration, text-decoration-color, text-decoration-line, text-decoration-style, text-decoration-thinkness 속성에 대해서 예제와 더불어 개념을 익혔다.
꼭 예제를 실습하기를 추천한다.
모두 화이팅입니다.!!!
출처 : 이 글의 출처는 w3schools사이트를 참고하였으며 필자가 추가하여 정리한 글입니다.
'HTML > CSS문법' 카테고리의 다른 글
| CSS text-transform 속성 (0) | 2023.08.01 |
|---|---|
| CSS text spacing (0) | 2023.07.31 |
| CSS Text alignment(글자 정렬) (0) | 2023.07.29 |
| CSS 텍스트(text) (0) | 2023.07.28 |
| CSS outline-offset (0) | 2023.07.27 |
댓글