<u> 태그의 정의 및 사용법
<u> 태그는
명시적이지만 텍스트로 설명되지 않는 비언어적 주석이 있는 텍스트를 나타냅니다.
이는 문맥상 가진 의미나 특성이 별도의 설명 없이도 주석처럼 시각적으로 구분되거나 표현될 수 있는 텍스트의 범위를 가리킵니다.
예제
철자 오류 표시, 중국어 고유명사 표기 등에 사용될 수 있습니다.
철자 오류 표시
철자에 오류가 있을 때 별도의 설명이 없어도 주석처럼 시각적으로 구분되거나 표현하는 사용 예제입니다.
대부분의 브라우저에서는 <u> 태그의 텍스트에 밑줄(CSS의 text-decoraion 속성의 값 underline을 초깃값으로 설정하고 있음)을 추가합니다.
아래의 예제처럼 약간의 CSS를 추가하면 <u> 태그의 사용 방법에 대해 좀 더 쉽게 이해할 수 있습니다.
문단에서 철자 오류가 존재하는 부분을 빨간색 물결 밑줄로 표시했습니다.
위와 같은 CSS를 적용하면, 철자 오류가 있는 텍스트를 빨간 물결 밑줄로 표시할 수 있습니다. 이 스타일은 맞춤법 오류를 표시할 때 흔히 사용됩니다. 워드 프로세서를 사용해본 경우 친숙한 모습일 것입니다.
중국어 고유명사 표기
고전의 한자로 작성된 '중국어 고유명사'는 '간체 중국어'나 '번체 중국어'인 현대 중국어와 다르며, 이를 구분하기 위해 비텍스트적 주석처럼 직선 밑줄(_) 등을 사용하여 시각적으로 일반 텍스트와 구별합니다. 이와 달리, 책 제목 표기에는 물결 모양 밑줄(﹏) 이 사용됩니다.
중국어 고유명사
<u>屈原</u>에서 屈原은 고대 중국의 유명한 시인인 '屈原(Qu Yuan)'을 나타내는 고유명사입니다. 이 텍스트에서 屈原이 고전의 한자로 작성된 고유명사임을 나타냅니다.
책 제목
이 예제에서 <u>離騒</u>는 고대 중국 문학 작품인 《離騷》(Li Sao, "The Lament")의 제목을 나타냅니다. 책 제목을 강조하기 위해 물결 모양의 밑줄 스타일이 적용되었습니다. 전통적으로 책 제목은 물결 모양 밑줄(﹏)을 사용하여 나타내며, 이를 통해 독자가 텍스트의 중요한 제목을 쉽게 인식할 수 있도록 돕습니다.
<u> 태그의 의미 변화
<u> 태그는 원래 초기 HTML 명세에서는 시각적으로 텍스트의 밑줄을 만들기 위해 사용되었습니다.
대부분의 브라우저에서도 여전히 텍스트에 밑줄을 표시합니다. 그러나 HTML5에서는 이 태그의 의미가 확장되어, 단순한 스타일링을 넘어 '명시적이지만 텍스트로 설명되지 않는 비언어적 주석이 있는 텍스트'를 나타냅니다.
주의할 점
<u> 태그를 사용할 때에는 이 태그의 의미론적 사용을 고려해야 합니다.
단순히 텍스트에 밑줄을 사용하려면
<u> 태그가 대부분의 브라우저에서 텍스트에 밑줄을 표시하지만, 밑줄을 적용하기 위한 용도로 사용해서는 안됩니다.
텍스트의 밑줄 스타일은 CSS의 text-decoration 속성을 사용하세요.
다른 태그가 더 적절하지 않을 때 마지막 수단으로 사용
<u> 태그는 다른 태그가 더 적절하지 않을 때 마지막 수단으로 사용해야 합니다.
- 주위 텍스트에 비해 문맥적으로 중요한 내용을 강조(stress emphasis)하는 데에는
<em>태그를 사용하세요. - 인용된 책, 공연, 음악 등 창작물의 이름을 나타려면
<cite>태그를 사용하세요. - 해당 내용의 중요성, 심각성 또는 긴급성을 강하게 강조(strong importance)하는 데에는
<strong>태그를 사용하세요. - 한 문서 내에서 관련성이 있는 특정 부분을 참조 목적으로 표시하거나 강조하는 텍스트 구간으로 사용할 때에는
<mark>태그를 사용하세요. - 실용적인 목적으로 주의를 끌기 위한 텍스트 범위를 나타내려면
<b>태그를 사용하세요. - 주위 텍스트에 비해서 다른 목적으로 구분되어야 하는 텍스트를 나타내려면
<i>태그를 사용하세요.
속성
<u> 태그는 모든 글로벌 속성을 사용할 수 있습니다. 하지만, <u>만을 위한 관련 속성은 없습니다.
기술적인 문법 요약
브라우저 호환성
| 태그 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
|---|---|---|---|---|
<u>
|
1 | 12 | 1 | 1 |
명세서
| 명세서 사양 | |
|---|---|
<u>
|
HTML Standard #the-u-element |