[html] a 태그 밑줄 없애기
프로그래밍/HTML & JavaScript2015. 1. 27. 11:44
반응형
HTML의 a태그로 만들어진 링크에는, 기본적으로 항상 밑줄(Underline)이 붙습니다.
요즘에는 링크에서 밑줄을 지우는 것이 일반적입니다. 링크에서 밑줄을 삭제하려면
style="text-decoration:none"
이라는 스타일을 지정하면 됩니다. 또는 클래스를 만들어 지정해 주어도 됩니다.
그런데 text-decoration:none 을 지정해도, 아주 복잡한 웹페이지의 경우에는 링크가 없어지지 않는 경우가 있습니다. CSS 속성들이 서로 뒤엉켜 있기 때문입니다. 이때는
!important
이라는 (느낌표+important) 구문을 추가하여 강제로 지정해야 합니다. 다음 예제와 같습니다:
링크 텍스트에서, 언더라인(밑줄) 삭제 예제
파일명: example.html
<html>
<head>
<style type="text/css">
/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }
/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }
</style>
</head>
<body>
<!-- 스타일을 직접 지정하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" style="text-decoration:none">Google 검색</a>
<br />
<!-- a.no-uline 클래스를 이용하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>
<br />
<!-- 마우스를 가져갔을 때에만, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="noul">Google 검색</a>
</body>
</html>
<head>
<style type="text/css">
/* 링크에서 밑줄 없애기 */
a.no-uline { text-decoration:none }
/* 마우스 지나갈 때만 삭제 + 강제로 없애기 */
a.noul:hover { text-decoration:none !important }
</style>
</head>
<body>
<!-- 스타일을 직접 지정하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" style="text-decoration:none">Google 검색</a>
<br />
<!-- a.no-uline 클래스를 이용하여, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="no-uline">Google 검색</a>
<br />
<!-- 마우스를 가져갔을 때에만, 밑줄 지우기 -->
<a href="http://www.google.co.kr/" class="noul">Google 검색</a>
</body>
</html>
▶▶ HTML-CSS] 마우스 가져갔을 때에만, 밑줄(언더라인) 표시; Mouse Hover Underline
모든 밑줄 한꺼번에 없애는 법: ▶▶ A태그에서 밑줄을 없애려면? 링크 언더라인 지우려면? Link Underline Remove
[출처] http://mwultong.blogspot.com/2007/02/html-css-links-without-underline.html
반응형
'프로그래밍 > HTML & JavaScript' 카테고리의 다른 글
| 라디오버튼 클릭시 input 박스 활성화 시키기 (0) | 2015.01.27 |
|---|---|
| [javascript] 글자나 이미지에 마우스를 올리면 다른곳의 이미지가 변경 (0) | 2015.01.27 |
| [html] 테이블 테두리 얇게하기 (0) | 2015.01.27 |
| [html] 이미지와 텍스트 높이 맞추기 (이미지 높이 지정) (0) | 2015.01.27 |
| [html] 마우스 올려놓았을때 이미지 변경시키는 방법 (0) | 2015.01.27 |
댓글()
