[html] HTML 텍스트 아래에 점선 밑줄을 추가하는 방법

Question 1

텍스트 아래의 줄이 표준 밑줄이 아닌 점선이되도록 HTML 텍스트에 어떻게 밑줄을 긋나요? 가급적이면 별도의 CSS 파일을 사용하지 않고이 작업을 수행하고 싶습니다. 저는 html의 초보자입니다.

Question 2

CSS 없이는 불가능합니다. 사실, <u>태그는 단순히 text-decoration:underline브라우저의 내장 CSS를 사용하여 텍스트에 추가 하는 것입니다.

수행 할 수있는 작업은 다음과 같습니다.

<html>
<head>
<!-- Other head stuff here, like title or meta -->

<style type="text/css">
u {    
    border-bottom: 1px dotted #000;
    text-decoration: none;
}
</style>
</head>
<!-- Body, content here -->
</html>

Question 3

다음 CSS 코드 사용 …

text-decoration:underline;
text-decoration-style: dotted;

Question 4

CSS가 없으면 기본적으로 이미지 태그를 사용해야합니다. 기본적으로 텍스트의 이미지를 만들고 밑줄을 추가하십시오. 이는 기본적으로 화면 판독기에 페이지가 쓸모 없다는 것을 의미합니다.

CSS를 사용하면 간단합니다.

HTML :

<u class="dotted">I like cheese</u>

CSS :

u.dotted{
  border-bottom: 1px dashed #999;
  text-decoration: none; 
}

실행 예

예제 페이지

<!DOCTYPE HTML>
<html>
<head>
    <style>
        u.dotted{
          border-bottom: 1px dashed #999;
          text-decoration: none; 
        }
    </style>
</head>
<body>
    <u class="dotted">I like cheese</u>
</body>
</html>

Question 5

HTML5 요소는 점선 밑줄을 줄 수 있으므로 텍스트 아래에는 일반 밑줄이 아닌 점선이 있습니다. 그리고 title 속성은 사용자가 요소 위에 커서를 놓으면 도구 설명을 만듭니다.

참고 : 점선 테두리 / 밑줄은 기본적으로 Firefox 및 Opera에 표시되지만 IE8, Safari 및 Chrome에는 CSS 줄이 필요합니다.

<abbr title="Hyper Text Markup Language">HTML</abbr>

Question 6

콘텐츠에 한 줄 이상이있는 경우 아래쪽 테두리를 추가해도 도움이되지 않습니다. 이 경우에는 사용해야합니다.

text-decoration: underline;
text-decoration-style: dotted;

텍스트와 줄 사이에 더 많은 숨을 쉴 수있는 공간을 원하면 다음을 사용하십시오.

text-underline-position: under;

Question 7

@epascarello 의 답변 형식을 다시 지정했습니다 .

u.dotted {
  border-bottom: 1px dashed #999;
  text-decoration: none;
}

<!DOCTYPE html>
<u class="dotted">I like cheese</u>

스 니펫 확장

Question 8

dotted옵션으로 테두리 하단을 사용할 수 있습니다 .

border-bottom: 1px dotted #807f80;