CSS text-decoration 사용 방법

텍스트에 밑줄을 넣거나, 취소줄을 긋거나 a링크의 줄을 없앨 때 사용하는 text-decoration에 대해 알아보겠습니다. 개인적으로는 text-decoration을 a링크에 많이 사용하는 편입니다. a링크 태그는 기본적으로 밑줄이 들어가는 형태입니다. 요즘 웹페이지를 살펴보시면 링크에 밑줄이 들어간 경우가 거의 없잖아요? 그때 사용하는것이 text-decoration: none; 처리입니다. 종류와 쓰임새는 예시를 통해 한번 자세히 살펴보겠습니다.

 

기본 옵션 예시

See the Pen CSS text-decoration by rgy0409 (@rgy0409) on CodePen.

각 항목별로 살펴보시면 쉽게 파악 가능합니다. 아래는 요약 내용입니다.

 

text-decoration: none; ▶ 비활성화 (a태그의 경우 밑줄 없앰)

text-decoration: underline; ▶ 밑줄

text-decoration: overline; ▶ 윗줄

text-decoration: line-through; ▶ 취소선

text-decoration: blink; ▶ 깜밖임(브라우저에 따라 지원여부 다름)

특히 blink의 경우는 거의 사용하지 않는다고 생각하시면 됩니다. 그래도 알아두면 언젠가는 응용할 수 있겠지요? 이렇게 간단하게 사용하기도 하며 좀 더 자세한 설정도 가능합니다.

 

세부 설정

선의 스타일, 두께, 색상 등등을 좀 더 자세히 설정할 수 있습니다. 아래의 예시를 살펴보시기 바랍니다.

 

See the Pen CSS text-decoration (detail) by rgy0409 (@rgy0409) on CodePen.

보시면 다음과 같은 공통 규칙을 파악할 수 있습니다.

 

text-decoration: 스타일 위치 색상 두께;

 

이때 마크업을 하느냐 하지 않느냐에 따라 적용됨이 달라지며 별도로 마크업하지 않은 경우 기본값으로 적용됩니다. 예를 들자면 위의 예시중 마지막 단락의 경우에는 선의 위치만 마크업 되었고 스타일이나 색상, 두께에 대해서는 따로 마크업하지 않았습니다. 그렇기에 입력한 선위치 세개가 동시에 적용이 되었고 나머지는 모두 기본값으로 적용되었습니다. 끝.