HTML은 텍스트에 대해 다른 스타일 지정 옵션을 제공합니다. HTML 텍스트에 밑줄을 긋는 것도 그중 하나입니다. 밑줄을 긋기 만하면 아래 선을 차지하지 않고 텍스트 아래에 직선이 그려집니다. 이 자습서에서는 < u > 태그, CSS 코드, CSS 클래스 및 HTML 텍스트에 밑줄을 긋는 방법에 대해 알아 봅니다. 밑줄 속성 및 대안을 설정합니다.

< u > 태그를 사용하여 텍스트 밑줄

HTML은 HTML에서 주어진 텍스트에 밑줄을 긋기 위해 < u > 태그를 제공합니다. < u >는 밑줄을 긋는 시작 태그이며 < / u >는 밑줄의 끝을 설정하는 데 사용됩니다. 밑줄 태그는 하이퍼 링크, 굵은 텍스트 등과 같은 다양한 텍스트 유형에 문제없이 사용할 수 있습니다. 다음 예에서는 한 단어 나 완전한 문장 또는 하이퍼 링크에 밑줄을 긋습니다. < u > 또는 밑줄 HTML 태그는 Chrome, Mozilla Firefox, Microsoft Edge, Safari, Opera와 같은 모든 주요 브라우저에서 지원됩니다. .

CSS text-decoration 속성이있는 밑줄 텍스트

CSS는 다른 HTML 요소에 밑줄을 긋기 위해 text-decoration 속성을 제공합니다. HTML 텍스트에 밑줄을 긋기 위해 text-decoration 속성을 사용할 수 있습니다. 텍스트 장식 스타일 속성은 다른 HTML 태그 또는 요소와 함께 사용할 수 있습니다. 다음 예에서는 < span > 태그를 사용하여 텍스트를 선택하고 밑줄을 긋습니다.

텍스트 밑줄 색상 및 스타일 설정

경우에 따라 HTML 텍스트에 밑줄을 긋는 것만으로는 충분하지 않을 수 있습니다. 밑줄의 색상을 지정하거나 스타일을 변경할 수도 있습니다. CSS 속성 text-decoration는 < u >로 밑줄의 스타일을 지정하고 색상을 지정하는 데 사용할 수 있습니다. 태그 또는 그것없이. 아래에서는 HTML 텍스트 밑줄 색상을 빨간색, 녹색으로, 스타일은 물결 모양, 점선, 점선 및 이중으로 제공합니다.

wavy 스타일은 선이 물결처럼 물결 치는 직선이 아닌 선을 만듭니다.

dashed 스타일은 파선 밑줄을 만듭니다.

dotted 스타일은 파선과 비슷하지만 점이 더 작아집니다.

double 스타일은 기본값이 단일 밑줄 인 두 개의 밑줄을 넣습니다.

빨간색 및 점선 밑줄 철자, 구문 또는 일반적인 오류를 표현하는 데 사용할 수 있습니다. 또한 dotted

HTML 텍스트 밑줄에 CSS 클래스 사용

모든 밑줄 CSS 코드를 반복해서 작성하는 것은 좋지 않습니다. 다른 밑줄 사용 사례에 대해 CSS 클래스를 만들 수 있으며이 클래스는 다른 HTML 태그와 함께 HTML 텍스트 밑줄에 사용할 수 있습니다. 다음 예에서는 underline-red, underline-green과 같은 다양한 CSS 클래스를 만들어 텍스트 밑줄을 쉽게 만들 수 있습니다.