HTML에서 텍스트에 밑줄을 긋는 가장 기본적인 방법은 <u> 태그를 사용하는 것입니다. 이 태그는 한때 HTML 표준에서 폐기(deprecated)되었지만, HTML5에서 다시 도입되었습니다. 현재의 <u> 태그는 단순한 밑줄 장식이 아니라, 철자가 틀린 단어처럼 다른 텍스트와 시각적으로 구분되어야 하는 내용임을 나타내는 의미적(semantic) 용도로 사용됩니다.
style 속성과 CSS로 밑줄 넣기
밑줄을 추가하는 또 다른 방법은 style 속성을 활용하는 것입니다. style 속성은 요소에 인라인(inline) 스타일을 지정하며, HTML <p> 태그와 함께 CSS의 text-decoration 속성을 사용하면 간편하게 밑줄을 적용할 수 있습니다.
다만 주의할 점이 있습니다. style 속성으로 지정한 인라인 스타일은 전역(global)으로 설정된 스타일보다 우선순위가 높습니다. 즉, HTML 문서 내 <style> 태그나 외부 스타일시트에서 정의한 스타일이 있더라도 인라인 스타일이 이를 덮어쓰게(override) 됩니다.
예제 1: <u> 태그 사용하기
아래 코드를 실행하면 <u> 태그를 사용해 HTML 페이지의 텍스트에 밑줄을 넣을 수 있습니다.
<!DOCTYPE html> <html> <head> <title>HTML u tag</title> </head> <body> <h1>Heading</h1> <p><u>This text will be underlined.</u></p> </body> </html>
예제 2: CSS text-decoration 속성 사용하기
다음은 CSS의 text-decoration 속성을 이용해 텍스트에 밑줄을 적용하는 예제입니다.
<!DOCTYPE html> <html> <head> <title>HTML Text underline</title> </head> <body> <h1>Heading</h1> <p style="text-decoration: underline;">This text will be underlined.</p> </body> </html>
마무리
정리하면, HTML5에서는 의미적으로 구분이 필요한 텍스트에는 <u> 태그를, 순수하게 시각적인 스타일 목적이라면 CSS의 text-decoration: underline; 속성을 사용하는 것이 권장됩니다. 두 방법 모두 상황에 맞게 활용하면 웹 페이지의 가독성과 접근성을 높일 수 있습니다.