HTML의 링크에서 밑줄을 제거하는 방법?

130

내 페이지에는 줄을 원하지 않는 링크를 넣었으므로 HTML을 사용하여 어떻게 제거 할 수 있습니까?

html

— Paic Ten
소스

4

Paic, 태그를 다시 롤백하는 것을 귀찮게하지는 않지만 밑줄을 제거하는 유일한 방법은 CSS를 사용하는 것 입니다. 예, HTML과 함께 인라인으로 추가하더라도 ( style속성에서) 여전히 CSS 입니다. 다른 두 태그도 완전히 유효합니다 ( presentation및 hyperlink). 나중에 유효한 이유가없는 한 질문에 태그를 제거하거나 추가하지 마십시오. 감사!

— 0b10011

@bfrohs 나는 당신의 말을 존중하지만 HTML 만 사용하여 내 사이트를 구축하고 있으므로 태그를 추가하지 않았습니다. 실제로 나는 그것에 약간 초보자입니다, 그 이유입니다.

— Paic Ten

3

모든 프레젠테이션에 대해 브라우저 기본값을 사용하지 않는 한 CSS없이 표준 호환 웹 사이트를 구축 할 수 없습니다. HTML = 구조; CSS = 프리젠 테이션. 다른 태그는 다른 언어와 아무 관련이 없습니다. 사람들이 질문과 답변을 찾을 수 있도록 돕기 위해서만 제공되었습니다.

— 0b10011

1

앵커 (링크)의 밑줄을 제거하는 방법의

— RAS

2

왜이 질문에 많은 투표권이 있습니까? 문자 그대로 단일 Google 검색으로 대답 할 수 있으며 StackOverflow에 많은 사본이 있다고 확신합니다.

— Alternatex

192

인라인 버전 :

<a href="http://yoursite.com/" style="text-decoration:none">yoursite</a>

그러나 당신이 기억 해야 일반적으로 분리 (당신의 웹 사이트의 콘텐츠를 HTML을 (어떤 프리젠 테이션에서) CSS ). 따라서 일반적으로 인라인 스타일을 피해야합니다 .

참조 존의 답변을 사용하여 해당하는 답을보기 위해 CSS를 .

— patryk.beza
소스

1

살인자! 나는 HTML을하는 곳에서 몇 년 동안이 밑줄을 본 적이 없다 .... ^^

— Alex Cio

1

John의 대답은 여전히 본질적으로 인라인 스타일을 사용합니다. CSS를 분리한다는 것은 HTML에서 앨리어싱 CSS 이상을 의미합니다. 예를 들어 class="big-and-red"별명이 아닌 별명입니다. class="meaningful-domain-item"그런 다음 CSS .meaningful-domain-item { //big and red }입니다. 이 대답은 CSS +1에서 사용할 태그를 상기시키기에 충분합니다.

— Nathan Cooper

이 위에서 언급 한 코드는 저에게 효과적이지 않았습니다. 문제를 파헤 치면 href 뒤에 스타일을 배치했기 때문에 작동하지 않는다는 것을 알았습니다. href 앞에 스타일을 배치하면 예상대로 작동했습니다. <a href=" yoursite.com "style="text-decoration:none"> 귀하의 사이트 </a>

— Ganesh MS

55

모든 링크에서 모든 밑줄이 제거됩니다.

a {text-decoration: none; }

이 링크를 적용하려는 특정 링크가 있으면 클래스 이름을 지정하고 다음과 같이 nounderline하십시오.

a.nounderline {text-decoration: none; }

이는 해당 링크에만 적용되며 다른 모든 링크에는 영향을 미치지 않습니다.

이 코드는 <head>문서 또는 스타일 시트에 속합니다 .

<head>
    <style type="text/css">
        a.nounderline {text-decoration: none; }
    </style>
</head>

그리고 몸에서 :

<a href="#" class="nounderline">Link</a>

— 존 콘데
소스

15

마우스 포인터가 앵커 위에 있으면 밑줄을 피하기 위해 : hover를 사용하는 것이 좋습니다.

a:hover {
   text-decoration:none;
}

— 로마 인
소스

6

이것을 외부 스타일 시트에 추가하십시오 ( 선호 ).
```
a {text-decoration:none;}
```

또는 이것을 <head>HTML 문서에 추가하십시오 .

<style type="text/css">
 a {text-decoration:none;}
</style>

또는 a요소 자체에 추가하십시오 ( 권장되지 않음 ).

<!-- Add [ style="text-decoration:none;"] -->
<a href="http://example.com" style="text-decoration:none;">Text</a>

— 0b10011
소스

4

다른 답변은 모두 텍스트 장식을 언급합니다. 때로는 다른 방법으로 링크에 밑줄이있는 Wordpress 테마 또는 다른 사람의 CSS를 사용하므로 텍스트 장식은 밑줄을 끄지 않습니다.

테두리와 상자 그림자는 링크에 밑줄을 표시하는 다른 두 가지 방법입니다. 이것들을 끄려면 :

border: none;

과

box-shadow: none;

— 조 골튼
소스

2

다음은 모범 사례는 아니지만 때로는 유용한 것으로 입증 될 수 있습니다.

John Conde가 제공하는 솔루션을 사용하는 것이 좋지만 때로는 외부 CSS를 사용하는 것이 불가능합니다. 따라서 HTML 태그에 다음을 추가 할 수 있습니다.

<a style="text-decoration:none;">My Link</a>

— NebulousGirl
소스

1

<style="text-decoration: none">

위의 코드로 충분합니다. 밑줄을 제거하려는 링크에 붙여 넣으십시오.

— sd1990
소스

1

위에서 언급 한 모든 코드가 작동하지 않았습니다. 문제를 파헤 치면 href 뒤에 스타일을 배치했기 때문에 작동하지 않는다는 것을 알았습니다. href 앞에 스타일을 배치하면 예상대로 작동했습니다.

<a style="text-decoration:none" href="http://yoursite.com/">yoursite</a>

— 가네쉬 MS
소스