HTML <a> href 속성
정의와 사용법
href 속성은 링크가 가리키는 페이지의 URL을 정의합니다.
href 속성 값은 어떤 유효한 문서의 상대적이거나 절대적 URL이 될 수 있으며, 프래그먼트 식별자와 JavaScript 코드 패스도 포함됩니다. 사용자가 <a> 태그의 내용을 선택하면, 브라우저가 검색하여 표시하려고 시도합니다 href 속성이 지정한 URL을 표시하는 문서, 또는 JavaScript 표현식, 메서드, 함수 목록을 실행합니다.
만약 href 속성이 존재하지 않으면, <a> 태그는 히브리 링크가 아닙니다.
힌트:href="#top" 또는 href="#"를 사용하여 현재 페이지의 상단에 링크할 수 있습니다!
텍스트 링크 만들기
다른 문서를 참조하는 간단한 <a> 태그는 다음과 같은 형식일 수 있습니다：
<a href="http://www.codew3c.com/index.html">CodeW3C.com 온라인 교육</a>
브라우저는 특별한 효과로
사용자는 브라우저의 옵션을 통해 텍스트 색상을 지정하고, 링크 전과 링크 후 텍스트 색상을 설정할 수도 있습니다。
힌트:사용할 수 있습니다 CSS伪类텍스트 하이퍼링크에 복잡하고 다양한 스타일을 추가할 수 있습니다。
이미지 링크 만들기
더 복잡한 앵커는 이미지를 포함할 수도 있습니다. 아래의 LOGO는 이미지 링크로, 이 이미지를 클릭하면 W3school의 홈페이지로 돌아갈 수 있습니다：
<a href="http://www.codew3c.com/index.html"> <img src="/i/codew3c_logo_white.gif" /> </a>
위 코드는 CodeW3C.com 로고에 홈페이지로 돌아가는 하이퍼링크를 추가합니다：
대부분의 그래픽 브라우저는 링크의 일부로 사용된 이미지 주위에 특별한 경계를 두습니다. <img> 태그에서 이미지의 border 속성0으로 설정하면 하이퍼링크의 경계를 제거할 수 있습니다. 또한, CSS 경계 속성요소의 경계 스타일을 전역적으로 변경할 수 있습니다。
예제
예제 1
href 속성은 링크의 목적지를 정의합니다：
<a href="https://www.codew3c.com">CodeW3C.com 방문</a>
예제 2
이미지를 링크로 사용하는 방법은 어떻게 됩니까：
<a href="https://www.codew3c.com"> <img border="0" alt="W3School" src="/i/logo/w3logo.png" width="400" height="225"> </a>
예제 3
이메일 주소에 어떻게 링크할 수 있습니까：
<a href="mailto:someone@example.com">이메일 보내기</a>
예제 4
전화번호에 어떻게 링크할 수 있습니까：
<a href="tel:+8613888888888">+86 138 8888 8888</a>
예제 5
동일 페이지의 다른 부분에 어떻게 링크할 수 있습니까：
<a href="#section2">第二章으로 이동</a>
예제 6
JavaScript에 어떻게 링크할 수 있습니까：
<a href="javascript:alert('Hello World!');">JavaScript 실행</a>
문법
<a href="URL">
속성 값
| 값 | 설명 |
|---|---|
| URL |
링크의 URL. 가능한 값:
|
브라우저 지원
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| 지원 | 지원 | 지원 | 지원 | 지원 |
