💡 퀵 접속: htm.kr/u

HTML <u> 태그

태그 설명

<u> 태그는 텍스트에 밑줄을 표시할 때 사용합니다. 주로 철자 오류를 표시하거나 중국어의 고유명사를 나타낼 때 활용되며, 일반적인 강조나 링크 표시에는 사용하지 않는 것이 좋습니다.

주요 속성

속성 값 설명
title 텍스트 추가 정보를 제공하는 툴팁을 표시합니다.

기본 예제

<p>
    철자 오류: <u>recieve</u> → receive
</p>

<p>
    중국어 고유명사: <u>北京</u> (베이징)
</p>

블로그 실전 예제

<!-- 1. 철자 교정 -->
<article class="spelling-correction">
    <h2>자주 틀리는 영어 철자</h2>
    <ul>
        <li><u>seperate</u> → separate</li>
        <li><u>accomodate</u> → accommodate</li>
        <li><u>definately</u> → definitely</li>
    </ul>
</article>

<!-- 2. 중국어 블로그 -->
<article class="chinese-blog">
    <h2>중국어 학습</h2>
    <p>
        <u>上海</u> (상하이)는 중국의 가장 큰 도시 중 하나입니다.
    </p>
</article>

<!-- 3. 스타일링 예제 -->
<style>
.u-custom {
    text-decoration: none;
    border-bottom: 2px dotted #e91e63;
    color: #e91e63;
}

.spelling-correction u {
    color: #f44336;
    text-decoration: line-through;
}

.chinese-blog u {
    color: #2196f3;
    text-decoration: underline;
    text-decoration-style: wavy;
}
</style>

<p>
    <u class="u-custom">특별한 강조</u>가 필요한 경우에만 사용합니다.
</p>

실제 보여지는 모양

철자 교정 예시

  • seperate → separate
  • accomodate → accommodate

중국어 예시

上海 (상하이)는 중국의 가장 큰 도시 중 하나입니다.

특별한 강조가 필요한 경우에만 사용합니다.

참고사항

  • 철자 오류나 중국어 고유명사를 표시할 때 사용합니다.
  • 일반적인 강조나 링크 표시에는 사용하지 않습니다.
  • CSS를 사용하여 밑줄 스타일을 커스터마이즈할 수 있습니다.
  • 스크린 리더는 이 태그를 통해 특별한 내용임을 인식합니다.
  • 과도한 사용은 가독성을 해칠 수 있습니다.

블로그 작성 팁

  • 철자 교정이나 오류 표시에 활용합니다.
  • 중국어나 일본어의 고유명사를 표시할 때 유용합니다.
  • 밑줄 스타일을 시각적으로 구분하기 위해 CSS를 활용합니다.
  • 일관된 스타일을 유지하여 가독성을 높입니다.
  • 링크와 혼동되지 않도록 주의합니다.

브라우저 지원

모든 주요 브라우저에서 지원됩니다.

  • Chrome: 지원
  • Firefox: 지원
  • Safari: 지원
  • Edge: 지원
  • Opera: 지원