스타일 시트 CSS 텍스트 줄긋기 방법

스타일 시트 CSS 텍스트 줄긋기

Text-decoraion 속성이란, 텍스트에 말그대로 줄을 그어주는 속성이에요. 보통 줄긋기를 통해 강조를 표현할 수도 있고, 글 중간에 그어버리면 "취소선"이 됩니다. 그리고 아래에 그어주면, "밑줄" 처리가 됩니다. 글자 위로도 그어줄 수가 있습니다. 보통 많이 사용하는 href 태그의 밑줄을 없애고 싶을 때에는, text-decoraion 속성 값 중에서 none을 적용시켜주면 됩니다

 

 

4가지 text-decoration 속성 값

텍스트의 줄을 그어주는 위치에 따라서 값이 달라요.

 

  • none : 기본값으로, 줄을 긋지 않는다는 표현
  • underline : 언더라인은 글자 아래에 줄을 긋습니다.
  • overline : 글자 위로 줄을 긋습니다
  • line-through : 글자 중간에 줄을 그어서, 취소선으로 사용합니다

기본 글자 밑줄을 적용하려면 underline

글자위에 줄 윗줄을 표현하려면 overline

글자 가운데 긋는 줄은 line-through

윗줄과 밑줄을 동시에 적용하는건 underline overline이 같이 들어가야 합니다 이건 보통 안쓰는 속성이죠

 

샘플 소스를 통한 결과 비교

text-decoration 속성 4가지를 테스트해봅니다. 샘플을 통한 결과를 보면 이해가 바로 됩니다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>텍스트에 줄 긋기 예제</title>
</head>
<body>
    <p style="text-decoration:underline">밑줄 긋기</p>
    <br>
    <p style="text-decoration:none">줄 안 긋기</p>
    <br>
    <p style="text-decoration:line-through">취소선 가운데 줄 긋기</p>
    <br>
    <p style="text-decoration:overline"> 글자 위에 줄긋기</p>
</body>
</html>
 
CSS 줄긋기 예시 예제를 통해, 직접 확인해보세요 태그연습장을 통해 가능합니다

결과를 이렇게 확인할 수 있습니다. 이런식으로 CSS 줄긋기를 적용시킬 수 있습니다

스타일시트 CSS 줄긋기 응용 연습

스타일시트 줄긋기 응용 연습에서는 스타일타입에 바디에 배경색과 글자사이즈, 그리고 넓이나 padding값을 표현하였습니다. 이런식으로 추가한 후에 줄긋기를 더 표현할 수 있습니다

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
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
    body {
        background-color: #e7e7e7;
        font-size:20pt;
        width: 600px;
    }
    p {    background-color: #d4d4f2; 
        padding: 5px;
    }
    .textdecoration1 { text-decoration: underline; }
    .textdecoration2 { text-decoration: none; }
    .textdecoration3 { text-decoration: line-through; }
    .textdecoration4 { text-decoration: overline; }
</style>
</head>
<body>
    <code>글자꾸밈속성 : 밑줄</code>
    <p class="textdecoration1">
    브라우니의 아래에 긋는줄</p>
    
    <code>글자꾸밈속성 : 없음</code>
    <p class="textdecoration2">
    브라우니의 무효과 밑줄</p>
    
    <code>글자꾸밈속성 : 글중간 긋기</code>
    <p class="textdecoration3">
    브라우니의 취소선 글중간에 줄긋기 </p>
    
    <code>글자꾸밈속성 : 글자 위에 줄긋기</code>
    <p class="textdecoration4">
    브라우니의 글자 위에 긋는줄 윗줄</p>
</body>
</html>
cs

 결과를 확인해볼까요 ?

속성별로 어떻게 나올지에 대해 우선 표현을 했고, 그 결과값이 파란칸에 표시가 되었습니다 파란박스와 글자크기를 속성값을 넣어줬기 때문에 이렇게 표현이 나옵니다 그냥 없이 텍스트라인 속성만 썼다면 흰종이에 검정글씨로 기본값으로 효과가 표현이 되겠죠

텍스트 줄 스타일 : 점선 표현 응용

텍스트 라인에는 스타일 응용이 가능합니다

대표적으로 간격이 적당한 dashed와 촘촘한 점선의 dotted,

줄을 이중으로 2번 그어서 더 강조하는 double이 있고

밑줄과 윗줄을 같이 그으면서 dashed하는 방식이 있습니다

 

예제를 통해 알아보겠습니다

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>브라우니 텍스트에 줄 긋기</title>
</head>
<body>
    <p style="text-decoration:none">줄 안 긋기</p>
    <br>
    <p style="text-decoration:line-through double">가운데 줄 긋기 double</p>
    <br>
    <p style="text-decoration:underline overline dashed">밑줄 윗줄 긋기 dashed</p>
    <br>
    <p style="text-decoration:underline dashed">밑줄 긋기 dashed</p>
    <br>
    <p style="text-decoration:overline dotted">윗줄 긋기 dotted</p>
    <br>
</body>
</html>

결과.

글자 크기나 박스 등에 대한 설정을 안하고 기본값으로 텍스트 스타일을 적용만 했을때의 모습입니다. 그럼 별도의 효과를 주었을 때 가독성이나 박스가 생겨나는 등 더 보기좋아지는 결과를 보여드리겠습니다 이를 위해 스타일 태그를 입력해줘야 합니다

 

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
28
29
30
31
32
33
34
35
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>CSS</title>
<style type="text/css">
    body {
        background-color: #e7e7e7;
        font-size:20pt;
        width: 600px;
    }
    p {    background-color: #d4d4f2; 
        padding: 5px;
    }
    .textdecoration1 { text-decoration: underline; }
    .textdecoration2 { text-decoration: none; }
    .textdecoration3 { text-decoration: line-through; }
    .textdecoration4 { text-decoration: overline; }
</style>
</head>
<title>브라우니 텍스트에 줄 긋기</title>
</head>
<body>
    <p style="text-decoration:none">줄 안 긋기</p>
    <br>
    <p style="text-decoration:line-through double">가운데 줄 긋기 double</p>
    <br>
    <p style="text-decoration:underline overline dashed">밑줄 윗줄 긋기 dashed</p>
    <br>
    <p style="text-decoration:underline dashed">밑줄 긋기 dashed</p>
    <br>
    <p style="text-decoration:overline dotted">윗줄 긋기 dotted</p>
    <br>
</body>
</html>cs

 예제를 입력해서 태그연습장에서 확인하면 이렇게 나옵니다

확실히 기본값일 때보다 스타일값을 넣어주니 배경색과 박스구분과 글자크기가 더 커짐으로써 한눈에 들어오네요

하이퍼링크에 기본으로 그어지는 밑줄 삭제하기

 

이번에는, 기본적으로 링크를 걸어두면 밑줄이 그어지는 표현을 삭제해보겠습니다. 하이퍼링크는 밑줄이 있는 이유가 강조가 되어서 링크연결을 유도하는 장점이 있지만, 디자인적으로 굳이 표현이 필요없는 경우에는 밑줄 표현을 삭제해야 할 때가 있겠죠

 

예제를 보시겠습니다

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
28
29
30
31
<!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://brownie1.tistory.com">
    브라우니 블로그 바로가기 </a></p>
    <code>하이퍼링크 바로가기 밑줄 없애기</code>
    <p><a href="http://brownie1.tistory.com">
    브라우니 블로그 바로가기 </a></p>
</body>
</html>

결과 확인